3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-02 16:29:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Alexey Pyltsyn 2019-12-12 16:06:54 +03:00 • committed by Yangshun Tay
parent aa87bc5b7b
commit 26a3d72c84
1 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
packages/docusaurus-theme-classic/src/index.js
View file

@ -14,19 +14,29 @@ const noFlash = `(function() {
function setDataThemeAttribute(theme) {
document.querySelector('html').setAttribute('data-theme', theme);
}
var preferDarkQuery = '(prefers-color-scheme: dark)';
var mql = window.matchMedia(preferDarkQuery);
var supportsColorSchemeQuery = mql.media === preferDarkQuery;
var localStorageTheme = null;
try {
localStorageTheme = localStorage.getItem('${storageKey}');
} catch (err) {}
var localStorageExists = localStorageTheme !== null;
if (localStorageExists) {
setDataThemeAttribute(localStorageTheme);
} else if (supportsColorSchemeQuery && mql.matches) {
function getPreferredTheme() {
var theme = null;
try {
theme = localStorage.getItem('${storageKey}');
} catch (err) {}
return theme;
}
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');
}
})();`;