fix: 重写暗色模式覆盖,基于真实 DOM 类名

问题: 之前的 CSS 覆盖使用推测的 Tailwind/Vuetify 类名,
但 Halo 2.25 实际使用 UnoCSS + BEM 语义类, 导致大部分
页面元素未切换颜色。

修复:
- 新增 halo-core.css, 覆盖真实类名:
  .page-header, .card-wrapper, .entity-field-title,
  .pagination, .tag-default, .modal-*, .description-item-*,
  .toast-container, .markdown-body, html/body 根背景
- 新增 injector.ts, 通过 MutationObserver 将 ThemeToggle
  挂载到侧边栏 .sidebar__profile 上方
- 基于 demo.halocms.site 真实环境扫描验证 9 个页面
  零白色残留、零不可见文字

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-06 22:49:03 +08:00
parent 2a37c36894
commit 42df299791
5 changed files with 329 additions and 5 deletions
+6 -2
View File
@@ -1,7 +1,11 @@
import { definePlugin } from '@halo-dev/ui-shared'
import { IconMoon } from '@halo-dev/components'
import { IconPalette } from '@halo-dev/components'
import { markRaw } from 'vue'
import './styles/index.css'
import { injectThemeToggle } from './injector'
// 在插件加载后将切换器注入到侧边栏
injectThemeToggle()
export default definePlugin({
components: {},
@@ -18,7 +22,7 @@ export default definePlugin({
menu: {
name: '深色模式',
group: '偏好设置',
icon: markRaw(IconMoon),
icon: markRaw(IconPalette),
priority: 50,
},
},