mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-04 09:19:16 +02:00
feat(v2): auto switch theme depending on the system theme (#2117)
This commit is contained in:
parent
aa87bc5b7b
commit
26a3d72c84
1 changed files with 22 additions and 12 deletions
|
@ -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');
|
||||||
}
|
}
|
||||||
})();`;
|
})();`;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue