In Theme > Light and dark mode: | Option | What it does | |--------|--------------| | Course mode | Which mode the learner sees: Light (the usual one, and the one every theme starts with), Dark or System, which follows the light or dark setting of their device and changes live if that setting changes | | Mode switch in the player | Adds a button with a sun or moon icon to the player to switch between light and dark. The choice is remembered in the learner's browser, course by course, and takes precedence over the system mode | While the mode is Light and the switch is off, the player doesn't change at all. With the Dark mode and no switch, the course is "dark only".

The Mode shown selector (Light / Dark) in the theme editor's header says which mode you are editing and which one the preview shows. In Dark, the editor tells you that you are editing dark mode, and whatever you change only applies in dark. Every field on every tab says Same as light or Own dark value. If it has its own value, you can return it to light with Back to same as light. Every section has Whole section same as light and counts how many of its fields have their own dark value. Palette colors can be fine-tuned in dark, but the variant never adds or removes palette colors. In the content editor, the same selector (Light / Dark) appears when the theme has modes or already has a dark variant. It only changes how you see the lesson while you edit; it doesn't change the theme.

Light and Dark Mode — Creator

Q: Generate the dark variant

Generate dark variant creates a starting point. It inverts the background and the text, moves each palette color the theme uses to its lightness-inverted counterpart (except image overlays and whatever sits on a color fill, such as buttons) and checks the contrast. When it finishes, the editor switches to Dark so you can fine-tune it, and a Contrast in dark mode notice says whether everything reaches the minimum contrast (4.5:1 for text and 3:1 for everything else) or which fields fall short and by how much. If the theme already has a dark variant, you are asked to confirm first: the new variant replaces the previous one and whatever you fine-tuned in dark is lost.

Q: Custom CSS and dark mode

Custom CSS has no dark variant: whatever you write applies in both modes. For anything that should only show in dark, use the [data-color-scheme="dark"] selector: The player sets data-color-scheme ("light" or "dark", the mode being shown) on its root when the theme has modes: when the mode isn't Light or the switch is on. Without modes, the attribute isn't there.

Q: Accessibility

The Checks panel measures contrast in both modes; whatever only fails in dark carries the In dark mode tag. With a "dark only" theme (Dark mode and no switch), only dark is measured and its problems are the main ones. See Accessibility Checker.

One theme, two modes

A content still uses a single theme. What you configure as usual is the light mode; the dark mode is a variant of the same theme that stores only what changes in dark, in any field: colors, theme images (such as the cover logo or the lesson header image), shadows, borders… Whatever the variant doesn't say, it takes from the light mode, so a change in light also reaches dark as long as that field has no value of its own in dark.

If the theme has no dark variant, dark looks the same as light.

Choose the mode

In Theme > Light and dark mode:

Option	What it does
Course mode	Which mode the learner sees: Light (the usual one, and the one every theme starts with), Dark or System, which follows the light or dark setting of their device and changes live if that setting changes
Mode switch in the player	Adds a button with a sun or moon icon to the player to switch between light and dark. The choice is remembered in the learner's browser, course by course, and takes precedence over the system mode

While the mode is Light and the switch is off, the player doesn't change at all. With the Dark mode and no switch, the course is "dark only".

Generate the dark variant

Generate dark variant creates a starting point. It inverts the background and the text, moves each palette color the theme uses to its lightness-inverted counterpart (except image overlays and whatever sits on a color fill, such as buttons) and checks the contrast.

When it finishes, the editor switches to Dark so you can fine-tune it, and a Contrast in dark mode notice says whether everything reaches the minimum contrast (4.5:1 for text and 3:1 for everything else) or which fields fall short and by how much.

If the theme already has a dark variant, you are asked to confirm first: the new variant replaces the previous one and whatever you fine-tuned in dark is lost.

Edit the dark mode

The Mode shown selector (Light / Dark) in the theme editor's header says which mode you are editing and which one the preview shows. In Dark, the editor tells you that you are editing dark mode, and whatever you change only applies in dark.

Every field on every tab says Same as light or Own dark value. If it has its own value, you can return it to light with Back to same as light.
Every section has Whole section same as light and counts how many of its fields have their own dark value.
Palette colors can be fine-tuned in dark, but the variant never adds or removes palette colors.
In the content editor, the same selector (Light / Dark) appears when the theme has modes or already has a dark variant. It only changes how you see the lesson while you edit; it doesn't change the theme.

Custom CSS and dark mode

Custom CSS has no dark variant: whatever you write applies in both modes. For anything that should only show in dark, use the [data-color-scheme="dark"] selector:

[data-color-scheme="dark"] .my-class {
  box-shadow: none;
}

The player sets data-color-scheme ("light" or "dark", the mode being shown) on its root when the theme has modes: when the mode isn't Light or the switch is on. Without modes, the attribute isn't there.

Where it shows

The mode applies the same way in the preview, in the share link and in the web and SCORM exports. The native video and audio controls also follow the mode being shown.

The PDF is always light.

Accessibility

The Checks panel measures contrast in both modes; whatever only fails in dark carries the In dark mode tag. With a "dark only" theme (Dark mode and no switch), only dark is measured and its problems are the main ones. See Accessibility Checker.

Export and import

"Light and dark mode" is one of the sections when you export and import a theme: it carries the course mode and the switch. The dark variant has no checkbox of its own: it travels with every section you tick.