chore: reduce js for color scheme using color mode

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

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

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}';
+  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 */