feat(v2): Error when hooks depends on context is used outside of Layout (#2974)

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

@@ -7,10 +7,6 @@
 
 import React from 'react';
 
-const ThemeContext = React.createContext({
+const ThemeContext = React.createContext();
-  isDarkTheme: false,
-  setLightTheme: () => {},
-  setDarkTheme: () => {},
-});
 
 export default ThemeContext;

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

@@ -7,14 +7,6 @@
 
 import {createContext} from 'react';
 
-const UserPreferencesContext = createContext({
+const UserPreferencesContext = createContext();
-  // Tab group choice.
-  tabGroupChoices: {},
-  setTabGroupChoices: () => {},
-
-  // Announcement bar.
-  isAnnouncementBarClosed: false,
-  closeAnnouncementBar: () => {},
-});
 
 export default UserPreferencesContext;

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

@@ -10,7 +10,13 @@ import {useContext} from 'react';
 import ThemeContext from '@theme/ThemeContext';
 
 function useThemeContext() {
-  return useContext(ThemeContext);
+  const context = useContext(ThemeContext);
+  if (context == null) {
+    throw new Error(
+      '`useThemeContext` is used outside of `Layout` Component. See https://v2.docusaurus.io/docs/theme-classic#usethemecontext.',
+    );
+  }
+  return context;
 }
 
 export default useThemeContext;

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

@@ -10,7 +10,13 @@ import {useContext} from 'react';
 import UserPreferencesContext from '@theme/UserPreferencesContext';
 
 function useUserPreferencesContext() {
-  return useContext(UserPreferencesContext);
+  const context = useContext(UserPreferencesContext);
+  if (context == null) {
+    throw new Error(
+      '`useUserPreferencesContext` is used outside of `Layout` Component.',
+    );
+  }
+  return context;
 }
 
 export default useUserPreferencesContext;