> ## Documentation Index
> Fetch the complete documentation index at: https://faq.exode.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# Themes

> Light and dark themes, the default theme for new visitors and the school's brand colors.

The theme defines how students see the school: in a light or a dark design. You decide which themes students can switch between, which one to show by default and what the brand colors are for each theme.

The settings are in **My school → Settings → Design and brand** (in a corporate school — **Company → Settings → Design and brand**), in the **Themes** block. All changes are saved automatically.

## Available themes

In the **Available themes** list, choose one of the options.

| Option | What the student sees |
| - | - |
| **Light and dark** | The student switches the theme themselves, for example with the **Dark theme** switch in the profile settings |
| **Dark only** | The website is always in the dark theme, there is no theme switch |
| **Light only** | The website is always in the light theme, there is no theme switch |

## Default theme

The **Default theme** field appears only if the **Light and dark** option is selected.

| Value | Behavior |
| - | - |
| **System theme** | The theme matches the student's device setting |
| **Dark theme** | New visitors see the dark theme |
| **Light theme** | New visitors see the light theme |

### How the platform chooses a theme for a student

1. If the student has already chosen a theme themselves and it is available in the school, their choice stays.
2. Otherwise, the default theme from the school settings applies.
3. If the default theme is not set, the device theme is used.

> [!NOTE]
>
> The default theme doesn't override a choice the student made themselves. If a student once turned on the light theme, they will keep seeing the light one, even if you set the dark one as the default. The choice is reset only if the student's theme has become unavailable in the school.

## Brand colors

Under the theme selection there is a list of three colors. Each color is set separately for the light and the dark theme.

| Color | What it affects | Default in the light theme | Default in the dark theme |
| - | - | - | - |
| **Accent color** | Icons and active interface elements | `#fa6c1c` | `#fa6c1c` |
| **Primary text color** | The main text in the interface | `#000000` | `#e1e3e6` |
| **Confirmation button color** | Buttons that confirm actions, for example creating and buying | `#4bb34b` | `#4bb34b` |

**1. Choose the theme you are setting up**

If both themes are available, there is a **Light / Dark** switch above the color list. It switches the theme of your own interface, and with it the set of colors you are editing. If only one theme is available, there is no switch, and you set up the colors of that theme.

**2. Set the color**

Click the color sample to the right of the name and choose a new value. The color is saved automatically in about half a second and applies to the interface right away.

**3. Restore the base color if needed**

If a color differs from the standard one, a reset button appears next to it. Click it and confirm the **Return to base color?** action.

> [!TIP]
>
> Check the colors in both themes. An accent that looks good on a light background may be hard to read on a dark one.

## Frequently asked questions

> **I set the dark theme as the default, but students see the light one. Why?**
>
> The default theme applies only to those who haven't chosen a theme themselves yet. If a student switched the theme before, their choice is kept. To make everyone see one theme, choose **Dark only** or **Light only** in the **Available themes** list.

> **How do I stop students from switching the theme?**
>
> Choose **Dark only** or **Light only**. The theme switch disappears from the interface.

> **I changed the accent color, but it's the same in the dark theme. Why?**
>
> Colors are set separately for each theme. Switch to the dark theme with the **Light / Dark** switch above the color list and set the color again.

> **Why did my own theme change after I set up the colors?**
>
> The **Light / Dark** switch in this block changes the theme of your interface so that you see the result right away. You can return to the theme you need with the same switch.

> **Can I change other colors, for example the background?**
>
> Only the three colors from the table above are available in the settings. Other colors are changed with custom CSS. Learn more in [Custom code](https://faq.exode.biz/en/general/developers/custom-code.md).

> **How does the theme affect the logo?**
>
> In the dark theme, the colors of the image logo are inverted. Learn more in [Logo and icon](https://faq.exode.biz/en/general/school-setup/logo-and-icon.md).

> **Does the accent color affect certificates?**
>
> Yes, if the course certificate settings don't have their own color, the school's accent color is used. Learn more in [Certificates](https://faq.exode.biz/en/general/gamification/certificates).

***

*Updated: 2026-10-15 18:08 UTC*


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.