Toggling Dark mode

🔄 How to Mode Swap

Switching between light and dark mode is as easy as flipping a switch (literally or programmatically). Here’s how:

In Figma:

• Open a file that uses variables or components from the design system

• Use the Mode menu (top-right of the Variables panel)

• Toggle between Light and Dark to preview or build in your preferred theme

• Variables will automatically resolve based on the selected mode

In Code:

• Use the system’s theme provider or class toggle (e.g., theme="dark" or class="dark")

• Variables and tokens will adapt automatically based on the selected theme

• Works seamlessly with CSS custom properties, Tailwind, or your design token system

♿️ Dark Mode is Accessible by Default

We’ve ensured our dark mode:

• Meets contrast ratios across text, icons, and surfaces

• Uses consistent theming logic across all components

• Doesn’t rely on color alone for meaning or feedback

• Follows WCAG guidelines for both light and dark experiences

No hacks. No overrides. Just clean, scalable theming that keeps your product looking good (and usable) in any light.