Hugo Advance Docs

Dark Mode

Dark mode is enabled by default. Dark mode can be disabled in config.toml

# config.toml

[params]
    enable_dark_mode = true

Automatic Dark Mode

Darkmode detects the users OS dark mode preferences automatically. We use prefers-color-scheme (Mozilla Docs - prefers color scheme) to achieve this.

Try changing your dark mode preference in OSX.

Mac OSX Dark mode settings

Dark Mode logic

If a user specifically toggles to dark or light mode this preference will be remembered and will override the system preference. This setting is stored in the users sessionStorage (Mozilla Docs - sessionStorage) which means the preference is remembered across pages and page reloads, until the user closes their browser or clears their cache.

Dark Mode colors

The colors used by dark mode are defined in config.toml under params.colors.dark

# config.toml
[params]
    ...
    [params.colors]
        [params.colors.light]
            ...
        [params.colors.dark]
            base = "#121212"
            base_offset = "#1e1e1e"
            base_text = "#ffffff"
            base_text_offset = "#d7d7d7"
            alt = "#1e1e1e"
            alt_offset = "#2f2f2f"
            alt_text = "#fafafa"
            alt_text_offset = "#a8a4a4"
            primary = "#2b5df7"
            primary_offset = "#a62bf7"
            primary_text = "#eeebfc"
            primary_text_offset = "#a7a7a7"