Serendipity
edbf78f236
- Halo Plugin 后端（Java/Gradle），含 DarkModePlugin 主类和测试 - Vue 3 + TypeScript 前端 UI，包含主题切换组件和设置页面 - 暗色模式 CSS 变量和覆盖样式（布局/编辑器/表单/滚动条等） - 设计文档和调查文档 - Halo 插件/主题开发 Agent Skills Co-Authored-By: Claude <noreply@anthropic.com>
90 lines
2.1 KiB
CSS
90 lines
2.1 KiB
CSS
/* ============================================================
|
|
Halo Dark Mode — FormKit 表单组件覆盖
|
|
覆盖输入框、选择器、开关、复选框等表单元素
|
|
============================================================ */
|
|
|
|
[data-halo-theme="dark"] {
|
|
/* ===== 输入框 ===== */
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="email"],
|
|
input[type="number"],
|
|
input[type="search"],
|
|
input[type="url"],
|
|
input[type="tel"],
|
|
textarea,
|
|
select,
|
|
.formkit-input,
|
|
[data-formkit-input] {
|
|
background-color: var(--halo-bg-input);
|
|
color: var(--halo-text-primary);
|
|
border-color: var(--halo-border-input);
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus,
|
|
.formkit-input:focus {
|
|
border-color: var(--halo-border-focus);
|
|
outline-color: var(--halo-border-focus);
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder,
|
|
.formkit-input::placeholder {
|
|
color: var(--halo-text-tertiary);
|
|
}
|
|
|
|
input:disabled,
|
|
textarea:disabled,
|
|
select:disabled {
|
|
background-color: var(--halo-bg-disabled);
|
|
color: var(--halo-text-tertiary);
|
|
}
|
|
|
|
/* ===== 复选框/单选框 ===== */
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
.formkit-checkbox,
|
|
.formkit-radio {
|
|
accent-color: var(--halo-accent-primary);
|
|
}
|
|
|
|
/* ===== FormKit 标签和帮助文本 ===== */
|
|
.formkit-label,
|
|
.formkit-legend {
|
|
color: var(--halo-text-secondary);
|
|
}
|
|
|
|
.formkit-help,
|
|
.formkit-message {
|
|
color: var(--halo-text-tertiary);
|
|
}
|
|
|
|
/* ===== FormKit 外层 ===== */
|
|
.formkit-outer {
|
|
color: var(--halo-text-primary);
|
|
}
|
|
|
|
/* ===== FormKit 前缀/后缀 ===== */
|
|
.formkit-prefix,
|
|
.formkit-suffix {
|
|
background-color: var(--halo-bg-hover);
|
|
color: var(--halo-text-secondary);
|
|
border-color: var(--halo-border-input);
|
|
}
|
|
|
|
/* ===== 选择器下拉 ===== */
|
|
select option {
|
|
background-color: var(--halo-bg-dropdown);
|
|
color: var(--halo-text-primary);
|
|
}
|
|
|
|
/* ===== 代码块 in forms ===== */
|
|
.formkit-code {
|
|
background-color: var(--halo-bg-hover);
|
|
color: var(--halo-text-primary);
|
|
border-color: var(--halo-border-base);
|
|
}
|
|
}
|