Dark Mode Settings

Dark Mode Settings

Nuvi themes support a built-in dark mode that automatically adapts your store's appearance for visitors who prefer darker interfaces. This guide explains how to configure and test it.

How Dark Mode Works

Every Nuvi theme stores two color palettes: colors for light mode and colorsDark for dark mode. When a visitor's device or browser is set to "dark mode" (via the prefers-color-scheme: dark media query), the storefront automatically switches to the dark palette. The colors you can customize include:

• Primary — Your brand's main accent color (buttons, links, highlights).
• Secondary — Supporting accent for badges, tags, and secondary actions.
• Background — The page background color (typically a dark gray like #121212).
• Surface — Card and container backgrounds (slightly lighter than the page background).
• Text — Primary text color (typically white or light gray).
• Muted — Subdued text for captions and secondary information.

Configuring Dark Mode Colors

To customize your dark mode palette:

1. Go to Settings > Themes > Customize in the admin panel.
2. Look for the "Dark Mode Colors" section below the standard color pickers.
3. Adjust each color using the color picker or enter hex values directly.
4. Click "Save" to apply your changes.

If you do not customize dark mode colors, Nuvi generates sensible defaults by inverting and adjusting your light mode palette.

Enabling and Disabling Dark Mode

Dark mode is enabled by default on all themes. To disable it entirely:

1. Navigate to Settings > Themes > Customize.
2. Find the "Enable Dark Mode" toggle.
3. Switch it off and save.

When disabled, all visitors see the light mode palette regardless of their system preferences.

Testing Dark Mode

You can test dark mode without changing your system settings:

• Chrome DevTools — Press F12, click the three-dot menu, select More Tools > Rendering, and set "Emulate CSS media feature prefers-color-scheme" to dark.
• Firefox — Type about:config in the address bar, search for ui.systemUsesDarkTheme, and set it to 1.
• AI Assistant — Ask the AI "Show me my dark mode colors" to review the current palette.

Always check that text has sufficient contrast against dark backgrounds. The WCAG recommends a minimum contrast ratio of 4.5:1 for normal text.