diff --git a/www/src/pages/extensions/basic-setup/index.tsx b/www/src/pages/extensions/basic-setup/index.tsx
index 8a5a396b5..80e2cc33d 100644
--- a/www/src/pages/extensions/basic-setup/index.tsx
+++ b/www/src/pages/extensions/basic-setup/index.tsx
@@ -1,9 +1,10 @@
-import { FC, PropsWithChildren, useEffect, useState } from 'react';
+import { FC, PropsWithChildren, useState } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import CodeMirror, { ReactCodeMirrorProps, BasicSetupOptions } from '@uiw/react-codemirror';
+import CodeMirror, { BasicSetupOptions } from '@uiw/react-codemirror';
 import data from '@uiw/codemirror-extensions-basic-setup/README.md';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import styled from 'styled-components';
+import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '../';
 
 const Label = styled.label`
@@ -27,15 +28,7 @@ const Warpper = styled.div`
 `;
 
 export const BasicSetupDoc = () => {
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
-
+  const { theme } = useTheme();
   const [basicSetup, setBasicSetup] = useState<BasicSetupOptions>({});
   return (
     <PageWarpper>
diff --git a/www/src/pages/extensions/classname/ClassNameDemo.tsx b/www/src/pages/extensions/classname/ClassNameDemo.tsx
index 3b66e430e..176929c86 100644
--- a/www/src/pages/extensions/classname/ClassNameDemo.tsx
+++ b/www/src/pages/extensions/classname/ClassNameDemo.tsx
@@ -6,7 +6,7 @@ import { EditorView } from '@codemirror/view';
 import { useTheme } from '../../../utils/useTheme';
 
 export const ClassNameDemo = () => {
-  const theme = useTheme();
+  const { theme } = useTheme();
 
   const themeDemo = EditorView.baseTheme({
     '&dark .first-line': { backgroundColor: 'red' },
diff --git a/www/src/pages/extensions/color/index.tsx b/www/src/pages/extensions/color/index.tsx
index d85469635..8a5952b44 100644
--- a/www/src/pages/extensions/color/index.tsx
+++ b/www/src/pages/extensions/color/index.tsx
@@ -2,22 +2,16 @@ import MarkdownPreview from '@uiw/react-markdown-preview';
 import data from '@uiw/codemirror-extensions-color/README.md';
 import { color } from '@uiw/codemirror-extensions-color';
 import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { useTheme } from '../../../utils/useTheme';
 import { codeSample } from './code';
 import { PageWarpper } from '../';
 
 export const ColorDoc = () => {
   const [modeType, setModeType] = useState<'readOnly' | 'editable'>('readOnly');
   const [readOnly, setReadOnly] = useState(false);
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
+  const { theme } = useTheme();
   const porps: ReactCodeMirrorProps = {};
   if (modeType === 'editable') {
     porps.editable = readOnly;
diff --git a/www/src/pages/extensions/events/index.tsx b/www/src/pages/extensions/events/index.tsx
index e59411ded..0fd800509 100644
--- a/www/src/pages/extensions/events/index.tsx
+++ b/www/src/pages/extensions/events/index.tsx
@@ -1,10 +1,11 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import data from '@uiw/codemirror-extensions-events/README.md';
 import * as events from '@uiw/codemirror-extensions-events';
-import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import CodeMirror from '@uiw/react-codemirror';
 import styled from 'styled-components';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '../';
 
 const Info = styled.div`
@@ -14,14 +15,7 @@ const Info = styled.div`
 export const EventsDoc = () => {
   const [scrollTop, setScrollTop] = useState(0);
   const [eventType, setEventType] = useState('');
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
+  const { theme } = useTheme();
 
   return (
     <PageWarpper>
diff --git a/www/src/pages/extensions/hyper-link/index.tsx b/www/src/pages/extensions/hyper-link/index.tsx
index b845479c6..b0eeb5543 100644
--- a/www/src/pages/extensions/hyper-link/index.tsx
+++ b/www/src/pages/extensions/hyper-link/index.tsx
@@ -1,21 +1,14 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import data from '@uiw/codemirror-extensions-hyper-link/README.md';
 import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
-import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { useEffect, useState } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { useTheme } from '../../../utils/useTheme';
 import { markdownString } from './codeSample';
 import { PageWarpper } from '../';
 
 export const HyperLinkDoc = () => {
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
+  const { theme } = useTheme();
 
   return (
     <PageWarpper>
diff --git a/www/src/pages/extensions/langs/index.tsx b/www/src/pages/extensions/langs/index.tsx
index 880031414..ac88b6548 100644
--- a/www/src/pages/extensions/langs/index.tsx
+++ b/www/src/pages/extensions/langs/index.tsx
@@ -1,24 +1,18 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import data from '@uiw/codemirror-extensions-langs/README.md';
 import { langNames, LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
-import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import CodeMirror from '@uiw/react-codemirror';
 import { useEffect, useState } from 'react';
-import { PageWarpper } from '../';
 import styled from 'styled-components';
+import { useTheme } from '../../../utils/useTheme';
+import { PageWarpper } from '../';
 
 const Toolbar = styled.div`
   padding-bottom: 32px;
 `;
 
 export const LangsDoc = () => {
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
+  const { theme } = useTheme();
 
   const [language, setLanguage] = useState<LanguageName>('markdown');
   const [source, setSource] = useState<string>(data.source);
diff --git a/www/src/pages/extensions/line-numbers-relative/index.tsx b/www/src/pages/extensions/line-numbers-relative/index.tsx
index 87c253408..73880e05c 100644
--- a/www/src/pages/extensions/line-numbers-relative/index.tsx
+++ b/www/src/pages/extensions/line-numbers-relative/index.tsx
@@ -1,20 +1,13 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import data from '@uiw/codemirror-extensions-line-numbers-relative/README.md';
 import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
-import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { useEffect, useState } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '../';
 
 export const LineNumbersRelativeDoc = () => {
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
+  const { theme } = useTheme();
 
   return (
     <PageWarpper>
diff --git a/www/src/pages/extensions/mentions/index.tsx b/www/src/pages/extensions/mentions/index.tsx
index 23d1ec909..e88e9ba1a 100644
--- a/www/src/pages/extensions/mentions/index.tsx
+++ b/www/src/pages/extensions/mentions/index.tsx
@@ -1,9 +1,9 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import data from '@uiw/codemirror-extensions-mentions/README.md';
 import { mentions } from '@uiw/codemirror-extensions-mentions';
-import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { useEffect, useState } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '../';
 
 const users = [
@@ -52,14 +52,7 @@ const users = [
 ];
 
 export const MentionsDoc = () => {
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
+  const { theme } = useTheme();
 
   return (
     <PageWarpper>
diff --git a/www/src/pages/extensions/themes/index.tsx b/www/src/pages/extensions/themes/index.tsx
index 487d378dc..757019d9b 100644
--- a/www/src/pages/extensions/themes/index.tsx
+++ b/www/src/pages/extensions/themes/index.tsx
@@ -1,18 +1,18 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import data from '@uiw/codemirror-themes-all/README.md';
 import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import * as themes from '@uiw/codemirror-themes-all';
 import { langs } from '@uiw/codemirror-extensions-langs';
-import { PageWarpper } from '../';
 import styled from 'styled-components';
+import { useTheme } from '../../../utils/useTheme';
+import { PageWarpper } from '../';
 
 const ToolsWapper = styled.div`
   padding: 0 0 23px 0;
 `;
 
 export const ThemesAllDoc = () => {
-  const dark = document.documentElement.getAttribute('data-color-mode');
   const themesData: Record<string, Omit<ReactCodeMirrorProps['theme'], 'dark' | 'light'>> = {};
   Object.keys(themes)
     .filter((item) => typeof themes[item as keyof typeof themes] !== 'function')
@@ -20,13 +20,7 @@ export const ThemesAllDoc = () => {
       themesData[item] = themes[item as keyof typeof themes];
     });
   const [selectTheme, setSelectTheme] = useState<keyof typeof themesData>();
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
+  const theme = useTheme();
   const themeCurrent = themesData[selectTheme!] ? themesData[selectTheme!] : theme;
   const changeHandle = (ev: React.ChangeEvent<HTMLSelectElement>) => {
     setSelectTheme(ev.target.value as keyof typeof themesData);
diff --git a/www/src/pages/extensions/zebra-stripes/LineNumberDemo.tsx b/www/src/pages/extensions/zebra-stripes/LineNumberDemo.tsx
index 74d53925c..6737f7689 100644
--- a/www/src/pages/extensions/zebra-stripes/LineNumberDemo.tsx
+++ b/www/src/pages/extensions/zebra-stripes/LineNumberDemo.tsx
@@ -1,18 +1,11 @@
 import data from '@uiw/codemirror-extensions-zebra-stripes/README.md';
 import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';
-import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { useEffect, useState } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { useTheme } from '../../../utils/useTheme';
 
 export const LineNumberDemo = () => {
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
+  const { theme } = useTheme();
 
   return (
     <CodeMirror
diff --git a/www/src/pages/extensions/zebra-stripes/index.tsx b/www/src/pages/extensions/zebra-stripes/index.tsx
index a76235b8a..0b77701d2 100644
--- a/www/src/pages/extensions/zebra-stripes/index.tsx
+++ b/www/src/pages/extensions/zebra-stripes/index.tsx
@@ -1,12 +1,13 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import data from '@uiw/codemirror-extensions-zebra-stripes/README.md';
 import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';
-import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { useEffect, useState } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { useState } from 'react';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import styled from 'styled-components';
 import { PageWarpper } from '../';
 import { LineNumberDemo } from './LineNumberDemo';
+import { useTheme } from '../../../utils/useTheme';
 
 const OptionsView = styled.div`
   padding-bottom: 24px;
@@ -15,17 +16,8 @@ const OptionsView = styled.div`
 `;
 
 export const ZebraStripesDoc = () => {
-  const dark = document.documentElement.getAttribute('data-color-mode');
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
-  useEffect(() => {
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
-  }, []);
-
+  const { theme } = useTheme();
   const [step, setStep] = useState(2);
-
   const zebra = zebraStripes({ step: step });
   return (
     <PageWarpper>
diff --git a/www/src/pages/home/Example.tsx b/www/src/pages/home/Example.tsx
index 5a9ac8793..eb4884a71 100644
--- a/www/src/pages/home/Example.tsx
+++ b/www/src/pages/home/Example.tsx
@@ -9,6 +9,7 @@ import * as alls from '@uiw/codemirror-themes-all';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import { Select } from '../../Select';
 import { Options } from '../extensions/basic-setup';
+import { useTheme } from '../../utils/useTheme';
 
 const themeOptions = ['dark', 'light']
   .concat(Object.keys(alls))
@@ -48,12 +49,11 @@ const Warpper = styled.div`
 `;
 
 export default function Example() {
-  const dark = document.documentElement.getAttribute('data-color-mode');
   const [mode, setMode] = useState('javascript');
   const [placeholder, setPlaceholder] = useState('Please enter the code.');
   const [autofocus, setAutofocus] = useState(false);
   const [editable, setEditable] = useState(true);
-  const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>(dark === 'dark' ? 'dark' : 'light');
+  const { theme, setTheme } = useTheme();
   const [code, setCode] = useState('');
   const [extensions, setExtensions] = useState<Extension[]>();
   const [height, setHeight] = useState('500px');
@@ -84,10 +84,6 @@ export default function Example() {
   }
   useEffect(() => {
     handleLangChange('javascript');
-    setTheme(document.documentElement.getAttribute('data-color-mode') === 'dark' ? 'dark' : 'light');
-    document.addEventListener('colorschemechange', (e) => {
-      setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
-    });
   }, []);
   return (
     <Warpper className="wmde-markdown-var">
diff --git a/www/src/utils/useTheme.tsx b/www/src/utils/useTheme.tsx
index c1591365b..a558dd4cf 100644
--- a/www/src/utils/useTheme.tsx
+++ b/www/src/utils/useTheme.tsx
@@ -10,5 +10,5 @@ export function useTheme() {
       setTheme(e.detail.colorScheme as ReactCodeMirrorProps['theme']);
     });
   }, []);
-  return theme;
+  return { theme, setTheme };
 }