Skip to content

Commit 1b6745b

Browse files
JhaSourav07yash gupta
andauthored
refactor(svg): document auto-theme css variables (JhaSourav07#588)
Co-authored-by: yash gupta <you@example.com>
2 parents 5924511 + 818d6d4 commit 1b6745b

1 file changed

Lines changed: 4 additions & 0 deletions

File tree

lib/svg/generator.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,10 @@ function generateAutoThemeSVG(
298298
299299
<style>
300300
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=JetBrains+Mono&amp;family=Roboto&amp;display=swap');
301+
/* Auto-theme strategy: expose the palette as CSS variables so the SVG can
302+
switch from light to dark through prefers-color-scheme. Shapes use classes
303+
instead of inline fills because inline fill attributes would override these
304+
variables and prevent the theme from updating automatically. */
301305
:root { --cp-bg: #${light.bg}; --cp-text: #${light.text}; --cp-accent: #${light.accent}; }
302306
@media (prefers-color-scheme: dark) { :root { --cp-bg: #${dark.bg}; --cp-text: #${dark.text}; --cp-accent: #${dark.accent}; } }
303307
.cp-bg-fill { fill: var(--cp-bg); } .cp-text-fill { fill: var(--cp-text); color: var(--cp-text); } .cp-accent-fill { fill: var(--cp-accent); color: var(--cp-accent); }

0 commit comments

Comments
 (0)