Skip to content

Instantly share code, notes, and snippets.

@amit08255

amit08255/svg-dark-light.html

Last active November 12, 2025 14:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save amit08255/c88bda3193b4dc75517735e2c788256a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save amit08255/c88bda3193b4dc75517735e2c788256a to your computer and use it in GitHub Desktop.
Download ZIP
SVG Dark Light Themed Color
Raw
svg-dark-light.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>SVG Dark Mode - Real light-dark() CSS</title>
<style>
:root {
color-scheme: light dark;
}
html {
background: light-dark(white, #1a1a1a);
color: light-dark(black, white);
}
body {
font-family: Arial, sans-serif;
padding: 40px;
line-height: 1.8;
margin: 0;
}
h1 {
margin-bottom: 30px;
color: light-dark(#0066cc, #66b3ff);
}
.section {
margin-bottom: 60px;
padding: 20px;
border: 1px solid light-dark(#ddd, #444);
border-radius: 8px;
background: light-dark(#fafafa, #252525);
}
h2 {
color: light-dark(#0066cc, #66b3ff);
margin-bottom: 20px;
font-size: 1.5em;
margin-top: 0;
}
.example {
margin: 20px 0;
padding: 15px;
background: light-dark(#f5f5f5, #2a2a2a);
border-radius: 4px;
}
.example h3 {
margin-top: 0;
margin-bottom: 15px;
font-size: 1.1em;
}
.example-label {
font-size: 0.9em;
color: light-dark(#666, #aaa);
margin-bottom: 10px;
}
.svg-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 120px;
}
svg {
width: 100px;
height: 100px;
}
.code {
background: light-dark(#f0f0f0, #1a1a1a);
border-left: 4px solid light-dark(#0066cc, #66b3ff);
padding: 10px 15px;
margin: 15px 0;
font-family: monospace;
font-size: 0.9em;
overflow-x: auto;
border-radius: 4px;
color: light-dark(#333, #ccc);
}
.what-you-see {
margin: 10px 0;
padding: 10px;
background: light-dark(#fffacd, #3a3a1a);
border-radius: 4px;
font-size: 0.95em;
font-weight: bold;
color: light-dark(#333, #ffff99);
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.info-box {
background: light-dark(#e8f4f8, #1a3a3a);
border-left: 4px solid light-dark(#0066cc, #66b3ff);
padding: 15px;
margin: 15px 0;
border-radius: 4px;
}
@media (max-width: 900px) {
.grid-2 {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h1>SVG Dark Mode - Using Real color-scheme + light-dark() CSS</h1>
<div class="info-box">
<strong>How to test this:</strong> Toggle your OS dark mode (System
Preferences on Mac, Settings on Windows) or use your browser's dark
mode extension. The SVGs below use only CSS - no JavaScript. They
respond to your OS preference automatically.
</div>
<!-- SECTION 1: INLINE SVG WITH light-dark() -->
<div class="section">
<h2>1. Inline SVG - Red in Light Mode, Yellow in Dark Mode</h2>
<p>
This SVG is written directly in the HTML. The CSS uses
light-dark() to define fill color.
</p>
<div class="example">
<h3>Circle (Red → Yellow)</h3>
<div class="example-label">
Uses: fill: light-dark(red, yellow);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
style="fill: none; stroke-width: 3"
stroke="light-dark(red, yellow)"
cx="50"
cy="50"
r="40"
/>
</svg>
</div>
<div class="what-you-see">
Light Mode: RED | Dark Mode: YELLOW
</div>
</div>
<div class="code">
&lt;svg viewBox="0 0 100 100"&gt;<br />
&nbsp;&nbsp;&lt;style&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;:root { color-scheme: light dark; }<br />
&nbsp;&nbsp;&nbsp;&nbsp;circle { fill: light-dark(red, yellow);
}<br />
&nbsp;&nbsp;&lt;/style&gt;<br />
&nbsp;&nbsp;&lt;circle cx="50" cy="50" r="40" /&gt;<br />
&lt;/svg&gt;
</div>
</div>
<!-- SECTION 2: EXTERNAL SVG -->
<div class="section">
<h2>2. External SVG - Green in Light Mode, Purple in Dark Mode</h2>
<p>
This SVG is loaded from an external file using data URI. The SVG
file declares color-scheme and uses light-dark().
</p>
<div class="example">
<h3>Square (Green → Purple)</h3>
<div class="example-label">
Uses: fill: light-dark(green, purple);
</div>
<div class="svg-container">
<img
src="data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E:root%7Bcolor-scheme:light dark%7Drect%7Bfill:light-dark(green,purple)%7D%3C/style%3E%3Crect x='20' y='20' width='60' height='60' rx='8'/%3E%3C/svg%3E"
alt="Green to purple square"
style="width: 100px; height: 100px"
/>
</div>
<div class="what-you-see">
Light Mode: GREEN | Dark Mode: PURPLE
</div>
</div>
<div class="code">
SVG file content:<br />
&lt;svg viewBox="0 0 100 100"&gt;<br />
&nbsp;&nbsp;&lt;style&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;:root { color-scheme: light dark; }<br />
&nbsp;&nbsp;&nbsp;&nbsp;rect { fill: light-dark(green, purple);
}<br />
&nbsp;&nbsp;&lt;/style&gt;<br />
&nbsp;&nbsp;&lt;rect x="20" y="20" width="60" height="60"
/&gt;<br />
&lt;/svg&gt;
</div>
</div>
<!-- SECTION 3: MULTIPLE EXAMPLES -->
<div class="section">
<h2>3. More Color Transformations</h2>
<p>
Each uses light-dark() to switch between two contrasting colors.
</p>
<div class="grid-2">
<!-- Blue to Orange -->
<div class="example">
<h3>Blue → Orange</h3>
<div class="example-label">
fill: light-dark(blue, orange);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
fill="light-dark(blue, orange)"
cx="50"
cy="50"
r="40"
/>
</svg>
</div>
<div class="what-you-see">Light: BLUE | Dark: ORANGE</div>
</div>
<!-- Purple to Lime -->
<div class="example">
<h3>Purple → Lime</h3>
<div class="example-label">
fill: light-dark(purple, lime);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
fill="light-dark(purple, lime)"
cx="50"
cy="50"
r="40"
/>
</svg>
</div>
<div class="what-you-see">Light: PURPLE | Dark: LIME</div>
</div>
<!-- Dark Red to Bright Yellow -->
<div class="example">
<h3>Dark Red → Bright Yellow</h3>
<div class="example-label">
fill: light-dark(darkred, yellow);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<rect
fill="light-dark(darkred, yellow)"
x="20"
y="20"
width="60"
height="60"
rx="4"
/>
</svg>
</div>
<div class="what-you-see">
Light: DARK RED | Dark: YELLOW
</div>
</div>
<!-- Cyan to Magenta -->
<div class="example">
<h3>Cyan → Magenta</h3>
<div class="example-label">
fill: light-dark(cyan, magenta);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<rect
fill="light-dark(cyan, magenta)"
x="20"
y="20"
width="60"
height="60"
rx="4"
/>
</svg>
</div>
<div class="what-you-see">Light: CYAN | Dark: MAGENTA</div>
</div>
</div>
</div>
<!-- SECTION 4: PRACTICAL EXAMPLES -->
<div class="section">
<h2>4. Real-World Use Cases</h2>
<div class="grid-2">
<!-- Black text to white text -->
<div class="example">
<h3>Black Text → White Text</h3>
<div class="example-label">
fill: light-dark(black, white);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<text
fill="light-dark(black, white)"
style="
font-size: 50px;
font-weight: bold;
text-anchor: middle;
dominant-baseline: middle;
"
x="50"
y="50"
>
A
</text>
</svg>
</div>
<div class="what-you-see">
Light: BLACK text | Dark: WHITE text
</div>
</div>
<!-- White fill + black stroke to black fill + white stroke -->
<div class="example">
<h3>Inverted Colors</h3>
<div class="example-label">
fill: light-dark(white, black);<br />
stroke: light-dark(black, white);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
style="stroke-width: 3"
fill="light-dark(white, black)"
stroke="light-dark(black, white)"
cx="50"
cy="50"
r="40"
/>
</svg>
</div>
<div class="what-you-see">
Light: white fill + black border | Dark: black fill +
white border
</div>
</div>
</div>
</div>
<!-- SECTION 5: STROKE COLORS -->
<div class="section">
<h2>5. Stroke Colors (Not Just Fill)</h2>
<div class="grid-2">
<!-- Stroke only - blue to orange -->
<div class="example">
<h3>Stroke: Blue → Orange</h3>
<div class="example-label">
stroke: light-dark(blue, orange);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle
stroke="light-dark(blue, orange)"
style="fill: none; stroke-width: 4"
cx="50"
cy="50"
r="35"
/>
</svg>
</div>
<div class="what-you-see">
Light: BLUE outline | Dark: ORANGE outline
</div>
</div>
<!-- Multiple strokes - green to pink -->
<div class="example">
<h3>Stroke: Green → Pink</h3>
<div class="example-label">
stroke: light-dark(green, pink);
</div>
<div class="svg-container">
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<rect
stroke="light-dark(green, pink)"
style="fill: none; stroke-width: 4"
x="20"
y="20"
width="60"
height="60"
rx="4"
/>
</svg>
</div>
<div class="what-you-see">
Light: GREEN outline | Dark: PINK outline
</div>
</div>
</div>
</div>
<!-- SECTION 6: HOW TO USE -->
<div class="section">
<h2>6. Copy-Paste Recipe</h2>
<div class="example">
<h3>Step 1: HTML Head (Required)</h3>
<div class="code">
&lt;meta name="color-scheme" content="light dark" /&gt;<br />
&lt;style&gt;<br />
&nbsp;&nbsp;:root { color-scheme: light dark; }<br />
&lt;/style&gt;
</div>
<p>This tells the browser you support both themes.</p>
</div>
<div class="example">
<h3>Step 2: Inline SVG</h3>
<div class="code">
&lt;svg viewBox="0 0 100 100"&gt;<br />
&nbsp;&nbsp;&lt;style&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;:root { color-scheme: light dark;
}<br />
&nbsp;&nbsp;&nbsp;&nbsp;circle { fill: light-dark(RED_COLOR,
YELLOW_COLOR); }<br />
&nbsp;&nbsp;&lt;/style&gt;<br />
&nbsp;&nbsp;&lt;circle cx="50" cy="50" r="40" /&gt;<br />
&lt;/svg&gt;
</div>
<p>Replace RED_COLOR and YELLOW_COLOR with your colors.</p>
</div>
<div class="example">
<h3>Step 3: External SVG (In the SVG file)</h3>
<div class="code">
&lt;svg viewBox="0 0 100 100"&gt;<br />
&nbsp;&nbsp;&lt;style&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;:root { color-scheme: light dark;
}<br />
&nbsp;&nbsp;&nbsp;&nbsp;circle { fill: light-dark(RED_COLOR,
YELLOW_COLOR); }<br />
&nbsp;&nbsp;&lt;/style&gt;<br />
&nbsp;&nbsp;&lt;circle cx="50" cy="50" r="40" /&gt;<br />
&lt;/svg&gt;
</div>
<p>
The SVG file itself declares color-scheme. Load it with
&lt;img src="icon.svg"&gt; or as background-image.
</p>
</div>
</div>
<!-- SECTION 7: BROWSER SUPPORT -->
<div class="section">
<h2>7. Browser Support for light-dark()</h2>
<div class="info-box">
<strong>Supported:</strong> Chrome 123+, Firefox 120+, Safari
17.5+, Edge 123+<br />
<strong>Not supported:</strong> Older browsers will show only
the first color (light mode color)
</div>
<div class="example">
<h3>If Your Browser Doesn't Support light-dark()</h3>
<p>Add a fallback using @media query inside your SVG or CSS:</p>
<div class="code">
circle { fill: red; /* light mode default */ }<br />
@media (prefers-color-scheme: dark) {<br />
&nbsp;&nbsp;circle { fill: yellow; /* dark mode */ }<br />
}
</div>
<p>This way older browsers still get some dark mode support.</p>
</div>
</div>
<!-- SECTION 8: NO JAVASCRIPT -->
<div class="info-box">
<strong>Important:</strong> This page uses ONLY CSS - no JavaScript
manipulation of colors. The color changes are driven by: <br />1.
Your OS dark mode preference <br />2. Your browser's dark mode
setting (if you have one) <br />3. The CSS light-dark() function and
color-scheme property
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment