diff --git a/packages/react-docs/components/CodeBlock.js b/packages/react-docs/components/CodeBlock.js
index c06479b30c..5e0c6361ad 100644
--- a/packages/react-docs/components/CodeBlock.js
+++ b/packages/react-docs/components/CodeBlock.js
@@ -119,7 +119,7 @@ const CodeBlock = ({
   }, []);
   const language = React.isValidElement(children)
     ? ensureString(children.props.className).replace(/language-/, '')
-    : null;
+    : '';
 
   noInline = boolean(noInline);
 
diff --git a/packages/react-docs/pages/components/color-mode/dark-mode.js b/packages/react-docs/pages/components/color-mode/dark-mode.js
new file mode 100644
index 0000000000..e65f10cb1d
--- /dev/null
+++ b/packages/react-docs/pages/components/color-mode/dark-mode.js
@@ -0,0 +1,32 @@
+import {
+  Box,
+  DarkMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The color mode is set to {colorMode}
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <DarkMode>
+    <Component />
+  </DarkMode>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-mode/dark-mode.page.mdx b/packages/react-docs/pages/components/color-mode/dark-mode.page.mdx
index c1eb9d22d6..a5ae6cf9db 100644
--- a/packages/react-docs/pages/components/color-mode/dark-mode.page.mdx
+++ b/packages/react-docs/pages/components/color-mode/dark-mode.page.mdx
@@ -10,29 +10,7 @@ import { DarkMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The color mode is set to {colorMode}
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <DarkMode>
-    <Example />
-  </DarkMode>
-);
-```
+{render('./dark-mode')}
 
 ## Props
 
diff --git a/packages/react-docs/pages/components/color-mode/inverted-mode-tooltip.js b/packages/react-docs/pages/components/color-mode/inverted-mode-tooltip.js
new file mode 100644
index 0000000000..a0ff5e4faa
--- /dev/null
+++ b/packages/react-docs/pages/components/color-mode/inverted-mode-tooltip.js
@@ -0,0 +1,25 @@
+import {
+  Divider,
+  InvertedMode,
+  Text,
+  Tooltip,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => {
+  return (
+    <Tooltip
+      label={(
+        <InvertedMode width={80} py="1x">
+          <Text>Title</Text>
+          <Divider my="2x" />
+          <Text>Content</Text>
+        </InvertedMode>
+      )}
+    >
+      <Text display="inline-block">Hover Me</Text>
+    </Tooltip>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-mode/inverted-mode.js b/packages/react-docs/pages/components/color-mode/inverted-mode.js
new file mode 100644
index 0000000000..395296ee07
--- /dev/null
+++ b/packages/react-docs/pages/components/color-mode/inverted-mode.js
@@ -0,0 +1,32 @@
+import {
+  Box,
+  InvertedMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The current color mode is inverted to {colorMode} mode
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <InvertedMode>
+    <Component />
+  </InvertedMode>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx b/packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx
index a4937133cc..087927da30 100644
--- a/packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx
+++ b/packages/react-docs/pages/components/color-mode/inverted-mode.page.mdx
@@ -10,47 +10,13 @@ import { InvertedMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The current color mode is inverted to {colorMode} mode
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <InvertedMode>
-    <Example />
-  </InvetedMode>
-);
-```
+{render('./inverted-mode')}
 
 ### Rendering tooltip label
 
 The `InvertedMode` component is useful when you want to render a tooltip label in inverted mode.
 
-```jsx
-<Tooltip
-  label={(
-    <InvertedMode width={80} py="1x">
-      <Text>Title</Text>
-      <Divider my="2x" />
-      <Text>Content</Text>
-    </InvertedMode>
-  )}
->
-  <Text display="inline-block">Hover Me</Text>
-</Tooltip>
-```
+{render('./inverted-mode-tooltip')}
 
 ## Props
 
diff --git a/packages/react-docs/pages/components/color-mode/light-mode.js b/packages/react-docs/pages/components/color-mode/light-mode.js
new file mode 100644
index 0000000000..081bbd1287
--- /dev/null
+++ b/packages/react-docs/pages/components/color-mode/light-mode.js
@@ -0,0 +1,32 @@
+import {
+  Box,
+  LightMode,
+  Text,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const Component = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+
+  return (
+    <Box
+      backgroundColor={colorStyle.background.secondary}
+      color={colorStyle.color.primary}
+    >
+      <Text px="4x" py="3x">
+        The color mode is set to {colorMode}
+      </Text>
+    </Box>
+  );
+};
+
+const App = () => (
+  <LightMode>
+    <Component />
+  </LightMode>
+);
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-mode/light-mode.page.mdx b/packages/react-docs/pages/components/color-mode/light-mode.page.mdx
index 55428d2d97..a8bdd58a16 100644
--- a/packages/react-docs/pages/components/color-mode/light-mode.page.mdx
+++ b/packages/react-docs/pages/components/color-mode/light-mode.page.mdx
@@ -10,29 +10,7 @@ import { LightMode } from '@tonic-ui/react';
 
 ## Usage
 
-```jsx noInline
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle] = useColorStyle({ colorMode });
-
-  return (
-    <Box
-      backgroundColor={colorStyle.background.secondary}
-      color={colorStyle.color.primary}
-    >
-      <Text px="4x" py="3x">
-        The color mode is set to {colorMode}
-      </Text>
-    </Box>
-  );
-}
-
-render(
-  <LightMode>
-    <Example />
-  </LightMode>
-);
-```
+{render('./light-mode')}
 
 ## Props
 
diff --git a/packages/react-docs/pages/components/color-mode/color-mode.js b/packages/react-docs/pages/components/color-mode/useColorMode.js
similarity index 100%
rename from packages/react-docs/pages/components/color-mode/color-mode.js
rename to packages/react-docs/pages/components/color-mode/useColorMode.js
diff --git a/packages/react-docs/pages/components/color-mode/useColorMode.page.mdx b/packages/react-docs/pages/components/color-mode/useColorMode.page.mdx
index 43f3340e32..6043ee0588 100644
--- a/packages/react-docs/pages/components/color-mode/useColorMode.page.mdx
+++ b/packages/react-docs/pages/components/color-mode/useColorMode.page.mdx
@@ -53,4 +53,4 @@ Returns an array with the current color mode and a function to change the color
 
 ## Demos
 
-{render('./color-mode')}
+{render('./useColorMode')}
diff --git a/packages/react-docs/pages/components/color-style/useColorStyle.js b/packages/react-docs/pages/components/color-style/useColorStyle.js
new file mode 100644
index 0000000000..d558d694d8
--- /dev/null
+++ b/packages/react-docs/pages/components/color-style/useColorStyle.js
@@ -0,0 +1,88 @@
+import {
+  Box,
+  Divider,
+  Stack,
+  useColorMode,
+  useColorStyle,
+} from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => {
+  const [colorMode] = useColorMode();
+  const [colorStyle] = useColorStyle({ colorMode });
+  const invertedPrimaryColor = {
+    dark: 'black:primary',
+    light: 'white:primary',
+  }[colorMode];
+
+  return (
+    <Stack spacing="4x" fontFamily="mono">
+      Background
+      <Box
+        sx={{
+          '> *': {
+            px: '3x',
+            py: '2x',
+          },
+        }}
+      >
+        <Box backgroundColor={colorStyle.background.primary}>
+          colorStyle.background.primary
+        </Box>
+        <Box backgroundColor={colorStyle.background.secondary}>
+          colorStyle.background.secondary
+        </Box>
+        <Box backgroundColor={colorStyle.background.tertiary}>
+          colorStyle.background.tertiary
+        </Box>
+        <Box backgroundColor={colorStyle.background.inverted} color={invertedPrimaryColor}>
+          colorStyle.background.inverted
+        </Box>
+        <Box backgroundColor={colorStyle.background.highlighted}>
+          colorStyle.background.highlighted
+        </Box>
+        <Box backgroundColor={colorStyle.background.selected}>
+          colorStyle.background.selected
+        </Box>
+      </Box>
+      <Divider />
+      <Box
+        sx={{
+          '> *': {
+            px: '3x',
+          },
+          '> *:not(:last-child)': {
+            pb: '2x',
+          },
+        }}
+      >
+        <Box color={colorStyle.color.primary}>
+          colorStyle.color.primary
+        </Box>
+        <Box color={colorStyle.color.secondary}>
+          colorStyle.color.secondary
+        </Box>
+        <Box color={colorStyle.color.tertiary}>
+          colorStyle.color.tertiary
+        </Box>
+        <Box color={colorStyle.color.disabled}>
+          colorStyle.color.disabled
+        </Box>
+        <Box color={colorStyle.color.success}>
+          colorStyle.color.success
+        </Box>
+        <Box color={colorStyle.color.info}>
+          colorStyle.color.info
+        </Box>
+        <Box color={colorStyle.color.warning}>
+          colorStyle.color.warning
+        </Box>
+        <Box color={colorStyle.color.error}>
+          colorStyle.color.error
+        </Box>
+      </Box>
+    </Stack>
+  );
+};
+
+export default App;
diff --git a/packages/react-docs/pages/components/color-style/useColorStyle.page.mdx b/packages/react-docs/pages/components/color-style/useColorStyle.page.mdx
index 23d813988f..fae1ff775d 100644
--- a/packages/react-docs/pages/components/color-style/useColorStyle.page.mdx
+++ b/packages/react-docs/pages/components/color-style/useColorStyle.page.mdx
@@ -42,82 +42,4 @@ Returns an array with the color style object and a function to set the color sty
 
 ## Demos
 
-```jsx
-function Example() {
-  const [colorMode] = useColorMode();
-  const [colorStyle, setColorStyle] = useColorStyle({ colorMode });
-  const invertedPrimaryColor = {
-    dark: 'black:primary',
-    light: 'white:primary',
-  }[colorMode];
-
-  return (
-    <Stack spacing="4x" fontFamily="mono">
-      Background
-      <Box
-        sx={{
-          '> *': {
-            px: '3x',
-            py: '2x',
-          },
-        }}
-      >
-        <Box backgroundColor={colorStyle.background.primary}>
-          colorStyle.background.primary
-        </Box>
-        <Box backgroundColor={colorStyle.background.secondary}>
-          colorStyle.background.secondary
-        </Box>
-        <Box backgroundColor={colorStyle.background.tertiary}>
-          colorStyle.background.tertiary
-        </Box>
-        <Box backgroundColor={colorStyle.background.inverted} color={invertedPrimaryColor}>
-          colorStyle.background.inverted
-        </Box>
-        <Box backgroundColor={colorStyle.background.highlighted}>
-          colorStyle.background.highlighted
-        </Box>
-        <Box backgroundColor={colorStyle.background.selected}>
-          colorStyle.background.selected
-        </Box>
-      </Box>
-      <Divider />
-      <Box
-        sx={{
-          '> *': {
-            px: '3x',
-          },
-          '> *:not(:last-child)': {
-            pb: '2x',
-          },
-        }}
-      >
-        <Box color={colorStyle.color.primary}>
-          colorStyle.color.primary
-        </Box>
-        <Box color={colorStyle.color.secondary}>
-          colorStyle.color.secondary
-        </Box>
-        <Box color={colorStyle.color.tertiary}>
-          colorStyle.color.tertiary
-        </Box>
-        <Box color={colorStyle.color.disabled}>
-          colorStyle.color.disabled
-        </Box>
-        <Box color={colorStyle.color.success}>
-          colorStyle.color.success
-        </Box>
-        <Box color={colorStyle.color.info}>
-          colorStyle.color.info
-        </Box>
-        <Box color={colorStyle.color.warning}>
-          colorStyle.color.warning
-        </Box>
-        <Box color={colorStyle.color.error}>
-          colorStyle.color.error
-        </Box>
-      </Box>
-    </Stack>
-  );
-}
-```
+{render('./useColorStyle')}
diff --git a/packages/react/src/color-mode/useColorMode.js b/packages/react/src/color-mode/useColorMode.js
index e9432deb5e..48165d12e6 100644
--- a/packages/react/src/color-mode/useColorMode.js
+++ b/packages/react/src/color-mode/useColorMode.js
@@ -1,5 +1,5 @@
 import { ensurePlainObject } from 'ensure-type';
-import { useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import { ColorModeContext } from './context';
 
 const useColorMode = () => {
@@ -15,14 +15,14 @@ const useColorMode = () => {
   const { colorMode, onChange } = ensurePlainObject(context);
 
   const getter = colorMode;
-  const setter = (value) => {
+  const setter = useCallback((value) => {
     if (typeof value === 'function') {
       value = value(colorMode);
     }
 
     const nextColorMode = value;
     onChange(nextColorMode);
-  };
+  }, [colorMode, onChange]);
 
   return [getter, setter];
 };
diff --git a/packages/react/src/color-style/useColorStyle.js b/packages/react/src/color-style/useColorStyle.js
index f981e47829..fbd544bf2f 100644
--- a/packages/react/src/color-style/useColorStyle.js
+++ b/packages/react/src/color-style/useColorStyle.js
@@ -1,5 +1,5 @@
 import { ensurePlainObject } from 'ensure-type';
-import { useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import { ColorModeContext } from '../color-mode/context';
 import { ColorStyleContext } from './context';
 
@@ -23,7 +23,7 @@ const useColorStyle = (options) => {
   }
 
   const getter = ensurePlainObject(colorStyle[colorMode]);
-  const setter = (value) => {
+  const setter = useCallback((value) => {
     if (typeof value === 'function') {
       value = value(colorStyle);
     }
@@ -33,7 +33,7 @@ const useColorStyle = (options) => {
       [colorMode]: ensurePlainObject(value),
     };
     onChange(nextColorStyle);
-  };
+  }, [colorMode, colorStyle, onChange]);
 
   return [getter, setter];
 };