diff --git a/packages/themed/src/config/ThemeProvider.tsx b/packages/themed/src/config/ThemeProvider.tsx
index c9fe425be6..b4d17967da 100644
--- a/packages/themed/src/config/ThemeProvider.tsx
+++ b/packages/themed/src/config/ThemeProvider.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import deepmerge from 'deepmerge';
 import { Colors, lightColors, darkColors } from './colors';
 import {
@@ -146,31 +146,24 @@ interface UseTheme {
 }
 
 export const useTheme = (): UseTheme => {
-  const {
-    theme: { components, ...restTheme },
-    replaceTheme,
-    updateTheme,
-  } = useContext(ThemeContext);
-
-  return {
-    theme: restTheme,
-    replaceTheme,
-    updateTheme,
-  };
+  return useContext(ThemeContext);
 };
 
 export const useThemeMode = () => {
-  const {
-    updateTheme,
-    theme: { mode },
-  } = useTheme();
+  const themeContext = useContext(ThemeContext);
 
   const setMode = useCallback(
     (colorMode: ThemeMode) => {
-      updateTheme({ mode: colorMode });
+      themeContext?.updateTheme({ mode: colorMode });
     },
-    [updateTheme]
+    [themeContext]
   );
 
-  return { mode, setMode };
+  return useMemo(
+    () => ({
+      mode: themeContext?.theme?.mode,
+      setMode,
+    }),
+    [setMode, themeContext?.theme?.mode]
+  );
 };
diff --git a/website/docs/customization/1.themeprovider.mdx b/website/docs/customization/1.themeprovider.mdx
index 789b11259c..17926c2a62 100644
--- a/website/docs/customization/1.themeprovider.mdx
+++ b/website/docs/customization/1.themeprovider.mdx
@@ -163,10 +163,11 @@ const theme = createTheme({
 
 const ColorScheme = ({ children }) => {
   const colorMode = useColorScheme();
-  const { theme, setThemeMode } = useTheme();
+  const { theme } = useTheme();
+  const { setMode } = useThemeMode();
 
   React.useEffect(() => {
-    setThemeMode(colorMode);
+    setMode(colorMode);
   }, [colorMode]);
 
   return (