From f0e3abefe7b1215be27653b470a87355d9f5c5ab Mon Sep 17 00:00:00 2001 From: Seth Falco Date: Thu, 10 Jul 2025 13:32:59 +0100 Subject: [PATCH] chore: reduce js for color scheme using color mode --- .../__snapshots__/inlineScripts.test.ts.snap | 33 +++++++++++++ .../src/__tests__/inlineScripts.test.ts | 42 +++++++++++++++++ .../src/inlineScripts.ts | 47 +++++++++++-------- 3 files changed, 102 insertions(+), 20 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap create mode 100644 packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts diff --git a/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap new file mode 100644 index 0000000000..acad179bbe --- /dev/null +++ b/packages/docusaurus-theme-classic/src/__tests__/__snapshots__/inlineScripts.test.ts.snap @@ -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'); +})();" +`; diff --git a/packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts b/packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts new file mode 100644 index 0000000000..5671d77d3c --- /dev/null +++ b/packages/docusaurus-theme-classic/src/__tests__/inlineScripts.test.ts @@ -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(); + }); +}); diff --git a/packages/docusaurus-theme-classic/src/inlineScripts.ts b/packages/docusaurus-theme-classic/src/inlineScripts.ts index 4a2e4694b6..fe49094a52 100644 --- a/packages/docusaurus-theme-classic/src/inlineScripts.ts +++ b/packages/docusaurus-theme-classic/src/inlineScripts.ts @@ -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 */