Use theme instead of colorMode

facebook · Mar 17, 2022 · ec6aad2 · ec6aad2
1 parent f691633
commit ec6aad2
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 30 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -746,12 +746,12 @@ declare module '@theme/TOCCollapsible' {
 }
 
 declare module '@theme/ColorModeToggle' {
-  import type {Themes} from '@docusaurus/theme-common';
+  import type {Theme} from '@docusaurus/theme-common';
 
   export interface Props {
     readonly className?: string;
-    readonly colorMode: Themes;
-    readonly onChange: (colorMode: Themes) => void;
+    readonly theme: Theme;
+    readonly onChange: (theme: Theme) => void;
   }
 
   export default function Toggle(props: Props): JSX.Element;

diff --git a/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/ColorModeToggle/index.tsx
@@ -17,15 +17,15 @@ import styles from './styles.module.css';
 
 function ColorModeToggle({
   className,
-  colorMode: defaultColorMode,
+  theme: defaultTheme,
   onChange,
 }: Props): JSX.Element {
   const isBrowser = useIsBrowser();
-  const [colorMode, setColorMode] = useState(defaultColorMode);
+  const [theme, setTheme] = useState(defaultTheme);
 
   useEffect(() => {
-    setColorMode(defaultColorMode);
-  }, [defaultColorMode]);
+    setTheme(defaultTheme);
+  }, [defaultTheme]);
 
   const title = translate(
     {
@@ -34,17 +34,18 @@ function ColorModeToggle({
       description: 'The ARIA label for the navbar color mode toggle',
     },
     {
-      mode: colorMode
-        ? translate({
-            message: 'dark mode',
-            id: 'theme.colorToggle.ariaLabel.mode.dark',
-            description: 'The name for the dark color mode',
-          })
-        : translate({
-            message: 'light mode',
-            id: 'theme.colorToggle.ariaLabel.mode.light',
-            description: 'The name for the light color mode',
-          }),
+      mode:
+        theme === 'dark'
+          ? translate({
+              message: 'dark mode',
+              id: 'theme.colorToggle.ariaLabel.mode.dark',
+              description: 'The name for the dark color mode',
+            })
+          : translate({
+              message: 'light mode',
+              id: 'theme.colorToggle.ariaLabel.mode.light',
+              description: 'The name for the light color mode',
+            }),
     },
   );
 
@@ -58,9 +59,9 @@ function ColorModeToggle({
         )}
         type="button"
         onClick={() => {
-          const newColorMode = colorMode === 'dark' ? 'light' : 'dark';
-          setColorMode(newColorMode);
-          onChange(newColorMode);
+          const newTheme = theme === 'dark' ? 'light' : 'dark';
+          setTheme(newTheme);
+          onChange(newTheme);
         }}
         disabled={!isBrowser}
         title={title}

diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/index.tsx
@@ -26,7 +26,7 @@ import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
 import IconClose from '@theme/IconClose';
 
-import type {Themes} from '@docusaurus/theme-common';
+import type {Theme} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
 
@@ -96,7 +96,7 @@ function useColorModeToggle() {
     [setLightTheme, setDarkTheme],
   );
   return {
-    theme: (isDarkTheme ? 'dark' : 'light') as Themes,
+    theme: (isDarkTheme ? 'dark' : 'light') as Theme,
     toggle,
     disabled: disableSwitch,
   };
@@ -179,7 +179,7 @@ function NavbarMobileSidebar({
         {!colorModeToggle.disabled && (
           <ColorModeToggle
             className={styles.navbarSidebarToggle}
-            colorMode={colorModeToggle.theme}
+            theme={colorModeToggle.theme}
             onChange={colorModeToggle.toggle}
           />
         )}
@@ -285,7 +285,7 @@ export default function Navbar(): JSX.Element {
           {!colorModeToggle.disabled && (
             <ColorModeToggle
               className={styles.toggle}
-              colorMode={colorModeToggle.theme}
+              theme={colorModeToggle.theme}
               onChange={colorModeToggle.toggle}
             />
           )}

diff --git a/packages/docusaurus-theme-common/src/index.ts b/packages/docusaurus-theme-common/src/index.ts
@@ -130,7 +130,7 @@ export {isRegexpStringMatch} from './utils/regexpUtils';
 
 export {useHomePageRoute} from './utils/routesUtils';
 
-export type {Themes} from './utils/colorModeUtils';
+export type {Theme} from './utils/colorModeUtils';
 export {useColorMode, ColorModeProvider} from './utils/colorModeUtils';
 export {
   useTabGroupChoice,

diff --git a/packages/docusaurus-theme-common/src/utils/colorModeUtils.tsx b/packages/docusaurus-theme-common/src/utils/colorModeUtils.tsx
@@ -34,20 +34,20 @@ const themes = {
   dark: 'dark',
 } as const;
 
-export type Themes = typeof themes[keyof typeof themes];
+export type Theme = typeof themes[keyof typeof themes];
 
 // Ensure to always return a valid theme even if input is invalid
-const coerceToTheme = (theme?: string | null): Themes =>
+const coerceToTheme = (theme?: string | null): Theme =>
   theme === themes.dark ? themes.dark : themes.light;
 
-const getInitialTheme = (defaultMode: Themes | undefined): Themes => {
+const getInitialTheme = (defaultMode: Theme | undefined): Theme => {
   if (!ExecutionEnvironment.canUseDOM) {
     return coerceToTheme(defaultMode);
   }
   return coerceToTheme(document.documentElement.getAttribute('data-theme'));
 };
 
-const storeTheme = (newTheme: Themes) => {
+const storeTheme = (newTheme: Theme) => {
   ThemeStorage.set(coerceToTheme(newTheme));
 };