How to implementing dark mode for svg icons using css custom properties
- Step 1Inject CSS variables into your SVGs — Use the JAD CSS Variable Injector to replace hardcoded colors with CSS custom properties: fill: var(--icon-color, #1a1a2e). The fallback ensures it works even without the variable defined.
- Step 2Define light and dark theme values — In your CSS: :root { --icon-color: #1a1a2e; } and @media (prefers-color-scheme: dark) { :root { --icon-color: #f0f0f0; } }. Icons switch automatically with the system theme.
- Step 3Add manual toggle support — For a user-controlled toggle: [data-theme='dark'] { --icon-color: #f0f0f0; }. Apply data-theme='dark' to the html element via JavaScript. Icons respond immediately.
Frequently asked questions
Do SVG CSS variables work with Tailwind's dark mode?+
Yes. Tailwind's dark mode (class strategy) adds a .dark class to html. Add .dark { --icon-color: #f0f0f0; } to your CSS. Tailwind and CSS variable dark mode work in parallel.
Can I have more than two theme variants?+
Yes. Define as many theme attribute values as needed: [data-theme='ocean'] { --icon-color: #0077b6; }, [data-theme='forest'] { --icon-color: #2d6a4f; }. Each theme maps to its own variable values.
What if some icons should NOT change color in dark mode?+
Leave those icons with hardcoded hex values. Only inject CSS variables into icons that should participate in theming. The injector lets you choose which colors to parameterise.
Does this approach work in React with CSS Modules?+
Yes. Define the CSS variables in a global CSS file (not scoped with CSS Modules). Global CSS variables cascade to inline SVGs regardless of the component's CSS Module scope.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.