# Setting up light and dark mode color palettes

**URL:** https://meta.discourse.org/t/setting-up-light-and-dark-mode-color-palettes/376667
**Category:** Site Management
**Tags:** accessibility, how-to, customization
**Created:** [August 4, 2025, 7:29am UTC](https://meta.discourse.org/t/setting-up-light-and-dark-mode-color-palettes/376667 "2025-08-04T07:29:17Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [August 4, 2025, 7:29am UTC](https://meta.discourse.org/t/setting-up-light-and-dark-mode-color-palettes/376667/1 "2025-08-04T07:29:17Z")

</div>

> 🔖 This guide explains how to set up light and dark mode color palettes for your Discourse site’s theme. It covers per-theme configuration, palette assignment, and user interface considerations.
> 
> 🙋 Required user level: Administrator

Configuring distinct light and dark mode color palettes allows you to present your Discourse community in a way that aligns with your brand, improves accessibility, and gives your users control over their viewing experience. The recent improvements to Discourse’s theming system let you assign a preferred light and dark palette to each theme, and allow users to choose their desired appearance.

## Summary

This guide covers:

- Understanding light and dark mode palette assignments
- Assigning light and dark color palettes to a theme
- Managing your site’s color palettes
- Enabling the color mode selector for users
- Understanding user-facing options
- Best practices for palette use and accessibility

## Understanding light and dark mode palette assignments

Discourse themes support explicit assignment of both a “light” and a “dark” color palette. This way, any theme can automatically switch based on the user’s system setting, or let the user choose a preferred mode, while maintaining your preferred brand colors.

## Assigning light and dark palettes to a theme

To configure your theme’s color palettes:

1. **Go to Admin \> Appearance \> Themes & components (`/admin/config/customize/themes`)**

2. Click on the theme you want to edit.

3. In the theme settings, locate the **Color palettes** section.

4. For both **Color Palette** and **Dark Color Palette** , select the palette you want to use.

5. Click **Save** at the bottom of the theme settings page.

This ensures your site’s theme will use the correct palette for both light and dark mode users. Note that other user-selectable palettes can still be selected by your members, but the ones you set here will be the defaults.

## Managing your color palettes

All available color palettes (and their linked assignments) can be managed centrally:

1. Navigate to **Admin \> Appearance \> Color palettes (`/admin/config/colors`)**

2. Here you can **edit, add, or remove** palettes, mark them as user-selectable, and assign them to as your theme’s default light and dark palettes.

## Enabling the color mode selector

Before users can switch between light and dark mode on the site, you must enable the `interface_color_selector` site setting. By default this is set to **disabled**.

To enable it:

1. Go to **Admin \> Settings** and search for `interface color selector`.
2. Set it to one of the following:
  - **Display in sidebar footer** — adds a light/dark/auto toggle to the bottom of the sidebar
  - **Display in header** — adds the toggle to the site header

Without enabling this setting, users will not see a color mode toggle on the site and the site will follow each user’s system preference automatically.

## User-facing options

### User preferences

Users can choose their preferred mode for viewing the site:

1. Go to **User Preferences \> Interface**

2. In the “Color palette” section members can select their preferred light and dark palettes, as well as the mode they would like to use: **Light** , **Dark** , **Auto** :

If “Auto” is selected, Discourse will adapt to the user’s system color scheme preference.

* * *

## Best practices

- **Brand consistency:** Customize palettes to match your branding for both modes. Keep core colors consistent but adjust for contrast and readability.
- **Accessibility:** Ensure color contrast ratios meet WCAG guidelines ([this tool may help](https://accessibleweb.com/color-contrast-checker/)), especially in dark mode, where some colors may appear muted.
- **Test on multiple devices:** Check appearance in both modes, across devices and browsers.
- **Logo assets:** You can upload separate logos for light and dark modes in **Admin \> Appearance \> Site logo (`/admin/config/logo`)**.
- **Keep palette count manageable:** Offer only the palettes users need or feel will be reasonable.

## FAQs

**Can I have more than one dark or light palette?**  
Yes, but it’s recommended to keep one main palette for each to reduce confusion. Assign only the primary palettes to themes for user selection.

**Can I force everyone to use only light (or only dark) mode?**  
You can do this by setting the same palette as the default light and dark palettes, and ensuring that no other palettes are user-selectable.

**Will custom theme components automatically adjust colors?**  
If they use Discourse’s CSS color variables (e.g., `--primary`, `--secondary`), they will inherit the palette. It’s best to avoid hardcoded colors in custom CSS.

**Does palette switching change the whole theme, or just colors?**  
Only color variables change. Structure, fonts, and layout remain the same when changing color palettes.

## Additional resources

- [Improved dark and light mode handling 🎨](https://meta.discourse.org/t/improved-dark-and-light-mode-handling/376662)
- [A new way to manage colour palettes](https://meta.discourse.org/t/a-new-way-to-manage-colour-palettes/375188)
- [Allow users to select new color palettes](https://meta.discourse.org/t/allow-users-to-select-new-color-palettes/60857)
- [Making your forum more accessible](https://meta.discourse.org/t/making-your-forum-more-accessible/226242)
- [Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)