Dark Mode Sync takes the manual work out of dark mode design.
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.
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.
Changed your mind? One click removes all dark values from every Color Style.
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.
Fixed plugin icon path in framer.json — changed ./public/icon.svg to ./icon.svg for production compatibility.