How to Preview an Icon in Dark Mode and Light Mode Together

You just designed a beautiful navigation icon. It looks crisp, sharp, and perfectly balanced on your clean white canvas.

Then a user switches your app to dark mode, and your icon completely vanishes into the background, or its fine lines turn into a muddy, unreadable blob.

The old way to check for this? Toggle your Figma viewport theme, flip your macOS system preference back and forth, or manually change background CSS variables in local dev tools. It's tedious, slow, and makes it impossible to compare stroke weight adjustments in real time.

There is a better way.

Why single-theme icon previewing fails your design

Most design tools and asset viewers force you to look at your graphics on a single background color at a time. When building responsive interfaces that support multiple themes, this isolated approach introduces subtle layout issues:

• The Disappearing Asset — Pure black icons lack fallback fills, making them invisible on dark gray backgrounds.
• Stroke Weight Distortion — Light lines on a dark background naturally appear thicker to the human eye than dark lines on a light background (an optical illusion called irradiation).
• Opacity Inconsistencies — Secondary icons utilizing 50% opacity can lose all semantic meaning depending on the background contrast ratio underneath them.
• Color Shifts — Brand colors that pop on white often look violently oversaturated or completely washed out against dark surfaces.

To guarantee an icon works everywhere, you need to see it side-by-side on true light and true dark backgrounds simultaneously.

What a dual-theme preview workflow looks like

An efficient icon testing workflow should achieve three goals:

1. Render side-by-side instantly — Display the asset on light (#FFFFFF) and dark (#0F172A) containers on a single screen.
2. Support direct code pasting — Allow inline SVG or JSX icon string injection without requiring file uploads.
3. Expose edge-handling bugs — Show hardcoded color properties (stroke="#000") that prevent proper theme inheritance.

Here is how to do exactly that using Shufaf.

Step-by-step: Testing icons simultaneously with Shufaf

Step 1 — Open the Component Studio

Navigate to Shufaf Studio. In the primary tool navigation bar, select Icon Sandbox mode. The interface will split into a code/upload panel on the left and a dual viewport container on the right:

[ Code Input ] ──> [ Light Preview Area ] [ Dark Preview Area ]

Step 2 — Load your icon asset

You have two simple options to import your asset into the dual-pane simulator:

• The Drag-and-Drop Method: Drop your raw .svg file directly into the dropzone.
• The Code Paste Method: Copy your raw SVG or React JSX code directly from your editor (or Figma's Copy as SVG) and paste it straight into the live code window.

Step 3 — Inspect the side-by-side render

The moment your asset is received, Shufaf duplicates the render tree across both environments instantly.

┌───────────────────────────────┐  ┌───────────────────────────────┐
│          LIGHT MODE           │  │           DARK MODE           │
│                               │  │                               │
│             ( ☼ )             │  │             ( ☾ )             │
│                               │  │                               │
└───────────────────────────────┘  └───────────────────────────────┘

Take a close look at the stroke balances. If the icon looks perfect on the left but disappears or looks awkwardly thick on the right, you need to alter how your asset handles color properties.

Step 4 — Switch to Dynamic currentColor

If your icon disappears on one of the backgrounds, look at the code input panel on the left. You will likely see hardcoded hex values deep inside the SVG tags:

<svg stroke="#000000" fill="#111111" ...>
 

To fix this so your system handles dark and light mode dynamically, replace those hardcoded values with currentColor.

<svg stroke="currentColor" fill="currentColor" ...>
 

The moment you update the attributes in the code window, the preview panes refresh dynamically. The light preview container feeds the icon a dark gray text value, while the dark preview container automatically applies a crisp white text value.

Common use cases for dual-theme testing

Figma-to-Code Design Handoffs Before writing component code, a developer can paste the designer's SVG export into the sandbox to ensure that no hidden, fixed fills were left inside the vectors that might break dark theme rendering.

Stroke Weight Calibration Because white lines bleed into dark backgrounds, icons can look bloated at night. Testing them side-by-side lets you find a middle-ground stroke weight (e.g., strokeWidth={1.75} instead of 2) that reads perfectly across both lighting environments.

Multi-Brand Logotype Audits Upload secondary company logos to verify if their corporate guidelines remain legible when placed onto contrasting backgrounds without requiring an inversion badge wrapper.

Limitations worth knowing

• Complex Multi-color Gradients — If your icon contains strict multi-color brand gradients, currentColor will override them all into a single solid color. For complex multi-color SVGs, utilize theme-specific class utilities instead.
• External CSS Dependencies — The sandbox executes native inline SVG styles and standard Tailwind configuration classes. If your icon depends on complex external stylesheets, those styles may not evaluate inside the sandbox frame.

Technical Comparison: Testing methods at a glance

Try it now

You don't need to configure theme contexts or build toggle structures to check your assets. Drop your icon code straight into the visualizer to inspect how it adapts across both lighting layouts immediately.

→ Try Shufaf Studio

Related guides

• How to mock up an asset inside a React card grid layout
• How to optimize vector paths for production web use
• Understanding the currentColor property in inline SVGs