Dark Mode

Flex provides a light (default) and dark theme. Optionally, Flex can automatically detect the color theme preference set by the user's browser/OS and can allow the user to switch the theme manually.

Configuration Overview

• THEME_COLOR (either "light" (default) or "dark"): the default theme to use when the user/browser/OS does not override it.
• THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE (bool): set to True if you want Flex to auto-detect the user's browser/OS color scheme preference and use the appropriate theme.
• THEME_COLOR_ENABLE_USER_OVERRIDE (bool): set to True if you want Flex to provide links in the footer of the page for the user to override the theme.
• PYGMENTS_STYLE_DARK (str, fallback to PYGMENTS_STYLE or monokai): select a Pygments style to use in dark mode.

Example Configuration

This config will make Flex use the dark theme by default, but will respect the browser/OS color scheme preference, and allow the user to override the theme. It will also use the emacs Pygments theme in light mode, but the monokai theme in dark mode.

THEME_COLOR = 'dark'
THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE = True
THEME_COLOR_ENABLE_USER_OVERRIDE = True

PYGMENTS_STYLE = 'emacs'
PYGMENTS_STYLE_DARK = 'monokai'

Browser Support

• The THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE setting relies on the prefers-color-scheme media query. The latest releases of all major browsers except for Internet Explorer this (Can I use).
• JavaScript is not required for the THEME_COLOR, THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE, and PYGMENTS_STYLE settings to work. (Only the media query is used.)
• JavaScript is required for the THEME_COLOR_ENABLE_USER_OVERRIDE to work.

See also

How to change the default theme's colors