SVG Dark Mode Theming: Adaptive Icons with CSS

A practical guide on svg dark mode theming — when, why, and how.

SVG can adapt to light and dark mode using CSS media queries — a powerful feature for icons and graphics that need to look good in both themes.

How It Works

Embed a <style> block inside your SVG that uses @media (prefers-color-scheme: dark) to change colors. When the user's OS or browser switches to dark mode, the SVG automatically adapts.

The currentColor Approach

A simpler method: set fill="currentColor" in your SVG. The icon inherits the text color from its parent CSS. When your site's dark mode changes text color, the icon follows automatically.

SVG Favicon Dark Mode

SVG favicons uniquely support dark mode. Your favicon can switch from a dark logo on light background to a light logo on dark background when the user enables dark mode — no JavaScript needed.

Getting Started

Convert your PNG icons to SVG, then add fill="currentColor" for automatic theme adaptation, or embed CSS media queries for more complex color changes.