feat(theme): add support to `auto` theme whith media query

This commit is contained in:
Joxit 2023-01-20 19:45:18 +01:00
parent 8c402442c2
commit e4369f4ec9
No known key found for this signature in database
GPG Key ID: F526592B8E012263
1 changed files with 11 additions and 1 deletions

View File

@ -31,8 +31,18 @@ const normalizeKey = (k) =>
.toLowerCase()
.replace(/^theme-/, '');
const preferDarkMode = ({ theme }) => {
if (theme === 'auto') {
if (typeof window.matchMedia === 'function') {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
return prefersDarkScheme && prefersDarkScheme.matches;
}
}
return theme === 'dark';
};
export const loadTheme = (props, style) => {
THEME = props.theme == 'dark' ? DARK_THEME : LIGHT_THEME;
THEME = preferDarkMode(props) ? DARK_THEME : LIGHT_THEME;
Object.entries(props)
.filter(([k, v]) => v && /^theme[A-Z]/.test(k))
.map(([k, v]) => [normalizeKey(k), v])