michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-26 19:15:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix: page flickers when user's dark/light pref differs to theme's default

Browse source 
Add check that admin enabled Light/Dark chooser (Params.day_night).

Fix eb8748ff17
Fix #1601
This commit is contained in:
George Cushen 2020-08-25 22:02:38 +01:00
commit 70cbc5b90a
2 changed files with 48 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

74
assets/js/load-theme.js
View file

@ -1,31 +1,47 @@
function getThemeMode() {
return parseInt(localStorage.getItem('dark_mode') || 2);
}
(function () {
function getThemeMode() {
return parseInt(localStorage.getItem('dark_mode') || 2);
}
let currentThemeMode = getThemeMode();
let isDarkTheme;
switch (currentThemeMode) {
case 0:
isDarkTheme = false;
break;
case 1:
isDarkTheme = true;
break;
default:
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
// The visitor prefers dark themes and switching to the dark variation is allowed by admin.
isDarkTheme = true;
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
// The visitor prefers light themes and switching to the dark variation is allowed by admin.
isDarkTheme = false;
} else {
// Use the site's default theme variation based on `light` in the theme file.
isDarkTheme = isSiteThemeDark;
function canChangeTheme() {
// If var is set, then user is allowed to change the theme variation.
return Boolean(window.staDarkLightChooser);
}
function initThemeVariation() {
if (!canChangeTheme) {
return;
}
break;
}
if (isDarkTheme) {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
let currentThemeMode = getThemeMode();
let isDarkTheme;
switch (currentThemeMode) {
case 0:
isDarkTheme = false;
break;
case 1:
isDarkTheme = true;
break;
default:
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
// The visitor prefers dark themes and switching to the dark variation is allowed by admin.
isDarkTheme = true;
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
// The visitor prefers light themes and switching to the dark variation is allowed by admin.
isDarkTheme = false;
} else {
// Use the site's default theme variation based on `light` in the theme file.
isDarkTheme = isSiteThemeDark;
}
break;
}
if (isDarkTheme) {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
}
// Initialize theme variation.
initThemeVariation();
})();

3
layouts/_default/baseof.html
View file

@ -10,6 +10,9 @@
{{/* Load day/night theme. */}}
{{/* Initialise default theme. */}}
{{ if site.Params.day_night }}
<script>window.staDarkLightChooser = true;</script>
{{ end }}
{{ if eq (.Scratch.Get "light") true }}
<script>const isSiteThemeDark = false;</script>
{{ else }}