Dark Mode Sync

Dark Mode Sync takes the manual work out of dark mode design.

How it works

Open the plugin and it instantly scans all Color Styles in your project. Choose an algorithm, preview the generated dark colors, then click Apply — your Color Styles are updated with dark mode values automatically.

Algorithms

Invert — Pure lightness mirror. Fast and predictable.

Gentle — Inverts lightness and reduces saturation slightly. The safest choice for most projects. Used by Apple, Linear, and Vercel.

Elevated — Inspired by Material Design 3. Light surfaces become dark gray, dark colors become light. Creates natural depth and hierarchy.

Expressive — Shifts hue slightly cool with reduced saturation. That characteristic premium dark mode feel used by Figma and Notion.

Remove dark mode

Changed your mind? One click removes all dark values from every Color Style.

Requirements

Your elements must be linked to a Color Style to update in dark mode. The plugin will notify you if any elements have colors assigned directly.