🐛 fix: remove flash when navigating in dark-mode

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

static/js/initialize_theme.js

@@ -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');
+    }
+})();

static/js/initialize_theme_min.js

@@ -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")}}();

static/js/main.js

@@ -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) {

static/js/main_min.js

@@ -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")});

static/menu_icon/moon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"/>
-</svg>

static/menu_icon/sun.svg

@@ -1 +0,0 @@
-<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 17q-2.07 0-3.54-1.46-1.46-1.47-1.46-3.54t1.46-3.54q1.47-1.46 3.54-1.46t3.54 1.46q1.46 1.47 1.46 3.54 0 2.07-1.46 3.54-1.47 1.46-3.54 1.46zm-10-4q-.43 0-.71-.29-.29-.28-.29-.71t.29-.71q.29-.29.71-.29h2q.42 0 .71.29.29.28.29.71t-.29.71q-.29.29-.71.29zm18 0q-.43 0-.71-.29-.29-.28-.29-.71t.29-.71q.28-.29.71-.29h2q.43 0 .71.29.29.29.29.71t-.29.71q-.28.29-.71.29zm-8-8q-.43 0-.71-.29-.29-.29-.29-.71v-2q0-.43.29-.71.28-.29.71-.29t.71.29q.29.29.29.71v2q0 .42-.29.71-.28.29-.71.29zm0 18q-.43 0-.71-.29-.29-.28-.29-.71v-2q0-.43.29-.71.28-.29.71-.29t.71.29q.29.28.29.71v2q0 .43-.29.71-.28.29-.71.29zm-6.35-15.95-1.07-1.05q-.3-.28-.29-.7.01-.42.29-.72.3-.3.72-.3t.7.3l1.05 1.07q.28.3.28.7 0 .4-.28.7-.28.3-.69.29-.41-.01-.71-.29zm12.35 12.38-1.05-1.08q-.27-.3-.27-.71 0-.41.27-.69.27-.3.69-.29.41.02.71.29l1.08 1.05q.3.27.28.7-.01.43-.28.73-.3.3-.73.3t-.7-.3zm-1.05-12.38q-.3-.27-.29-.69.02-.41.29-.71l1.05-1.07q.27-.3.7-.29.43.01.73.29.3.3.3.72t-.3.7l-1.08 1.05q-.3.28-.7.28-.4 0-.7-.28zm-12.38 12.38q-.3-.3-.3-.73t.3-.7l1.08-1.05q.3-.27.71-.27.41 0 .69.27.3.27.29.69-.01.41-.29.71l-1.05 1.08q-.28.3-.7.28-.42-.01-.72-.28z" fill="#fff"/></svg>