+5 -1

astro.config.mjs

··· 17 17 // @ts-expect-error idk why this gets flagged as wrong 18 18 rehypePlugins: [rehypeAccessibleEmojis, rehypeCustomHtml], 19 19 shikiConfig: { 20 20 - theme: "catppuccin-frappe", 20 20 + themes: { 21 21 + dark: "catppuccin-frappe", 22 22 + light: "github-light-high-contrast", 23 23 + }, 24 24 + defaultColor: false, 21 25 }, 22 26 }, 23 27 });

+2

src/config.ts

··· 72 72 background: { 73 73 main: "#f2f6fc", 74 74 secondary: "#e7e8ea", 75 75 + code: "#ffffff", 75 76 }, 76 77 typography: { 77 78 body: "#070e21", ··· 86 87 background: { 87 88 main: "#262428", 88 89 secondary: "#161418", 90 90 + code: "#303446", 89 91 }, 90 92 typography: { 91 93 body: "#ffebff",

+16 -13

src/pages/blog/[id].astro

··· 107 107 108 108 <style> 109 109 .lang { 110 110 - color: white; 110 110 + color: var(--typo-body); 111 111 } 112 112 113 113 button { 114 114 border: none; 115 115 - background-color: #ffffff20; 115 115 + background: none; 116 116 117 117 - border-radius: 0.5rem; 118 118 - padding: 0; 119 119 - width: 2.8rem; 120 120 - height: 2.8rem; 117 117 + display: flex; 118 118 + align-items: center; 119 119 + justify-content: center; 121 120 122 121 & svg { 123 123 - stroke: var(--_dark-typo-body); 122 122 + stroke: var(--typo-body); 124 123 margin: 0.2rem; 125 124 } 126 125 } ··· 134 133 position: sticky; 135 134 top: 0; 136 135 left: 0; 137 137 - background-color: color-mix( 138 138 - in oklab, 139 139 - var(--_dark-bg-main), 140 140 - var(--_dark-bg-secondary) 141 141 - ); 136 136 + border-bottom: 0.4rem solid var(--bg-main); 142 137 user-select: none; 143 138 } 144 139 </style> ··· 400 395 } 401 396 402 397 .astro-code { 403 403 - background-color: var(--_dark-bg-secondary) !important; 398 398 + background-color: var(--bg-code) !important; 404 399 margin-block: 1rem; 405 400 padding: 0; 406 401 position: relative; ··· 408 403 & code { 409 404 display: block; 410 405 padding: 1rem; 406 406 + 407 407 + & span { 408 408 + color: light-dark(var(--shiki-light), var(--shiki-dark)) !important; 409 409 + } 411 410 } 412 411 } 413 412 ··· 473 472 var(--_light-bg-secondary), 474 473 var(--_dark-bg-secondary) 475 474 ); 475 475 + 476 476 + --bg-code: light-dark(var(--_light-bg-code), var(--_dark-bg-code)); 476 477 477 478 --typo-body: light-dark(var(--_light-typo-body), var(--_dark-typo-body)); 478 479 ··· 593 594 :root { 594 595 --_light-bg-main: ${light.background.main}; 595 596 --_light-bg-secondary: ${light.background.secondary}; 597 597 + --_light-bg-code: ${light.background.code}; 596 598 --_light-typo-body: ${light.typography.body}; 597 599 --_light-typo-heading: ${light.typography.heading}; 598 600 --_light-typo-subheading: ${light.typography.subheading}; ··· 601 603 602 604 --_dark-bg-main: ${dark.background.main}; 603 605 --_dark-bg-secondary: ${dark.background.secondary}; 606 606 + --_dark-bg-code: ${dark.background.code}; 604 607 --_dark-typo-body: ${dark.typography.body}; 605 608 --_dark-typo-heading: ${dark.typography.heading}; 606 609 --_dark-typo-subheading: ${dark.typography.subheading};