How to Make SVG Work in Dark Mode — CSS & prefers-color-scheme
Adapt SVG icons and illustrations to dark mode using CSS media queries, currentColor, and custom properties — no duplicate files needed.
Drop your image here
Supports PNG, JPG, WEBP up to 5MB
Dark Mode SVG with prefers-color-scheme
Inline SVG and SVG loaded via `<object>` or `<use>` can detect the user's color scheme preference using `@media (prefers-color-scheme: dark)` in embedded `<style>` blocks.
- Add <style> inside inline SVG with @media prefers-color-scheme
- Use currentColor to inherit parent element color
- Define color with CSS custom properties for easy theming
Dark Mode for SVG in <img> Tags
SVG inside `<img>` does not respond to external CSS or media queries. Use the HTML `<picture>` element with a media attribute to swap between light and dark SVG files automatically.
- <picture> with media='(prefers-color-scheme: dark)' source
- Maintain a separate dark variant SVG file
- Or use inline SVG which does respond to page CSS
Frequently Asked Questions
Can an SVG in an <img> tag respond to dark mode?
Not via CSS — use <picture> element with a media query to swap SVG files, or switch to inline SVG which inherits page CSS.
How do I use currentColor in SVG for dark mode?
Set fill='currentColor' on SVG paths; the SVG inherits the parent element's CSS color property, which changes with your dark mode CSS.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in seconds.
Try It Free — Convert Image to SVG