+5 -1

astro.config.mjs

··· 17 // @ts-expect-error idk why this gets flagged as wrong 18 rehypePlugins: [rehypeAccessibleEmojis, rehypeCustomHtml], 19 shikiConfig: { 20 - theme: "catppuccin-frappe", 0 0 0 0 21 }, 22 }, 23 });

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

+2

src/config.ts

··· 72 background: { 73 main: "#f2f6fc", 74 secondary: "#e7e8ea", 0 75 }, 76 typography: { 77 body: "#070e21", ··· 86 background: { 87 main: "#262428", 88 secondary: "#161418", 0 89 }, 90 typography: { 91 body: "#ffebff",

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

+16 -13

src/pages/blog/[id].astro

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

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