SVG Dark Mode Tool
Adapt SVG colors for dark mode — replace with currentColor or invert all values. Preview on both light and dark backgrounds. Runs entirely in your browser.
To currentColor
The currentColor keyword makes an SVG element inherit its color from the CSS color property on the nearest ancestor. This is the standard pattern for theme-able icon sets: set one CSS rule and the icon adapts — whether in a light or dark context, or with any accent color. Values of none and transparent are preserved so transparent fills and invisible strokes stay as intended.
Invert colors
Color inversion subtracts each channel from 255: a red of 200 becomes 55, a white (#ffffff) becomes black (#000000). It works on all recognizable color values — named colors, hex, and RGB — in fill, stroke, stop-color, and inline style attributes. Useful for illustrations and logos where you want a true color flip rather than a single inherited color.
Frequently Asked Questions
What does "To currentColor" do?+
It replaces every fill and stroke value (except none and transparent) with the CSS keyword currentColor. This makes the SVG inherit its color from the surrounding CSS color property, so you can control the icon color in one place — or make it automatically switch between light and dark mode with a single CSS rule.
What does "Invert colors" do?+
It inverts each color channel: red becomes 255 − red, green becomes 255 − green, blue becomes 255 − blue. A light fill like #ffffff becomes #000000 and vice versa. Colors in fill, stroke, stop-color, and inline style attributes are all transformed.
Which mode should I use for icon sets?+
Use "To currentColor" for icon sets — it is the standard pattern for theme-able SVG icons. Set the icon color in CSS and it adapts automatically. Invert is better for illustrations or logos where you want the actual colors flipped rather than replaced.
Does this modify path data or shapes?+
No. Only color values in fill, stroke, stop-color, color, flood-color, lighting-color, and equivalent inline style properties are changed. Path coordinates, dimensions, viewBox, and all structural attributes are preserved exactly.
Is my SVG sent to a server?+
No. Both transformations run entirely in your browser using the DOM API. Your SVG markup never leaves your device.
Related Tools
How to use
- Paste your SVG markup — the transformed output appears instantly.
- To currentColor — replaces all colors with
currentColorso the SVG inherits its color from CSS. - Invert colors — flips each color channel so light colors become dark and vice versa.
- Check the side-by-side preview on light and dark backgrounds.