Dark mode is enabled by default. Dark mode can be disabled in data/layout.yaml
# data/layout.yaml
disableDarkMode: true
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.
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.
The colors used by dark mode are defined in data/themes.json
// data/themes.json
{
...
"darkMode": {
"colors": {
"base": "#121212",
"base_offset": "#1e1e1e",
"base_text": "#ffffff",
"base_text_offset": "#bfbfbf",
"primary": "#6a2bf7",
"primary_offset": "#521ec5",
"primary_text": "#ffffff",
"primary_text_offset": "#e8ffff"
}
}
}
These colors override the colors of the themes above. Learn more about themeing
Designed and built by Rob Austin @ausrobdev in Brisbane, Australia. We stand on the shoulders of giants: Hugo | Jekyll