Serendipity/halo-dark-mode-plugin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

chore: 提交工作区剩余变更与复查文档

Browse Source
This commit is contained in:
刘航宇
2026-08-08 18:38:42 +08:00
parent d95d17234e
commit 45451c0d49
10 changed files with 125 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/ThemeToggle.vue
+4 -2
View File
@@ -35,7 +35,9 @@ const { isDark, toggle } = useDarkMode()
font: inherit;
cursor: pointer;
border-radius: 0.25rem;
transition: background-color 0.15s, color 0.15s;
transition:
background-color 0.15s,
color 0.15s;
user-select: none;
}
@@ -59,4 +61,4 @@ const { isDark, toggle } = useDarkMode()
font-size: 0.8125rem;
white-space: nowrap;
}
</style>
</style>
ui/src/composables/__tests__/useDarkMode.spec.ts
+1 -1
View File
@@ -103,4 +103,4 @@ describe('useDarkMode', () => {
)
expect(theme.value).toBe('light')
})
})
})
ui/src/composables/useDarkMode.ts
+1 -1
View File
@@ -98,4 +98,4 @@ export function useDarkMode() {
setTheme,
toggle,
}
}
}
ui/src/styles/index.css
+1 -1
View File
@@ -3,4 +3,4 @@
仅保留插件自身 UI 变量；页面暗色转换完全交给 Dark Reader。
============================================================ */
@import './variables.css';
@import './variables.css';
ui/src/styles/variables.css
+43 -43
View File
@@ -6,56 +6,56 @@
/* 说明：data-halo-theme 为兼容性遗留标记，当前已无 CSS 消费方，保留给外部脚本与验证工具。 */
/* ===== 浅色模式（Halo 默认，此处定义为显式回退） ===== */
:root {
--halo-bg-body: oklch(97% 0.005 250);
--halo-bg-sidebar: oklch(100% 0 0);
--halo-bg-content: oklch(97% 0.005 250);
--halo-bg-card: oklch(100% 0 0);
--halo-bg-input: oklch(100% 0 0);
--halo-bg-hover: oklch(95% 0.01 250);
--halo-bg-active: oklch(90% 0.02 160);
--halo-bg-disabled: oklch(95% 0.005 250);
--halo-bg-tooltip: oklch(20% 0.01 250);
--halo-bg-modal: oklch(0% 0 0 / 60%);
--halo-bg-dropdown: oklch(100% 0 0);
--halo-bg-body: oklch(97% 0.005 250);
--halo-bg-sidebar: oklch(100% 0 0);
--halo-bg-content: oklch(97% 0.005 250);
--halo-bg-card: oklch(100% 0 0);
--halo-bg-input: oklch(100% 0 0);
--halo-bg-hover: oklch(95% 0.01 250);
--halo-bg-active: oklch(90% 0.02 160);
--halo-bg-disabled: oklch(95% 0.005 250);
--halo-bg-tooltip: oklch(20% 0.01 250);
--halo-bg-modal: oklch(0% 0 0 / 60%);
--halo-bg-dropdown: oklch(100% 0 0);
--halo-text-primary: oklch(20% 0.01 250);
--halo-text-secondary: oklch(45% 0.01 250);
--halo-text-tertiary: oklch(60% 0.01 250);
--halo-text-link: oklch(45% 0.15 160);
--halo-text-inverse: oklch(100% 0 0);
--halo-text-primary: oklch(20% 0.01 250);
--halo-text-secondary: oklch(45% 0.01 250);
--halo-text-tertiary: oklch(60% 0.01 250);
--halo-text-link: oklch(45% 0.15 160);
--halo-text-inverse: oklch(100% 0 0);
--halo-border-base: oklch(88% 0.01 250);
--halo-border-light: oklch(93% 0.005 250);
--halo-border-input: oklch(80% 0.01 250);
--halo-border-focus: oklch(55% 0.15 160);
--halo-border-base: oklch(88% 0.01 250);
--halo-border-light: oklch(93% 0.005 250);
--halo-border-input: oklch(80% 0.01 250);
--halo-border-focus: oklch(55% 0.15 160);
--halo-accent-primary: oklch(55% 0.14 160);
--halo-accent-primary-hover: oklch(48% 0.15 160);
--halo-accent-primary-text: oklch(100% 0 0);
--halo-accent-danger: oklch(45% 0.18 25);
--halo-accent-danger-hover: oklch(40% 0.19 25);
--halo-accent-success: oklch(50% 0.16 150);
--halo-accent-warning: oklch(60% 0.16 85);
--halo-accent-primary: oklch(55% 0.14 160);
--halo-accent-primary-hover: oklch(48% 0.15 160);
--halo-accent-primary-text: oklch(100% 0 0);
--halo-accent-danger: oklch(45% 0.18 25);
--halo-accent-danger-hover: oklch(40% 0.19 25);
--halo-accent-success: oklch(50% 0.16 150);
--halo-accent-warning: oklch(60% 0.16 85);
--halo-shadow-sm: 0 1px 2px oklch(0% 0 0 / 6%);
--halo-shadow-base: 0 2px 8px oklch(0% 0 0 / 10%);
--halo-shadow-lg: 0 4px 16px oklch(0% 0 0 / 14%);
--halo-shadow-sm: 0 1px 2px oklch(0% 0 0 / 6%);
--halo-shadow-base: 0 2px 8px oklch(0% 0 0 / 10%);
--halo-shadow-lg: 0 4px 16px oklch(0% 0 0 / 14%);
--halo-scrollbar-thumb: oklch(80% 0.01 250);
--halo-scrollbar-track: oklch(95% 0.005 250);
--halo-scrollbar-thumb: oklch(80% 0.01 250);
--halo-scrollbar-track: oklch(95% 0.005 250);
--halo-search-bg: oklch(95% 0.01 250);
--halo-search-text: oklch(45% 0.01 250);
--halo-search-placeholder: oklch(60% 0.01 250);
--halo-search-bg: oklch(95% 0.01 250);
--halo-search-text: oklch(45% 0.01 250);
--halo-search-placeholder: oklch(60% 0.01 250);
--halo-menu-item-hover: oklch(93% 0.02 160);
--halo-menu-item-active: oklch(88% 0.03 160);
--halo-menu-group-title: oklch(55% 0.01 250);
--halo-menu-item-hover: oklch(93% 0.02 160);
--halo-menu-item-active: oklch(88% 0.03 160);
--halo-menu-group-title: oklch(55% 0.01 250);
--halo-table-header-bg: oklch(96% 0.005 250);
--halo-table-row-hover: oklch(93% 0.015 250);
--halo-table-border: oklch(88% 0.01 250);
--halo-table-header-bg: oklch(96% 0.005 250);
--halo-table-row-hover: oklch(93% 0.015 250);
--halo-table-border: oklch(88% 0.01 250);
--halo-tag-bg: oklch(90% 0.04 160);
--halo-tag-text: oklch(40% 0.1 160);
--halo-tag-bg: oklch(90% 0.04 160);
--halo-tag-text: oklch(40% 0.1 160);
}
ui/src/views/SettingsView.vue
+5 -7
View File
@@ -31,11 +31,7 @@ const modeOptions: { value: ThemeMode; label: string; description: string }[] =
当前生效：<strong>{{ currentEffectiveMode }}</strong>
</div>
<div
class="dark-mode-settings__options"
role="radiogroup"
aria-label="主题模式"
>
<div class="dark-mode-settings__options" role="radiogroup" aria-label="主题模式">
<button
v-for="option in modeOptions"
:key="option.value"
@@ -111,7 +107,9 @@ const modeOptions: { value: ThemeMode; label: string; description: string }[] =
text-align: left;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s;
transition:
background-color 0.15s,
border-color 0.15s;
}
.dark-mode-settings__option:hover {
@@ -139,4 +137,4 @@ const modeOptions: { value: ThemeMode; label: string; description: string }[] =
font-size: 0.8125rem;
color: var(--halo-text-tertiary);
}
</style>
</style>