refactor: refactor ThemeProvider

packages/logos-docusaurus-theme/src/client/containers/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,18 @@
+import { ThemeProvider as LSDThemeProvider } from '@acid-info/lsd-react'
+import { Global } from '@emotion/react'
+import React from 'react'
+import { useTheme } from '../../lib/themes'
+
+export const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({
+  children,
+}) => {
+  const theme = useTheme()
+
+  return (
+    <LSDThemeProvider theme={theme.current} injectCssVars={false}>
+      <Global styles={theme.darkCssVars} />
+      <Global styles={theme.lightCssVars} />
+      {children}
+    </LSDThemeProvider>
+  )
+}

packages/logos-docusaurus-theme/src/client/containers/ThemeProvider/index.ts

@@ -0,0 +1 @@
+export * from './ThemeProvider'

packages/logos-docusaurus-theme/src/client/lib/themes.ts

@@ -2,7 +2,12 @@ import {
   createTheme,
   CreateThemeProps,
   defaultThemes,
+  Theme,
 } from '@acid-info/lsd-react'
+import { useActivePlugin } from '@docusaurus/plugin-content-docs/lib/client/index.js'
+import { useColorMode } from '@docusaurus/theme-common'
+import { css } from '@emotion/react'
+import { useMemo } from 'react'
 
 const typography: CreateThemeProps['typography'] = {
   h1: {
@@ -75,3 +80,34 @@ export const darkTheme = createTheme(
   },
   defaultThemes.dark,
 )
+
+const docThemes = {
+  light: lightTheme,
+  dark: darkTheme,
+}
+
+const useThemeCssVars = (theme: Theme, colorMode: string) =>
+  useMemo(
+    () => css`
+      [data-theme=${colorMode}] {
+        ${theme.cssVars}
+      }
+    `,
+    [theme],
+  )
+
+export const useTheme = () => {
+  const colorMode = useColorMode()
+  const activePlugin = useActivePlugin()
+
+  const themes = activePlugin ? docThemes : defaultThemes
+
+  return {
+    dark: themes.dark,
+    light: themes.light,
+    current: themes[colorMode.colorMode],
+    colorMode: colorMode.colorMode,
+    lightCssVars: useThemeCssVars(themes.light, 'light'),
+    darkCssVars: useThemeCssVars(themes.dark, 'dark'),
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/Root.tsx

@@ -1,79 +1,20 @@
-import {
-  defaultThemes,
-  Theme,
-  ThemeProvider as LSDThemeProvider,
-} from '@acid-info/lsd-react'
-import { useActivePlugin } from '@docusaurus/plugin-content-docs/lib/client/index.js'
-import {
-  ColorModeProvider,
-  useColorMode,
-} from '@docusaurus/theme-common/internal'
-import { css, Global } from '@emotion/react'
-import React, { useMemo } from 'react'
-import { darkTheme, lightTheme } from '../lib/themes'
+import { ColorModeProvider } from '@docusaurus/theme-common/internal'
+import React from 'react'
+import { ThemeProvider } from '../containers/ThemeProvider'
 import { useDocThemeOptions } from '../lib/useThemeOptions'
 import styles from './style.module.css'
 
-const docThemes = {
-  light: lightTheme,
-  dark: darkTheme,
-}
-
-const useTheme = () => {
-  const colorMode = useColorMode()
-  const activePlugin = useActivePlugin()
-
-  const themes = activePlugin ? docThemes : defaultThemes
-
-  return {
-    dark: themes.dark,
-    light: themes.light,
-    current: themes[colorMode.colorMode],
-    colorMode: colorMode.colorMode,
-  }
-}
-
-const useThemeCssVars = (theme: Theme, light: boolean = false) =>
-  useMemo(
-    () => css`
-      [data-theme=${light ? 'light' : 'dark'}] {
-        ${theme.cssVars}
-      }
-    `,
-    [theme],
-  )
-
-const ThemeProvider: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
-  const theme = useTheme()
-  const darkCssVars = useThemeCssVars(theme.dark, false)
-  const lightCssVars = useThemeCssVars(theme.light, true)
-
-  return (
-    <LSDThemeProvider theme={theme.current} injectCssVars={false}>
-      {children}
-      <Global styles={darkCssVars} />
-      <Global styles={lightCssVars} />
-    </LSDThemeProvider>
-  )
-}
-
-const Content = ({ children }) => {
+export default function Root({ children }) {
   const options = useDocThemeOptions()
   const hideDocSidebar = options?.sidebar?.hide
 
-  return (
-    <ThemeProvider>
-      <div className={styles.root} data-hidden-doc-sidebar={hideDocSidebar}>
-        {children}
-      </div>
-    </ThemeProvider>
-  )
-}
-
-export default function Root({ children }) {
   return (
     <ColorModeProvider>
-      <Content>{children}</Content>
+      <ThemeProvider>
+        <div className={styles.root} data-hidden-doc-sidebar={hideDocSidebar}>
+          {children}
+        </div>
+      </ThemeProvider>
     </ColorModeProvider>
   )
 }