Serendipity
edbf78f236
- Halo Plugin 后端（Java/Gradle），含 DarkModePlugin 主类和测试 - Vue 3 + TypeScript 前端 UI，包含主题切换组件和设置页面 - 暗色模式 CSS 变量和覆盖样式（布局/编辑器/表单/滚动条等） - 设计文档和调查文档 - Halo 插件/主题开发 Agent Skills Co-Authored-By: Claude <noreply@anthropic.com>
78 lines
1.6 KiB
CSS
78 lines
1.6 KiB
CSS
/* ============================================================
|
|
Halo Dark Mode — Tailwind 工具类覆盖
|
|
覆盖 Tailwind 的颜色类和常见 UI 原子类
|
|
============================================================ */
|
|
|
|
[data-halo-theme="dark"] {
|
|
/* ===== 背景色 ===== */
|
|
.bg-white {
|
|
background-color: var(--halo-bg-card);
|
|
}
|
|
|
|
.bg-gray-50,
|
|
.bg-gray-100 {
|
|
background-color: var(--halo-bg-content);
|
|
}
|
|
|
|
.bg-gray-200 {
|
|
background-color: var(--halo-bg-hover);
|
|
}
|
|
|
|
/* ===== 文字色 ===== */
|
|
.text-gray-900,
|
|
.text-gray-800 {
|
|
color: var(--halo-text-primary);
|
|
}
|
|
|
|
.text-gray-700,
|
|
.text-gray-600,
|
|
.text-gray-500 {
|
|
color: var(--halo-text-secondary);
|
|
}
|
|
|
|
.text-gray-400,
|
|
.text-gray-300 {
|
|
color: var(--halo-text-tertiary);
|
|
}
|
|
|
|
/* ===== 边框 ===== */
|
|
.border,
|
|
.border-gray-200,
|
|
.border-gray-300 {
|
|
border-color: var(--halo-border-base);
|
|
}
|
|
|
|
.divide-y > :not([hidden]) ~ :not([hidden]),
|
|
.divide-x > :not([hidden]) ~ :not([hidden]) {
|
|
border-color: var(--halo-border-light);
|
|
}
|
|
|
|
/* ===== 阴影 ===== */
|
|
.shadow {
|
|
box-shadow: var(--halo-shadow-base);
|
|
}
|
|
|
|
.shadow-sm {
|
|
box-shadow: var(--halo-shadow-sm);
|
|
}
|
|
|
|
.shadow-lg,
|
|
.shadow-xl {
|
|
box-shadow: var(--halo-shadow-lg);
|
|
}
|
|
|
|
/* ===== 链接 ===== */
|
|
a:not([class*="text-"]),
|
|
.hover\:text-gray-900:hover,
|
|
.hover\:text-gray-800:hover,
|
|
.hover\:text-gray-700:hover {
|
|
color: var(--halo-text-link);
|
|
}
|
|
|
|
/* ===== 通用悬停 ===== */
|
|
.hover\:bg-gray-50:hover,
|
|
.hover\:bg-gray-100:hover {
|
|
background-color: var(--halo-bg-hover);
|
|
}
|
|
}
|