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, BMP, 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 under 3 seconds.
Try It Free — Convert Image to SVG