Dark Mode

This theme supports Dark mode and can be configured in in config.yml

# config.yml

darkmode:
  enable_dark_mode: true
  show_dark_mode_toggle_in_header: true 
  show_dark_mode_toggle_in_bottom: false # displays the dark mode toggle switch in the footer and allows the user to manually change the mode
  show_dark_mode_toggle_in_mobile_menu: false # displays the dark mode toggle switch in the footer and allows the user to manually change the mode

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.