feat(theme): use localstorage to save the switch state at refresh

package.json

@@ -34,7 +34,7 @@
     "node-sass": "^8.0.0",
     "prettier": "^2.8.1",
     "riot": "^7.1.0",
-    "riot-mui": "github:joxit/riot-5-mui#b892806",
+    "riot-mui": "github:joxit/riot-5-mui#a97f2d3",
     "rollup": "^3.9.0",
     "rollup-plugin-app-utils": "^1.0.6",
     "rollup-plugin-copy": "^3.4.0",

src/scripts/theme.js

@@ -23,6 +23,8 @@ const DARK_THEME = {
   'footer-background': '#555',
 };
 
+const LOCAL_STORAGE_THEME = 'registryUiTheme';
+
 let THEME;
 
 const normalizeKey = (k) =>
@@ -33,9 +35,16 @@ const normalizeKey = (k) =>
 
 const preferDarkMode = ({ theme }) => {
   if (theme === 'auto') {
-    if (typeof window.matchMedia === 'function') {
-      const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
-      return prefersDarkScheme && prefersDarkScheme.matches;
+    switch (localStorage.getItem(LOCAL_STORAGE_THEME)) {
+      case 'dark':
+        return true;
+      case 'light':
+        return false;
+      default:
+        if (typeof window.matchMedia === 'function') {
+          const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+          return prefersDarkScheme && prefersDarkScheme.matches;
+        }
     }
   }
   return theme === 'dark';
@@ -49,5 +58,7 @@ export const loadTheme = (props, style) => {
     .map(([k, v]) => [normalizeKey(k), v])
     .forEach(([k, v]) => (THEME[k] = v));
   Object.entries(THEME).forEach(([k, v]) => style.setProperty(`--${k}`, v));
-  return isDarkMode ? 'dark' : 'light';
+  const theme = isDarkMode ? 'dark' : 'light';
+  localStorage.setItem(LOCAL_STORAGE_THEME, theme);
+  return theme;
 };

src/style.scss

@@ -341,6 +341,9 @@ main {
 
 material-footer {
   padding: 0.5em 1em;
+  li {
+    align-self: center;
+  }
 }
 
 .copy-to-clipboard {