alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

🐛 fix: remove flash when navigating in dark-mode

Browse Source 
The `initialize-theme.js` script takes care of the following:

  1. If there is a stored theme value in the localStorage, set the theme
 based on that value.
  2. If there is no stored theme value, check the  user's system
  preference (dark or light) and set the theme accordingly.

The new `main.js` takes care of the actual theme switching and listening
to system preference changes (if the user has not manually set a theme).

Now the icons are stored in CSS, and are set according to the current
theme. This allows for having different icons that dynamically switch.

Additionally, wraps social and navigation elements in ul/li.

Fixes #76
This commit is contained in:
welpo
2023-04-28 16:20:42 +02:00
parent eb63718bbf
commit 1efb0330e3
15 changed files with 64 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/js/initialize_theme.js Normal file
View File

@@ -0,0 +1,9 @@
(function () {
let currentTheme = localStorage.getItem('theme');
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
} else {
const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', isSystemDark ? 'dark' : 'light');
}
})();

1
static/js/initialize_theme_min.js Normal file
View File

@@ -0,0 +1 @@
!function(){let e=localStorage.getItem("theme");if(e)document.documentElement.setAttribute("data-theme",e);else{let t=window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.setAttribute("data-theme",t?"dark":"light")}}();

16
static/js/main.js
View File

@@ -1,28 +1,20 @@
const themeSwitcher = document.querySelector('.theme-switcher input');
const themeSwitcher = document.querySelector('.theme-switcher');
let currentTheme = localStorage.getItem('theme');
let userHasManuallyChangedTheme = currentTheme !== null;
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
themeSwitcher.checked = theme === 'dark';
localStorage.setItem('theme', theme);
currentTheme = theme;
}
if (currentTheme) {
setTheme(currentTheme);
} else {
const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
setTheme(isSystemDark ? 'dark' : 'light');
}
function switchTheme(e) {
const newTheme = e.target.checked ? 'dark' : 'light';
function switchTheme() {
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
userHasManuallyChangedTheme = true;
}
themeSwitcher.addEventListener('change', switchTheme, false);
themeSwitcher.addEventListener('click', switchTheme, false);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!userHasManuallyChangedTheme) {

1
static/js/main_min.js Normal file
View File

@@ -0,0 +1 @@
const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme"),userHasManuallyChangedTheme=null!==currentTheme;function setTheme(e){document.documentElement.setAttribute("data-theme",e),localStorage.setItem("theme",e),currentTheme=e}function switchTheme(){let e="dark"===currentTheme?"light":"dark";setTheme(e),userHasManuallyChangedTheme=!0}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{userHasManuallyChangedTheme||setTheme(e.matches?"dark":"light")});