Skip to content

Commit

Permalink
feat(theme): use localstorage to save the switch state at refresh
Browse files Browse the repository at this point in the history
  • Loading branch information
Joxit committed Mar 14, 2023
1 parent 8b377ae commit a9fd1a2
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 5 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
19 changes: 15 additions & 4 deletions src/scripts/theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ const DARK_THEME = {
'footer-background': '#555',
};

const LOCAL_STORAGE_THEME = 'registryUiTheme';

let THEME;

const normalizeKey = (k) =>
Expand All @@ -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';
Expand All @@ -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;
};
3 changes: 3 additions & 0 deletions src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,9 @@ main {

material-footer {
padding: 0.5em 1em;
li {
align-self: center;
}
}

.copy-to-clipboard {
Expand Down

0 comments on commit a9fd1a2

Please sign in to comment.