@docusaurus/theme-classic 0.0.0-4375 → 0.0.0-4379

package/lib/index.js

@@ -178,8 +178,6 @@ options) {
     configureWebpack() {
       const prismLanguages = additionalLanguages.map(lang => `prism-${lang}`).join('|');
       return {
-        ignoreWarnings: [// See https://github.com/facebook/docusaurus/pull/3382
-        e => e.message.includes("Can't resolve '@theme-init/hooks/useDocs")],
         plugins: [new ContextReplacementPlugin(/prismjs[\\/]components$/, new RegExp(`^./(${prismLanguages})$`))]
       };
     },

package/lib/theme-classic.d.ts

@@ -215,86 +215,6 @@ declare module '@theme/Heading' {
   export default function Heading(props: Props): JSX.Element;
 }
 
-declare module '@theme/hooks/useHideableNavbar' {
-  export type useHideableNavbarReturns = {
-    readonly navbarRef: (node: HTMLElement | null) => void;
-    readonly isNavbarVisible: boolean;
-  };
-
-  const useHideableNavbar: (hideOnScroll: boolean) => useHideableNavbarReturns;
-  export default useHideableNavbar;
-}
-
-declare module '@theme/hooks/useLockBodyScroll' {
-  const useLockBodyScroll: (lock?: boolean) => void;
-  export default useLockBodyScroll;
-}
-
-declare module '@theme/hooks/usePrismTheme' {
-  import type defaultTheme from 'prism-react-renderer/themes/palenight';
-
-  const usePrismTheme: () => typeof defaultTheme;
-  export default usePrismTheme;
-}
-
-declare module '@theme/hooks/useTabGroupChoice' {
-  export type useTabGroupChoiceReturns = {
-    readonly tabGroupChoices: {readonly [groupId: string]: string};
-    readonly setTabGroupChoices: (groupId: string, newChoice: string) => void;
-  };
-
-  const useTabGroupChoice: () => useTabGroupChoiceReturns;
-  export default useTabGroupChoice;
-}
-
-declare module '@theme/hooks/useTheme' {
-  export type useThemeReturns = {
-    readonly isDarkTheme: boolean;
-    readonly setLightTheme: () => void;
-    readonly setDarkTheme: () => void;
-  };
-
-  const useTheme: () => useThemeReturns;
-  export default useTheme;
-}
-
-declare module '@theme/hooks/useThemeContext' {
-  export type ThemeContextProps = {
-    isDarkTheme: boolean;
-    setLightTheme: () => void;
-    setDarkTheme: () => void;
-  };
-
-  export default function useThemeContext(): ThemeContextProps;
-}
-
-declare module '@theme/hooks/useUserPreferencesContext' {
-  export type UserPreferencesContextProps = {
-    tabGroupChoices: {readonly [groupId: string]: string};
-    setTabGroupChoices: (groupId: string, newChoice: string) => void;
-  };
-
-  export default function useUserPreferencesContext(): UserPreferencesContextProps;
-}
-
-declare module '@theme/hooks/useWindowSize' {
-  export const windowSizes: {
-    desktop: 'desktop';
-    mobile: 'mobile';
-    ssr: 'ssr';
-  };
-
-  export type WindowSize = keyof typeof windowSizes;
-
-  export default function useWindowSize(): WindowSize;
-}
-
-declare module '@theme/hooks/useKeyboardNavigation' {
-  const useKeyboardNavigation: () => void;
-
-  export default useKeyboardNavigation;
-}
-
 declare module '@theme/Layout' {
   import type {ReactNode} from 'react';
 
@@ -314,8 +234,7 @@ declare module '@theme/Layout' {
     };
   }
 
-  const Layout: (props: Props) => JSX.Element;
-  export default Layout;
+  export default function Layout(props: Props): JSX.Element;
 }
 
 declare module '@theme/LayoutHead' {
@@ -323,8 +242,17 @@ declare module '@theme/LayoutHead' {
 
   export interface Props extends Omit<LayoutProps, 'children'> {}
 
-  const LayoutHead: (props: Props) => JSX.Element;
-  export default LayoutHead;
+  export default function LayoutHead(props: Props): JSX.Element;
+}
+
+declare module '@theme/LayoutProviders' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    readonly children: ReactNode;
+  }
+
+  export default function LayoutProviders(props: Props): JSX.Element;
 }
 
 declare module '@theme/SearchMetadata' {
@@ -621,17 +549,6 @@ declare module '@theme/Details' {
   export default Details;
 }
 
-declare module '@theme/ThemeProvider' {
-  import type {ReactNode} from 'react';
-
-  export interface Props {
-    readonly children: ReactNode;
-  }
-
-  const ThemeProvider: (props: Props) => JSX.Element;
-  export default ThemeProvider;
-}
-
 declare module '@theme/TOCItems' {
   import type {TOCItem} from '@docusaurus/types';
 
@@ -712,46 +629,6 @@ declare module '@theme/Toggle' {
   export default Toggle;
 }
 
-declare module '@theme/UserPreferencesProvider' {
-  import type {ReactNode} from 'react';
-
-  export interface Props {
-    readonly children: ReactNode;
-  }
-
-  const UserPreferencesProvider: (props: Props) => JSX.Element;
-  export default UserPreferencesProvider;
-}
-
-declare module '@theme/LayoutProviders' {
-  import type {ReactNode} from 'react';
-
-  export interface Props {
-    readonly children: ReactNode;
-  }
-
-  const LayoutProviders: (props: Props) => JSX.Element;
-  export default LayoutProviders;
-}
-
-declare module '@theme/ThemeContext' {
-  import type {Context} from 'react';
-  import type {ThemeContextProps} from '@theme/hooks/useThemeContext';
-
-  const ThemeContext: Context<ThemeContextProps | undefined>;
-  export default ThemeContext;
-}
-
-declare module '@theme/UserPreferencesContext' {
-  import type {Context} from 'react';
-  import type {UserPreferencesContextProps} from '@theme/hooks/useUserPreferencesContext';
-
-  const UserPreferencesContext: Context<
-    UserPreferencesContextProps | undefined
-  >;
-  export default UserPreferencesContext;
-}
-
 declare module '@theme/Logo' {
   import type {ComponentProps} from 'react';
 

package/lib-next/theme/CodeBlock/index.js

@@ -15,8 +15,8 @@ import {
   parseLanguage,
   parseLines,
   ThemeClassNames,
+  usePrismTheme,
 } from '@docusaurus/theme-common';
-import usePrismTheme from '@theme/hooks/usePrismTheme';
 import styles from './styles.module.css';
 export default function CodeBlock({
   children,

package/lib-next/theme/DocItem/index.js

@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import clsx from 'clsx';
-import useWindowSize from '@theme/hooks/useWindowSize';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -16,7 +15,7 @@ import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
 export default function DocItem(props) {
   const {content: DocContent} = props;
   const {metadata, frontMatter} = DocContent;

package/lib-next/theme/DocSidebar/index.js

@@ -12,8 +12,8 @@ import {
   MobileSecondaryMenuFiller,
   ThemeClassNames,
   useScrollPosition,
+  useWindowSize,
 } from '@docusaurus/theme-common';
-import useWindowSize from '@theme/hooks/useWindowSize';
 import Logo from '@theme/Logo';
 import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';

package/lib-next/theme/DocVersionBanner/index.js

@@ -8,7 +8,10 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
-import {useActivePlugin, useDocVersionSuggestions} from '@theme/hooks/useDocs';
+import {
+  useActivePlugin,
+  useDocVersionSuggestions,
+} from '@docusaurus/plugin-content-docs/client';
 import {
   ThemeClassNames,
   useDocsPreferredVersion,

package/lib-next/theme/Layout/index.js

@@ -13,8 +13,7 @@ import Navbar from '@theme/Navbar';
 import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
 import LayoutHead from '@theme/LayoutHead';
-import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 

package/lib-next/theme/LayoutProviders/index.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import ThemeProvider from '@theme/ThemeProvider';
-import UserPreferencesProvider from '@theme/UserPreferencesProvider';
 import {
+  ColorModeProvider,
+  TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
@@ -15,9 +15,9 @@ import {
 } from '@docusaurus/theme-common';
 export default function LayoutProviders({children}) {
   return (
-    <ThemeProvider>
+    <ColorModeProvider>
       <AnnouncementBarProvider>
-        <UserPreferencesProvider>
+        <TabGroupChoiceProvider>
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
               <MobileSecondaryMenuProvider>
@@ -25,8 +25,8 @@ export default function LayoutProviders({children}) {
               </MobileSecondaryMenuProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>
-        </UserPreferencesProvider>
+        </TabGroupChoiceProvider>
       </AnnouncementBarProvider>
-    </ThemeProvider>
+    </ColorModeProvider>
   );
 }

package/lib-next/theme/Navbar/index.js

@@ -9,17 +9,17 @@ import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import SearchBar from '@theme/SearchBar';
 import Toggle from '@theme/Toggle';
-import useThemeContext from '@theme/hooks/useThemeContext';
 import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
   usePrevious,
   useHistoryPopHandler,
+  useHideableNavbar,
+  useLockBodyScroll,
+  useWindowSize,
+  useColorMode,
 } from '@docusaurus/theme-common';
-import useHideableNavbar from '@theme/hooks/useHideableNavbar';
-import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
-import useWindowSize from '@theme/hooks/useWindowSize';
-import {useActivePlugin} from '@theme/hooks/useDocs';
+import {useActivePlugin} from '@docusaurus/plugin-content-docs/client';
 import NavbarItem from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
@@ -84,7 +84,7 @@ function useColorModeToggle() {
   const {
     colorMode: {disableSwitch},
   } = useThemeConfig();
-  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
+  const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
   const toggle = useCallback(
     (e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
     [setLightTheme, setDarkTheme],

package/lib-next/theme/NavbarItem/DocNavbarItem.js

@@ -6,7 +6,10 @@
  */
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
+import {
+  useLatestVersion,
+  useActiveDocContext,
+} from '@docusaurus/plugin-content-docs/client';
 import clsx from 'clsx';
 import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';

package/lib-next/theme/NavbarItem/DocSidebarNavbarItem.js

@@ -6,7 +6,10 @@
  */
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useLatestVersion, useActiveDocContext} from '@theme/hooks/useDocs';
+import {
+  useLatestVersion,
+  useActiveDocContext,
+} from '@docusaurus/plugin-content-docs/client';
 import clsx from 'clsx';
 import {getInfimaActiveClassName} from '@theme/NavbarItem/utils';
 import {useDocsPreferredVersion, uniq} from '@docusaurus/theme-common';

package/lib-next/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -11,7 +11,7 @@ import {
   useVersions,
   useLatestVersion,
   useActiveDocContext,
-} from '@theme/hooks/useDocs';
+} from '@docusaurus/plugin-content-docs/client';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {translate} from '@docusaurus/Translate';
 

package/lib-next/theme/NavbarItem/DocsVersionNavbarItem.js

@@ -6,7 +6,10 @@
  */
 import React from 'react';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
-import {useActiveVersion, useLatestVersion} from '@theme/hooks/useDocs';
+import {
+  useActiveVersion,
+  useLatestVersion,
+} from '@docusaurus/plugin-content-docs/client';
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 
 const getVersionMainDoc = (version) =>

package/lib-next/theme/SkipToContent/index.js

@@ -37,7 +37,7 @@ function SkipToContent() {
     }
   });
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} role="region">
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a href="#" className={styles.skipToContent} onClick={handleSkip}>
         <Translate

package/lib-next/theme/Tabs/__tests__/index.test.js

@@ -8,8 +8,10 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import Tabs from '../index';
 import TabItem from '../../TabItem';
-import UserPreferencesProvider from '@theme/UserPreferencesProvider';
-import {ScrollControllerProvider} from '@docusaurus/theme-common';
+import {
+  TabGroupChoiceProvider,
+  ScrollControllerProvider,
+} from '@docusaurus/theme-common';
 describe('Tabs', () => {
   test('Should reject bad Tabs child', () => {
     expect(() => {
@@ -55,7 +57,7 @@ describe('Tabs', () => {
     expect(() => {
       renderer.create(
         <ScrollControllerProvider>
-          <UserPreferencesProvider>
+          <TabGroupChoiceProvider>
             <Tabs>
               <TabItem value="v1">Tab 1</TabItem>
               <TabItem value="v2">Tab 2</TabItem>
@@ -112,7 +114,7 @@ describe('Tabs', () => {
                 Tab 2
               </TabItem>
             </Tabs>
-          </UserPreferencesProvider>
+          </TabGroupChoiceProvider>
         </ScrollControllerProvider>,
       );
     }).not.toThrow(); // TODO Better Jest infrastructure to mock the Layout
@@ -123,7 +125,7 @@ describe('Tabs', () => {
       const tabs = ['Apple', 'Banana', 'Carrot'];
       renderer.create(
         <ScrollControllerProvider>
-          <UserPreferencesProvider>
+          <TabGroupChoiceProvider>
             <Tabs
               values={tabs.map((t, idx) => ({
                 label: t,
@@ -134,7 +136,7 @@ describe('Tabs', () => {
                 <TabItem value={idx}>{t}</TabItem>
               ))}
             </Tabs>
-          </UserPreferencesProvider>
+          </TabGroupChoiceProvider>
         </ScrollControllerProvider>,
       );
     }).not.toThrow();

package/lib-next/theme/Tabs/index.js

@@ -6,8 +6,11 @@
  */
 import React, {useState, cloneElement, Children, isValidElement} from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
-import {useScrollPositionBlocker, duplicates} from '@docusaurus/theme-common';
+import {
+  useScrollPositionBlocker,
+  duplicates,
+  useTabGroupChoice,
+} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import styles from './styles.module.css'; // A very rough duck type, but good enough to guard against mistakes while
 // allowing customization
@@ -72,7 +75,7 @@ function TabsComponent(props) {
     );
   }
 
-  const {tabGroupChoices, setTabGroupChoices} = useUserPreferencesContext();
+  const {tabGroupChoices, setTabGroupChoices} = useTabGroupChoice();
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const tabRefs = [];
   const {blockElementScrollPositionUntilNextRender} =

package/lib-next/theme/ThemedImage/index.js

@@ -7,12 +7,12 @@
 import React from 'react';
 import clsx from 'clsx';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import useThemeContext from '@theme/hooks/useThemeContext';
+import {useColorMode} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 
 function ThemedImage(props) {
   const isBrowser = useIsBrowser();
-  const {isDarkTheme} = useThemeContext();
+  const {isDarkTheme} = useColorMode();
   const {sources, className, alt = '', ...propsRest} = props;
   const clientThemes = isDarkTheme ? ['dark'] : ['light'];
   const renderedSourceNames = isBrowser

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4375",
+  "version": "0.0.0-4379",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4375",
-    "@docusaurus/plugin-content-blog": "0.0.0-4375",
-    "@docusaurus/plugin-content-docs": "0.0.0-4375",
-    "@docusaurus/plugin-content-pages": "0.0.0-4375",
-    "@docusaurus/theme-common": "0.0.0-4375",
-    "@docusaurus/theme-translations": "0.0.0-4375",
-    "@docusaurus/utils": "0.0.0-4375",
-    "@docusaurus/utils-validation": "0.0.0-4375",
+    "@docusaurus/core": "0.0.0-4379",
+    "@docusaurus/plugin-content-blog": "0.0.0-4379",
+    "@docusaurus/plugin-content-docs": "0.0.0-4379",
+    "@docusaurus/plugin-content-pages": "0.0.0-4379",
+    "@docusaurus/theme-common": "0.0.0-4379",
+    "@docusaurus/theme-translations": "0.0.0-4379",
+    "@docusaurus/utils": "0.0.0-4379",
+    "@docusaurus/utils-validation": "0.0.0-4379",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
@@ -45,8 +45,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4375",
-    "@docusaurus/types": "0.0.0-4375",
+    "@docusaurus/module-type-aliases": "0.0.0-4379",
+    "@docusaurus/types": "0.0.0-4379",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "5738b5a5cb1c7446430167058e8d246fe6b596de"
+  "gitHead": "92aba1ab0bda5fe2b1f6cc8cdd50677051187dcb"
 }

package/src/index.ts

@@ -171,10 +171,6 @@ export default function docusaurusThemeClassic(
         .join('|');
 
       return {
-        ignoreWarnings: [
-          // See https://github.com/facebook/docusaurus/pull/3382
-          (e) => e.message.includes("Can't resolve '@theme-init/hooks/useDocs"),
-        ],
         plugins: [
           new ContextReplacementPlugin(
             /prismjs[\\/]components$/,

package/src/theme/CodeBlock/index.tsx

@@ -16,8 +16,8 @@ import {
   parseLanguage,
   parseLines,
   ThemeClassNames,
+  usePrismTheme,
 } from '@docusaurus/theme-common';
-import usePrismTheme from '@theme/hooks/usePrismTheme';
 import type {Props} from '@theme/CodeBlock';
 
 import styles from './styles.module.css';

package/src/theme/DocItem/index.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import useWindowSize from '@theme/hooks/useWindowSize';
 import DocPaginator from '@theme/DocPaginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -18,7 +17,7 @@ import TOC from '@theme/TOC';
 import TOCCollapsible from '@theme/TOCCollapsible';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames, useWindowSize} from '@docusaurus/theme-common';
 
 export default function DocItem(props: Props): JSX.Element {
   const {content: DocContent} = props;

package/src/theme/DocSidebar/index.tsx

@@ -14,8 +14,8 @@ import {
   type MobileSecondaryMenuComponent,
   ThemeClassNames,
   useScrollPosition,
+  useWindowSize,
 } from '@docusaurus/theme-common';
-import useWindowSize from '@theme/hooks/useWindowSize';
 import Logo from '@theme/Logo';
 import IconArrow from '@theme/IconArrow';
 import {translate} from '@docusaurus/Translate';

package/src/theme/DocVersionBanner/index.tsx

@@ -13,7 +13,7 @@ import {
   useActivePlugin,
   useDocVersionSuggestions,
   type GlobalVersion,
-} from '@theme/hooks/useDocs';
+} from '@docusaurus/plugin-content-docs/client';
 import {
   ThemeClassNames,
   useDocsPreferredVersion,

package/src/theme/Layout/index.tsx

@@ -15,8 +15,7 @@ import Footer from '@theme/Footer';
 import LayoutProviders from '@theme/LayoutProviders';
 import LayoutHead from '@theme/LayoutHead';
 import type {Props} from '@theme/Layout';
-import useKeyboardNavigation from '@theme/hooks/useKeyboardNavigation';
-import {ThemeClassNames} from '@docusaurus/theme-common';
+import {ThemeClassNames, useKeyboardNavigation} from '@docusaurus/theme-common';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import './styles.css';
 

package/src/theme/LayoutProviders/index.tsx

@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
-import ThemeProvider from '@theme/ThemeProvider';
-import UserPreferencesProvider from '@theme/UserPreferencesProvider';
 import {
+  ColorModeProvider,
+  TabGroupChoiceProvider,
   AnnouncementBarProvider,
   DocsPreferredVersionContextProvider,
   MobileSecondaryMenuProvider,
@@ -18,9 +18,9 @@ import type {Props} from '@theme/LayoutProviders';
 
 export default function LayoutProviders({children}: Props): JSX.Element {
   return (
-    <ThemeProvider>
+    <ColorModeProvider>
       <AnnouncementBarProvider>
-        <UserPreferencesProvider>
+        <TabGroupChoiceProvider>
           <ScrollControllerProvider>
             <DocsPreferredVersionContextProvider>
               <MobileSecondaryMenuProvider>
@@ -28,8 +28,8 @@ export default function LayoutProviders({children}: Props): JSX.Element {
               </MobileSecondaryMenuProvider>
             </DocsPreferredVersionContextProvider>
           </ScrollControllerProvider>
-        </UserPreferencesProvider>
+        </TabGroupChoiceProvider>
       </AnnouncementBarProvider>
-    </ThemeProvider>
+    </ColorModeProvider>
   );
 }

package/src/theme/Navbar/index.tsx

@@ -10,17 +10,17 @@ import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import SearchBar from '@theme/SearchBar';
 import Toggle from '@theme/Toggle';
-import useThemeContext from '@theme/hooks/useThemeContext';
 import {
   useThemeConfig,
   useMobileSecondaryMenuRenderer,
   usePrevious,
   useHistoryPopHandler,
+  useHideableNavbar,
+  useLockBodyScroll,
+  useWindowSize,
+  useColorMode,
 } from '@docusaurus/theme-common';
-import useHideableNavbar from '@theme/hooks/useHideableNavbar';
-import useLockBodyScroll from '@theme/hooks/useLockBodyScroll';
-import useWindowSize from '@theme/hooks/useWindowSize';
-import {useActivePlugin} from '@theme/hooks/useDocs';
+import {useActivePlugin} from '@docusaurus/plugin-content-docs/client';
 import NavbarItem, {type Props as NavbarItemConfig} from '@theme/NavbarItem';
 import Logo from '@theme/Logo';
 import IconMenu from '@theme/IconMenu';
@@ -88,7 +88,7 @@ function useColorModeToggle() {
   const {
     colorMode: {disableSwitch},
   } = useThemeConfig();
-  const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
+  const {isDarkTheme, setLightTheme, setDarkTheme} = useColorMode();
   const toggle = useCallback(
     (e) => (e.target.checked ? setDarkTheme() : setLightTheme()),
     [setLightTheme, setDarkTheme],