diff --git a/frontend/src/components/pure/navbar/index.vue b/frontend/src/components/pure/navbar/index.vue
index e802cafce8..ff7e2d1624 100644
--- a/frontend/src/components/pure/navbar/index.vue
+++ b/frontend/src/components/pure/navbar/index.vue
@@ -35,18 +35,6 @@
           </template>
         </a-dropdown>
       </li>
-      <li>
-        <a-tooltip
-          :content="theme === 'light' ? $t('settings.navbar.theme.toDark') : $t('settings.navbar.theme.toLight')"
-        >
-          <a-button class="nav-btn" type="outline" :shape="'circle'" @click="handleToggleTheme">
-            <template #icon>
-              <icon-moon-fill v-if="theme === 'dark'" />
-              <icon-sun-fill v-else />
-            </template>
-          </a-button>
-        </a-tooltip>
-      </li>
       <li>
         <a-tooltip :content="$t('settings.navbar.alerts')">
           <div class="message-box-trigger">
@@ -157,21 +145,6 @@
     return appStore.theme;
   });
   const topMenu = computed(() => appStore.topMenu && appStore.menu);
-  const isDark = useDark({
-    selector: 'body',
-    attribute: 'MS-theme',
-    valueDark: 'dark',
-    valueLight: 'light',
-    storageKey: 'MS-theme',
-    onChanged(dark: boolean) {
-      // overridden default behavior
-      appStore.toggleTheme(dark);
-    },
-  });
-  const toggleTheme = useToggle(isDark);
-  const handleToggleTheme = () => {
-    toggleTheme();
-  };
   // const setVisible = () => {
   //   appStore.updateSettings({ globalSettings: true });
   // };
diff --git a/frontend/src/hooks/useChartOption.ts b/frontend/src/hooks/useChartOption.ts
deleted file mode 100644
index f7a16dffba..0000000000
--- a/frontend/src/hooks/useChartOption.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { computed } from 'vue';
-import { EChartsOption } from 'echarts';
-import { useAppStore } from '@/store';
-
-// for code hints
-// import { SeriesOption } from 'echarts';
-// Because there are so many configuration items, this provides a relatively convenient code hint.
-// When using vue, pay attention to the reactive issues. It is necessary to ensure that corresponding functions can be triggered, TypeScript does not report errors, and code writing is convenient.
-interface optionsFn {
-  (isDark: boolean): EChartsOption;
-}
-
-/**
- * echarts 配置
- */
-export default function useChartOption(sourceOption: optionsFn) {
-  const appStore = useAppStore();
-  const isDark = computed(() => {
-    return appStore.theme === 'dark';
-  });
-  // echarts support https://echarts.apache.org/zh/theme-builder.html
-  // It's not used here
-  // TODO echarts themes
-  const chartOption = computed<EChartsOption>(() => {
-    return sourceOption(isDark.value);
-  });
-  return {
-    chartOption,
-  };
-}
diff --git a/frontend/src/hooks/useThemes.ts b/frontend/src/hooks/useThemes.ts
deleted file mode 100644
index 7357265953..0000000000
--- a/frontend/src/hooks/useThemes.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { computed } from 'vue';
-import { useAppStore } from '@/store';
-
-/**
- * 暗黑模式相关
- * @returns 调用方法
- */
-export default function useThemes() {
-  const appStore = useAppStore();
-  const isDark = computed(() => {
-    return appStore.theme === 'dark';
-  });
-  return {
-    isDark,
-  };
-}
diff --git a/frontend/src/locale/en-US/settings.ts b/frontend/src/locale/en-US/settings.ts
index c7df970981..a52095e8ce 100644
--- a/frontend/src/locale/en-US/settings.ts
+++ b/frontend/src/locale/en-US/settings.ts
@@ -6,8 +6,6 @@ export default {
   'settings.language': 'Language',
   'settings.navbar': 'Navbar',
   'settings.menuWidth': 'Menu Width (px)',
-  'settings.navbar.theme.toLight': 'Click to use light mode',
-  'settings.navbar.theme.toDark': 'Click to use dark mode',
   'settings.navbar.screen.toFull': 'Click to switch to full screen mode',
   'settings.navbar.screen.toExit': 'Click to exit the full screen mode',
   'settings.navbar.alerts': 'alerts',
diff --git a/frontend/src/locale/zh-CN/settings.ts b/frontend/src/locale/zh-CN/settings.ts
index 799c81c472..01873f1e3e 100644
--- a/frontend/src/locale/zh-CN/settings.ts
+++ b/frontend/src/locale/zh-CN/settings.ts
@@ -6,8 +6,6 @@ export default {
   'settings.language': '语言',
   'settings.navbar': '导航栏',
   'settings.menuWidth': '菜单宽度 (px)',
-  'settings.navbar.theme.toLight': '点击切换为亮色模式',
-  'settings.navbar.theme.toDark': '点击切换为暗黑模式',
   'settings.navbar.screen.toFull': '点击切换全屏模式',
   'settings.navbar.screen.toExit': '点击退出全屏模式',
   'settings.navbar.alerts': '消息通知',
diff --git a/frontend/src/store/modules/app/index.ts b/frontend/src/store/modules/app/index.ts
index 64d5aed7cf..40adab2e82 100644
--- a/frontend/src/store/modules/app/index.ts
+++ b/frontend/src/store/modules/app/index.ts
@@ -33,20 +33,6 @@ const useAppStore = defineStore('app', {
       // @ts-ignore-next-line
       this.$patch(partial);
     },
-
-    /**
-     * 切换暗黑模式
-     * @param dark 是否暗黑模式
-     */
-    toggleTheme(dark: boolean) {
-      if (dark) {
-        this.theme = 'dark';
-        document.body.setAttribute('MS-theme', 'dark');
-      } else {
-        this.theme = 'light';
-        document.body.removeAttribute('MS-theme');
-      }
-    },
     /**
      * 切换显示模式
      * @param device 显示模式：mobile | desktop