3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-31 07:18:59 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore: reduce js for color scheme using color mode

Browse source
This commit is contained in:
Seth Falco 2025-07-10 13:32:59 +01:00
parent 8c2e19f80b
commit f0e3abefe7
No known key found for this signature in database
GPG key ID: DE1C217EFF01FEC8
3 changed files with 102 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

33
packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap Normal file
View file

@ -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');
})();"
`;

42
packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts Normal file
View file

@ -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();
});
});

47
packages/docusaurus-theme-classic/src/inlineScripts.ts
View file

@ -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 */