mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-23 03:29:11 +02:00
chore: reduce js for color scheme using color mode
This commit is contained in:
parent
8c2e19f80b
commit
f0e3abefe7
3 changed files with 102 additions and 20 deletions
|
@ -0,0 +1,33 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`inlineScripts inline javascript for default options 1`] = `
|
||||
"(function() {
|
||||
function getSystemColorMode() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
function getQueryStringTheme() {
|
||||
try {
|
||||
return new URLSearchParams(window.location.search).get('docusaurus-theme')
|
||||
} catch (e) {}
|
||||
}
|
||||
function getStoredTheme() {
|
||||
try {
|
||||
return window['localStorage'].getItem('theme');
|
||||
} catch (err) {}
|
||||
}
|
||||
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
||||
document.documentElement.setAttribute('data-theme', initialTheme || 'light');
|
||||
document.documentElement.setAttribute('data-theme-choice', initialTheme || 'light');
|
||||
})();"
|
||||
`;
|
||||
|
||||
exports[`inlineScripts inline javascript for prefers color scheme and no switch 1`] = `
|
||||
"(function() {
|
||||
function getSystemColorMode() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
var initialTheme;
|
||||
document.documentElement.setAttribute('data-theme', initialTheme || getSystemColorMode());
|
||||
document.documentElement.setAttribute('data-theme-choice', initialTheme || 'system');
|
||||
})();"
|
||||
`;
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import {getThemeInlineScript} from '../inlineScripts';
|
||||
|
||||
describe('inlineScripts', () => {
|
||||
it('inline javascript for default options', () => {
|
||||
expect(
|
||||
getThemeInlineScript({
|
||||
colorMode: {
|
||||
disableSwitch: false,
|
||||
defaultMode: 'light',
|
||||
respectPrefersColorScheme: false,
|
||||
},
|
||||
siteStorage: {
|
||||
type: 'localStorage',
|
||||
namespace: '',
|
||||
},
|
||||
}),
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('inline javascript for prefers color scheme and no switch', () => {
|
||||
expect(
|
||||
getThemeInlineScript({
|
||||
colorMode: {
|
||||
disableSwitch: true,
|
||||
defaultMode: 'light',
|
||||
respectPrefersColorScheme: true,
|
||||
},
|
||||
siteStorage: {
|
||||
type: 'localStorage',
|
||||
namespace: '',
|
||||
},
|
||||
}),
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
});
|
|
@ -15,7 +15,7 @@ const ThemeQueryStringKey = 'docusaurus-theme';
|
|||
const DataQueryStringPrefixKey = 'docusaurus-data-';
|
||||
|
||||
export function getThemeInlineScript({
|
||||
colorMode: {defaultMode, respectPrefersColorScheme},
|
||||
colorMode: {disableSwitch, defaultMode, respectPrefersColorScheme},
|
||||
siteStorage,
|
||||
}: {
|
||||
colorMode: ThemeConfig['colorMode'];
|
||||
|
@ -25,28 +25,35 @@ export function getThemeInlineScript({
|
|||
// Make sure the key is the same as the one in the color mode React context
|
||||
// Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
|
||||
const themeStorageKey = `theme${siteStorage.namespace}`;
|
||||
const isThemeUserConfigurable = !disableSwitch;
|
||||
|
||||
/* language=js */
|
||||
return `(function() {
|
||||
var defaultMode = '${defaultMode}';
|
||||
var respectPrefersColorScheme = ${respectPrefersColorScheme};
|
||||
function getSystemColorMode() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
function getQueryStringTheme() {
|
||||
try {
|
||||
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
||||
} catch (e) {}
|
||||
}
|
||||
function getStoredTheme() {
|
||||
try {
|
||||
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
||||
} catch (err) {}
|
||||
}
|
||||
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
||||
document.documentElement.setAttribute('data-theme', initialTheme || (respectPrefersColorScheme ? getSystemColorMode() : defaultMode));
|
||||
document.documentElement.setAttribute('data-theme-choice', initialTheme || (respectPrefersColorScheme ? 'system' : defaultMode));
|
||||
})();`;
|
||||
function getSystemColorMode() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
${
|
||||
isThemeUserConfigurable
|
||||
? ` function getQueryStringTheme() {
|
||||
try {
|
||||
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
||||
} catch (e) {}
|
||||
}
|
||||
function getStoredTheme() {
|
||||
try {
|
||||
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
||||
} catch (err) {}
|
||||
}
|
||||
var initialTheme = getQueryStringTheme() || getStoredTheme();`
|
||||
: ' var initialTheme;'
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', initialTheme || ${
|
||||
respectPrefersColorScheme ? 'getSystemColorMode()' : `'${defaultMode}'`
|
||||
});
|
||||
document.documentElement.setAttribute('data-theme-choice', initialTheme || ${
|
||||
respectPrefersColorScheme ? `'system'` : `'${defaultMode}'`
|
||||
});
|
||||
})();`;
|
||||
}
|
||||
|
||||
/* language=js */
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue