FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use DarkReader.auto() to watch for system theme.

Browse source
This commit is contained in:
donfiguerres 2021-05-26 00:06:32 +08:00
parent c8f28d4287
commit d3a79e423c
1 changed files with 12 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

30
static/js/darkmode.js
View file

@ -14,24 +14,16 @@ function enableLightTheme() {
function useSystemTheme() { function useSystemTheme() {
localStorage.setItem('color-scheme', "system"); localStorage.setItem('color-scheme', "system");
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { DarkReader.auto({
enableDarkTheme(); brightness: 100,
} else { contrast: 90,
enableLightTheme(); sepia: 10
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (e.matches) {
enableDarkTheme();
} else {
enableLightTheme();
}
}); });
} }
// Initialize. Use dark as default.
function initializeColorScheme() { function initializeColorScheme() {
// We're using the themeSelector attributes as a workaround for setting up // We're using the themeSelector attributes as a 'hack' for setting up the
// the default coor scheme since we don't want to complicate this further by // default color scheme becauase we don't want to complicate this further by
// creating custom javascript output in Hugo. // creating custom javascript output in Hugo.
themeSelector = document.getElementById("themeSelector"); themeSelector = document.getElementById("themeSelector");
defaultColorScheme = themeSelector.getAttribute('default-theme'); defaultColorScheme = themeSelector.getAttribute('default-theme');
@ -41,13 +33,15 @@ function initializeColorScheme() {
if (!localStorage.getItem('color-scheme')) if (!localStorage.getItem('color-scheme'))
localStorage.setItem('color-scheme', defaultColorScheme); localStorage.setItem('color-scheme', defaultColorScheme);
storedColorScheme = localStorage.getItem('color-scheme'); storedColorScheme = localStorage.getItem('color-scheme');
if (storedColorScheme == "light") { if (storedColorScheme == "dark") {
enableLightTheme(); enableDarkTheme();
} else if (storedColorScheme == "system") { } else if (storedColorScheme == "system") {
useSystemTheme(); useSystemTheme();
} else { } else {
// Use dark theme as fallback since it is my default. // We use light theme for the two conditions below.
enableDarkTheme(); // 1. the selected theme is light
// 2. no default theme is found - fall back to original behavior
enableLightTheme();
} }
} }
initializeColorScheme() initializeColorScheme()