diff --git a/package.json b/package.json index 4db87f3..8cf96b3 100644 --- a/package.json +++ b/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", diff --git a/src/scripts/theme.js b/src/scripts/theme.js index 000936b..d1be707 100644 --- a/src/scripts/theme.js +++ b/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; }; diff --git a/src/style.scss b/src/style.scss index 20d6838..aa49909 100644 --- a/src/style.scss +++ b/src/style.scss @@ -341,6 +341,9 @@ main { material-footer { padding: 0.5em 1em; + li { + align-self: center; + } } .copy-to-clipboard {