refactor(v2): avoid to use raw theme values (#2254)

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

@@ -42,10 +42,10 @@ export default ({children, className: languageClassName, metastring}) => {
   const button = useRef(null);
   let highlightLines = [];
 
-  const {theme} = useThemeContext();
+  const {isDarkTheme} = useThemeContext();
   const lightModeTheme = prism.theme || defaultTheme;
   const darkModeTheme = prism.darkTheme || lightModeTheme;
-  const prismTheme = theme === 'dark' ? darkModeTheme : lightModeTheme;
+  const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
 
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -52,7 +52,7 @@ function Navbar() {
   const [sidebarShown, setSidebarShown] = useState(false);
   const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
 
-  const {theme, setTheme} = useThemeContext();
+  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
   const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);
 
   useLockBodyScroll(sidebarShown);
@@ -65,11 +65,8 @@ function Navbar() {
   }, [setSidebarShown]);
 
   const onToggleChange = useCallback(
-    e => {
+    e => (e.target.checked ? setDarkTheme() : setLightTheme()),
-      const newTheme = e.target.checked ? 'dark' : '';
+    [setLightTheme, setDarkTheme],
-      setTheme(newTheme);
-    },
-    [setTheme],
   );
 
   const logoUrl = useBaseUrl(logo.src);
@@ -134,7 +131,7 @@ function Navbar() {
             <Toggle
               className={styles.displayOnlyInLargeViewport}
               aria-label="Dark mode toggle"
-              checked={theme === 'dark'}
+              checked={isDarkTheme}
               onChange={onToggleChange}
             />
           )}
@@ -160,7 +157,7 @@ function Navbar() {
           {!disableDarkMode && sidebarShown && (
             <Toggle
               aria-label="Dark mode toggle in sidebar"
-              checked={theme === 'dark'}
+              checked={isDarkTheme}
               onChange={onToggleChange}
             />
           )}

packages/docusaurus-theme-classic/src/theme/ThemeContext.js

@@ -8,8 +8,9 @@
 import React from 'react';
 
 const ThemeContext = React.createContext({
-  theme: null,
+  isDarkTheme: false,
-  setTheme: () => {},
+  setLightTheme: () => {},
+  setDarkTheme: () => {},
 });
 
 export default ThemeContext;

packages/docusaurus-theme-classic/src/theme/ThemeProvider/index.js

@@ -11,10 +11,10 @@ import useTheme from '@theme/hooks/useTheme';
 import ThemeContext from '@theme/ThemeContext';
 
 function ThemeProvider(props) {
-  const [theme, setTheme] = useTheme();
+  const {isDarkTheme, setLightTheme, setDarkTheme} = useTheme();
 
   return (
-    <ThemeContext.Provider value={{theme, setTheme}}>
+    <ThemeContext.Provider value={{isDarkTheme, setLightTheme, setDarkTheme}}>
       {props.children}
     </ThemeContext.Provider>
   );

packages/docusaurus-theme-classic/src/theme/hooks/useTheme.js

@@ -5,25 +5,48 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import {useState, useCallback, useEffect} from 'react';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
+const themes = {
+  light: '',
+  dark: 'dark',
+};
+
 const useTheme = () => {
   const {
     siteConfig: {themeConfig: {disableDarkMode}} = {},
   } = useDocusaurusContext();
-  const [theme, setTheme] = React.useState(
+  const [theme, setTheme] = useState(
     typeof document !== 'undefined'
       ? document.documentElement.getAttribute('data-theme')
-      : '',
+      : themes.light,
   );
+  const setThemeSyncWithLocalStorage = useCallback(
+    newTheme => {
+      try {
+        localStorage.setItem('theme', newTheme);
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    [setTheme],
+  );
+  const setLightTheme = useCallback(() => {
+    setTheme(themes.light);
+    setThemeSyncWithLocalStorage(themes.light);
+  }, []);
+  const setDarkTheme = useCallback(() => {
+    setTheme(themes.dark);
+    setThemeSyncWithLocalStorage(themes.dark);
+  }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
   }, [theme]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (disableDarkMode) {
       return;
     }
@@ -38,19 +61,11 @@ const useTheme = () => {
     }
   }, [setTheme]);
 
-  const setThemeSyncWithLocalStorage = React.useCallback(
+  return {
-    nextTheme => {
+    isDarkTheme: theme === themes.dark,
-      try {
+    setLightTheme,
-        localStorage.setItem('theme', nextTheme);
+    setDarkTheme,
-        setTheme(nextTheme);
+  };
-      } catch (err) {
-        console.error(err);
-      }
-    },
-    [setTheme],
-  );
-
-  return [theme, setThemeSyncWithLocalStorage];
 };
 
 export default useTheme;

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -49,10 +49,10 @@ export default ({
   const button = useRef(null);
   let highlightLines = [];
 
-  const {theme} = useThemeContext();
+  const {isDarkTheme} = useThemeContext();
   const lightModeTheme = prism.theme || defaultTheme;
   const darkModeTheme = prism.darkTheme || lightModeTheme;
-  const prismTheme = theme === 'dark' ? darkModeTheme : lightModeTheme;
+  const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
 
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];