mirror of
https://github.com/facebook/docusaurus.git
synced 2025-07-24 03:58:49 +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-';
|
const DataQueryStringPrefixKey = 'docusaurus-data-';
|
||||||
|
|
||||||
export function getThemeInlineScript({
|
export function getThemeInlineScript({
|
||||||
colorMode: {defaultMode, respectPrefersColorScheme},
|
colorMode: {disableSwitch, defaultMode, respectPrefersColorScheme},
|
||||||
siteStorage,
|
siteStorage,
|
||||||
}: {
|
}: {
|
||||||
colorMode: ThemeConfig['colorMode'];
|
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
|
// 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`
|
// Currently defined in: `docusaurus-theme-common/src/contexts/colorMode.tsx`
|
||||||
const themeStorageKey = `theme${siteStorage.namespace}`;
|
const themeStorageKey = `theme${siteStorage.namespace}`;
|
||||||
|
const isThemeUserConfigurable = !disableSwitch;
|
||||||
|
|
||||||
/* language=js */
|
/* language=js */
|
||||||
return `(function() {
|
return `(function() {
|
||||||
var defaultMode = '${defaultMode}';
|
function getSystemColorMode() {
|
||||||
var respectPrefersColorScheme = ${respectPrefersColorScheme};
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
function getSystemColorMode() {
|
}
|
||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
${
|
||||||
}
|
isThemeUserConfigurable
|
||||||
function getQueryStringTheme() {
|
? ` function getQueryStringTheme() {
|
||||||
try {
|
try {
|
||||||
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
return new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
}
|
}
|
||||||
function getStoredTheme() {
|
function getStoredTheme() {
|
||||||
try {
|
try {
|
||||||
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
return window['${siteStorage.type}'].getItem('${themeStorageKey}');
|
||||||
} catch (err) {}
|
} catch (err) {}
|
||||||
}
|
}
|
||||||
var initialTheme = getQueryStringTheme() || getStoredTheme();
|
var initialTheme = getQueryStringTheme() || getStoredTheme();`
|
||||||
document.documentElement.setAttribute('data-theme', initialTheme || (respectPrefersColorScheme ? getSystemColorMode() : defaultMode));
|
: ' var initialTheme;'
|
||||||
document.documentElement.setAttribute('data-theme-choice', initialTheme || (respectPrefersColorScheme ? 'system' : defaultMode));
|
}
|
||||||
})();`;
|
document.documentElement.setAttribute('data-theme', initialTheme || ${
|
||||||
|
respectPrefersColorScheme ? 'getSystemColorMode()' : `'${defaultMode}'`
|
||||||
|
});
|
||||||
|
document.documentElement.setAttribute('data-theme-choice', initialTheme || ${
|
||||||
|
respectPrefersColorScheme ? `'system'` : `'${defaultMode}'`
|
||||||
|
});
|
||||||
|
})();`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* language=js */
|
/* language=js */
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue