michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-26 03:00:50 +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.
function initThemeVariation() {
if (!canChangeTheme()) {
console.debug('User theming disabled.');
return {
isDarkTheme: window.wc.isSiteThemeDark,
themeMode: window.wc.isSiteThemeDark ? 1 : 0,
};
}
let currentThemeMode = getThemeMode();
console.debug('User theming enabled.');
let isDarkTheme;
let currentThemeMode = getThemeMode();
console.debug(`User's theme variation: ${currentThemeMode}`)
switch (currentThemeMode) {
case 0:
@ -44,7 +48,7 @@ function initThemeVariation() {
// 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.
// The visitor prefers light themes and switching to the light variation is allowed by admin.
isDarkTheme = false;
} else {
// 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')) {
console.debug('Applying Wowchemy dark theme');
document.body.classList.add("dark");
} else if (body.classList.contains('dark')) {
} else if (!isDarkTheme && body.classList.contains('dark')) {
console.debug('Applying Wowchemy light theme');
document.body.classList.remove("dark");
}
@ -69,7 +73,7 @@ function initThemeVariation() {
function changeThemeModeClick(newMode) {
if (!canChangeTheme()) {
console.info('Cannot set theme - admin disabled theme selector.');
console.debug('Cannot change theme - user theming disabled.');
return;
}
let isDarkTheme;
@ -77,12 +81,12 @@ function changeThemeModeClick(newMode) {
case 0:
localStorage.setItem('wcTheme', '0');
isDarkTheme = false;
console.info('User changed theme variation to Light.');
console.debug('User changed theme variation to Light.');
break;
case 1:
localStorage.setItem('wcTheme', '1');
isDarkTheme = true;
console.info('User changed theme variation to Dark.');
console.debug('User changed theme variation to Dark.');
break;
default:
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.
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.
// The visitor prefers light themes and switching to the light variation is allowed by admin.
isDarkTheme = false;
} else {
// Use the site's default theme variation based on `light` in the theme file.
isDarkTheme = window.wc.isSiteThemeDark;
}
console.info('User changed theme variation to Auto.');
console.debug('User changed theme variation to Auto.');
break;
}
renderThemeVariation(isDarkTheme, newMode);