feat(v2): auto switch theme depending on the system theme (#2117)

This commit is contained in:
Alexey Pyltsyn 2019-12-12 16:06:54 +03:00 committed by Yangshun Tay
parent aa87bc5b7b
commit 26a3d72c84

View file

@ -15,18 +15,28 @@ const noFlash = `(function() {
document.querySelector('html').setAttribute('data-theme', theme); document.querySelector('html').setAttribute('data-theme', theme);
} }
var preferDarkQuery = '(prefers-color-scheme: dark)'; function getPreferredTheme() {
var mql = window.matchMedia(preferDarkQuery); var theme = null;
var supportsColorSchemeQuery = mql.media === preferDarkQuery;
var localStorageTheme = null;
try { try {
localStorageTheme = localStorage.getItem('${storageKey}'); theme = localStorage.getItem('${storageKey}');
} catch (err) {} } catch (err) {}
var localStorageExists = localStorageTheme !== null;
if (localStorageExists) { return theme;
setDataThemeAttribute(localStorageTheme); }
} else if (supportsColorSchemeQuery && mql.matches) {
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkQuery.addListener(function(e) {
if (getPreferredTheme() !== null) {
return;
}
setDataThemeAttribute(e.matches ? 'dark' : '');
});
var preferredTheme = getPreferredTheme();
if (preferredTheme !== null) {
setDataThemeAttribute(preferredTheme);
} else if (darkQuery.matches) {
setDataThemeAttribute('dark'); setDataThemeAttribute('dark');
} }
})();`; })();`;