If your template includes a dark mode, it uses Framer's variable system to switch color values based on the active theme. Here's how to understand and customize dark mode colors.

How Dark Mode Works in Framer

Framer supports a concept called Variable Modes. A color variable like "Background/Page" can have two values: one for Light mode and one for Dark mode. When the user (or your site) switches mode, all variables update simultaneously.

Editing Dark Mode Colors

1. Go to Assets → Colors.

2. Look for a mode switcher at the top of the colors list — you may see "Light" and "Dark" tabs.

3. Switch to the Dark tab.

4. Double-click any color swatch to edit its dark mode value.

5. Your changes only affect the dark mode appearance.

💡 Tip: Keep your dark mode backgrounds in the very dark range (e.g., #0d0d0d to #1e1e1e) and ensure text colors have enough contrast. Aim for a contrast ratio of at least 4.5:1 for accessibility.

Previewing Dark Mode

Click Preview in the top toolbar. In the preview, look for a theme toggle (if your template includes one) or change your system preferences to dark mode — the preview should respond automatically.