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(js): case of theme variation flicker

Browse source 
The set of conditions that can cause a flicker in this case are `day_night: true` (allow visitor to change theme mode) with a dark theme (`light: false`) and a user device which prefers dark themes.

Fix #2080
This commit is contained in:
George Cushen 2021-01-05 18:54:28 +00:00
commit ccd2ab1ce2
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
wowchemy/assets/js/wowchemy-theming.js
View file

@ -23,14 +23,18 @@ function canChangeTheme() {
// flashing between the default theme mode and the user's choice. // flashing between the default theme mode and the user's choice.
function initThemeVariation() { function initThemeVariation() {
if (!canChangeTheme()) { if (!canChangeTheme()) {
console.debug('User theming disabled.');
return { return {
isDarkTheme: window.wc.isSiteThemeDark, isDarkTheme: window.wc.isSiteThemeDark,
themeMode: window.wc.isSiteThemeDark ? 1 : 0, themeMode: window.wc.isSiteThemeDark ? 1 : 0,
}; };
} }
let currentThemeMode = getThemeMode(); console.debug('User theming enabled.');
let isDarkTheme; let isDarkTheme;
let currentThemeMode = getThemeMode();
console.debug(`User's theme variation: ${currentThemeMode}`)
switch (currentThemeMode) { switch (currentThemeMode) {
case 0: case 0:
@ -44,7 +48,7 @@ function initThemeVariation() {
// The visitor prefers dark themes and switching to the dark variation is allowed by admin. // The visitor prefers dark themes and switching to the dark variation is allowed by admin.
isDarkTheme = true; isDarkTheme = true;
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) { } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
// The visitor prefers light themes and switching to the dark variation is allowed by admin. // The visitor prefers light themes and switching to the light variation is allowed by admin.
isDarkTheme = false; isDarkTheme = false;
} else { } else {
// Use the site's default theme variation based on `light` in the theme file. // Use the site's default theme variation based on `light` in the theme file.
@ -56,7 +60,7 @@ function initThemeVariation() {
if (isDarkTheme && !body.classList.contains('dark')) { if (isDarkTheme && !body.classList.contains('dark')) {
console.debug('Applying Wowchemy dark theme'); console.debug('Applying Wowchemy dark theme');
document.body.classList.add("dark"); document.body.classList.add("dark");
} else if (body.classList.contains('dark')) { } else if (!isDarkTheme && body.classList.contains('dark')) {
console.debug('Applying Wowchemy light theme'); console.debug('Applying Wowchemy light theme');
document.body.classList.remove("dark"); document.body.classList.remove("dark");
} }
@ -69,7 +73,7 @@ function initThemeVariation() {
function changeThemeModeClick(newMode) { function changeThemeModeClick(newMode) {
if (!canChangeTheme()) { if (!canChangeTheme()) {
console.info('Cannot set theme - admin disabled theme selector.'); console.debug('Cannot change theme - user theming disabled.');
return; return;
} }
let isDarkTheme; let isDarkTheme;
@ -77,12 +81,12 @@ function changeThemeModeClick(newMode) {
case 0: case 0:
localStorage.setItem('wcTheme', '0'); localStorage.setItem('wcTheme', '0');
isDarkTheme = false; isDarkTheme = false;
console.info('User changed theme variation to Light.'); console.debug('User changed theme variation to Light.');
break; break;
case 1: case 1:
localStorage.setItem('wcTheme', '1'); localStorage.setItem('wcTheme', '1');
isDarkTheme = true; isDarkTheme = true;
console.info('User changed theme variation to Dark.'); console.debug('User changed theme variation to Dark.');
break; break;
default: default:
localStorage.setItem('wcTheme', '2'); localStorage.setItem('wcTheme', '2');
@ -90,13 +94,13 @@ function changeThemeModeClick(newMode) {
// The visitor prefers dark themes and switching to the dark variation is allowed by admin. // The visitor prefers dark themes and switching to the dark variation is allowed by admin.
isDarkTheme = true; isDarkTheme = true;
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) { } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
// The visitor prefers light themes and switching to the dark variation is allowed by admin. // The visitor prefers light themes and switching to the light variation is allowed by admin.
isDarkTheme = false; isDarkTheme = false;
} else { } else {
// Use the site's default theme variation based on `light` in the theme file. // Use the site's default theme variation based on `light` in the theme file.
isDarkTheme = window.wc.isSiteThemeDark; isDarkTheme = window.wc.isSiteThemeDark;
} }
console.info('User changed theme variation to Auto.'); console.debug('User changed theme variation to Auto.');
break; break;
} }
renderThemeVariation(isDarkTheme, newMode); renderThemeVariation(isDarkTheme, newMode);