diff --git a/apps/web/src/oj/rank/palette.ts b/apps/web/src/oj/rank/palette.ts
index 0532c8b..f8237b8 100644
--- a/apps/web/src/oj/rank/palette.ts
+++ b/apps/web/src/oj/rank/palette.ts
@@ -1,4 +1,4 @@
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 
 /**
  * 排名页的几种颜色（设计稿「排名重设计」G1）。用户说「颜色可以保留」：你绿、前一名蓝、
diff --git a/apps/web/src/oj/submission/components/CodeView.vue b/apps/web/src/oj/submission/components/CodeView.vue
index f9481eb..784c92b 100644
--- a/apps/web/src/oj/submission/components/CodeView.vue
+++ b/apps/web/src/oj/submission/components/CodeView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui'
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 
 /**
  * 只读的代码区：行号 + 高亮 + 可选地标红一行（编译失败 / 运行时错误报了行号时）。
diff --git a/apps/web/src/shared/components/RankAvatar.vue b/apps/web/src/shared/components/RankAvatar.vue
index 1e58237..7c4af50 100644
--- a/apps/web/src/shared/components/RankAvatar.vue
+++ b/apps/web/src/shared/components/RankAvatar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 import { rgba } from 'shared/composables/tone'
 import { displayName } from '@oj2/contract'
 
diff --git a/apps/web/src/shared/composables/chartTheme.ts b/apps/web/src/shared/composables/chartTheme.ts
index c3ad977..ede0b1a 100644
--- a/apps/web/src/shared/composables/chartTheme.ts
+++ b/apps/web/src/shared/composables/chartTheme.ts
@@ -1,4 +1,4 @@
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 import { Chart as ChartJS } from 'chart.js'
 
 /**
diff --git a/apps/web/src/shared/composables/dark.ts b/apps/web/src/shared/composables/dark.ts
new file mode 100644
index 0000000..27d7c31
--- /dev/null
+++ b/apps/web/src/shared/composables/dark.ts
@@ -0,0 +1,16 @@
+import { createGlobalState, useDark as useVueUseDark } from '@vueuse/core'
+
+/**
+ * 全站只有一个 `useDark()` 实例。**别再从 `@vueuse/core` 直接取 useDark** ——
+ * auto-import 已经把 `useDark` 指到这里（apps/web/vite.config.ts 的 priority）。
+ *
+ * VueUse 的 useDark 每个实例挂载时都要把 `<html>` 的 class 「同步」一遍，同步的写法是
+ * 往 `<head>` 插一段关掉过渡的 `<style>`、`getComputedStyle()` 逼浏览器当场重算整页样式、
+ * 再删掉。亮色模式下它那句「没什么要改就跳过」永远不成立（要摘的 `dark` 本来就不在，它也算
+ * 一次改动），所以**每个实例挂载一次就是一次整页样式重算**。
+ *
+ * 提交列表每行的结果胶囊（StatusPill → useTone）都调它：一页 30 行就是 30 次，翻页、
+ * 切筛选再来 30 次，右栏换一条又是三四次。2026-11 实测（生产构建、CPU 降速 6 倍）首屏
+ * 光这一处就占了 1.3 秒。全站共用一个之后只在第一次挂载时同步，后面的调用都是读同一个 ref。
+ */
+export const useDark = createGlobalState(() => useVueUseDark())
diff --git a/apps/web/src/shared/composables/darkTransition.ts b/apps/web/src/shared/composables/darkTransition.ts
index bae2713..71ef2b5 100644
--- a/apps/web/src/shared/composables/darkTransition.ts
+++ b/apps/web/src/shared/composables/darkTransition.ts
@@ -1,4 +1,4 @@
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 
 /**
  * 圆环从哪儿开始扩散。正常点击就用指针落点；键盘触发（Enter / 空格）时浏览器给的
diff --git a/apps/web/src/shared/composables/rarity.ts b/apps/web/src/shared/composables/rarity.ts
index 0bbe2c9..d744b0a 100644
--- a/apps/web/src/shared/composables/rarity.ts
+++ b/apps/web/src/shared/composables/rarity.ts
@@ -1,4 +1,4 @@
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 import { computed } from 'vue'
 import { RARITY_TEXT_COLOR } from 'utils/constants'
 
diff --git a/apps/web/src/shared/composables/tone.ts b/apps/web/src/shared/composables/tone.ts
index 361ad2d..06afe11 100644
--- a/apps/web/src/shared/composables/tone.ts
+++ b/apps/web/src/shared/composables/tone.ts
@@ -1,5 +1,5 @@
 import { useThemeVars } from 'naive-ui'
-import { useDark } from '@vueuse/core'
+import { useDark } from 'shared/composables/dark'
 
 export type Tone = 'success' | 'error' | 'warning' | 'info' | 'default'
 
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 6e1b529..ecb523f 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -93,6 +93,11 @@ export default defineConfig(() => {
           'vue-router',
           '@vueuse/core',
           'pinia',
+          // 盖掉上面 @vueuse/core 的同名项：全站共用一个实例，原因见 shared/composables/dark.ts
+          {
+            from: 'shared/composables/dark',
+            imports: [{ name: 'useDark', priority: 10 }],
+          },
           {
             'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
           },