自定义主题配置指南

NEUQ 空闲教室总表 · 主题系统 · Ver 3.0

1. 快速开始

创建一个 .toml 文件，填写需要自定义的字段，然后在页面底部点击「导入主题」按钮选择该文件即可。未填写的字段自动使用默认值。

也可以直接使用页面底部的预设主题下拉菜单，从 7 个内置主题中一键切换。

# my-theme.toml — 最简示例
name = "我的主题"

[light]
body_bg = "#f0f4f8"
h1_text = "#1a365d"
tab_active_text = "#3182ce"
tab_active_border = "#3182ce"
timeslot_title_text = "#3182ce"
link_color = "#3182ce"

2. 文件格式

TOML 文件由以下可选部分组成：

name = "主题名称"         # 可选，显示在页面底部
mode = "light"            # 可选，锁定明暗模式（见第 3 节）

[light]                    # 亮色模式颜色变量（可选）
body_bg = "#f5f5f5"
body_text = "#333"

[dark]                     # 暗色模式颜色变量（可选）
body_bg = "#1a1a2e"
body_text = "#ccc"

[layout]                   # 布局/字号变量（可选，亮暗共用）
font_size_header = "24px"

3. 明暗模式锁定

默认情况下，页面会跟随操作系统的亮色/暗色偏好自动切换。通过设置顶层 mode 字段，可以锁定为固定模式，不再随系统变化。

# 锁定为亮色模式（无视系统偏好）
mode = "light"

# 锁定为暗色模式（无视系统偏好）
mode = "dark"

# 不设置 mode 字段 = 跟随系统（默认行为）

点击页面上的「重置」按钮后，模式锁定会一并解除，恢复跟随系统偏好。

4. 导入与管理

• 预设主题：在页面底部的下拉菜单中选择内置主题（Ayu、Catppuccin、Everforest 等），一键切换
• 导入自定义：点击「导入主题」按钮，选择 .toml 文件
• 持久化：主题配置保存在浏览器 Cookie 中（有效期 1 年），刷新页面后自动生效
• 重置：点击「重置」按钮可清除自定义主题，恢复系统默认样式和明暗模式偏好

5. 预设主题

页面底部的下拉菜单提供了以下内置主题，选择即可即时预览并保存：

6. 颜色变量参考

颜色值支持任何合法的 CSS 颜色格式：#hex、rgb()、rgba()、hsl() 等。

6.1 背景色

6.2 主文字色

6.3 Tab 文字色

6.4 悬停背景色

6.5 边框色

6.6 表格色

6.7 强调色

6.8 链接与标记色

7. 布局变量参考

布局变量在 [layout] 部分配置，亮暗模式共用。所有值均为合法的 CSS 长度值（如 14px、1.2em、1rem）。

8. 完整示例

8.1 最小配置

只修改一两个变量，其余全部使用默认值：

name = "极简"

[light]
tab_active_text = "#e74c3c"
timeslot_title_text = "#e74c3c"

8.2 锁定暗色模式

name = "永夜"
mode = "dark"

[dark]
body_bg = "#0d1117"
banner_bg = "#161b22"
container_bg = "rgba(13,17,23,0.9)"
body_text = "#c9d1d9"
h1_text = "#f0f6fc"
tab_active_text = "#58a6ff"
tab_active_border = "#58a6ff"
timeslot_title_text = "#58a6ff"
link_color = "#58a6ff"

8.3 完整双色主题

name = "我的主题"

[light]
# 背景色
body_bg = "#f0f4f8"
banner_bg = "#e2e8f0"
tab_bar_bg = "#e8ecf2"
tab_active_bg = "#ffffff"
container_bg = "rgba(255,255,255,0.85)"
container_shadow = "0 4px 20px rgba(0,0,0,0.06)"
info_box_bg = "#edf2f7"

# 文字色
body_text = "#2d3748"
collapsible_text = "#2d3748"
btn_text = "#4a5568"
info_text = "#718096"
badge_text = "#ffffff"
banner_text = "#2d3748"
banner_close_text = "#718096"
collapsible_desc_text = "#718096"
theme_name_text = "#718096"
h1_text = "#1a202c"
date_display_text = "#1a202c"

# Tab
tab_text = "#4a5568"
tab_text_hover = "#1a202c"

# Hover
date_btn_hover_bg = "#d4dbe5"
tab_hover_bg = "#d4dbe5"
theme_btn_hover_bg = "#d4dbe5"

# 边框
banner_border = "#cbd5e0"
info_box_border = "#cbd5e0"
container_border = "#d4dbe5"
tab_bar_border = "#d4dbe5"
tab_btn_border = "#d4dbe5"
hr_border = "#e2e8f0"
collapsible_border = "#d4dbe5"
collapsible_desc_border = "#e2e8f0"
theme_btn_border = "#d4dbe5"

# 表格
table_header_text = "#2d3748"
table_border = "#e2e8f0"
table_header_bg = "#edf2f7"
floor_label_bg = "#e2e8f0"
floor_label_text = "#2d3748"
building_name_bg = "#e2e8f0"
building_name_text = "#2d3748"
info_box_text = "#2d3748"

# 强调色
date_btn_icon = "#3182ce"
tab_active_text = "#3182ce"
tab_active_border = "#3182ce"
timeslot_title_text = "#3182ce"
theme_btn_hover_border = "#3182ce"

# 链接与标记
link_color = "#3182ce"
strong_color = "#e53e3e"
del_color = "#a0aec0"

[dark]
body_bg = "#1a202c"
banner_bg = "#171923"
tab_bar_bg = "#1e2432"
tab_active_bg = "#2d3748"
container_bg = "rgba(26,32,44,0.88)"
container_shadow = "0 4px 20px rgba(0,0,0,0.4)"
info_box_bg = "#1e2432"

body_text = "#e2e8f0"
collapsible_text = "#e2e8f0"
btn_text = "#a0aec0"
info_text = "#718096"
badge_text = "#1a202c"
banner_text = "#e2e8f0"
banner_close_text = "#718096"
collapsible_desc_text = "#718096"
theme_name_text = "#718096"
h1_text = "#f7fafc"
date_display_text = "#f7fafc"

tab_text = "#a0aec0"
tab_text_hover = "#e2e8f0"

date_btn_hover_bg = "#2d3748"
tab_hover_bg = "#2d3748"
theme_btn_hover_bg = "#2d3748"

banner_border = "rgba(45,55,72,0.5)"
info_box_border = "rgba(45,55,72,0.5)"
container_border = "#2d3748"
tab_bar_border = "#2d3748"
tab_btn_border = "#2d3748"
hr_border = "#2d3748"
collapsible_border = "#2d3748"
collapsible_desc_border = "#2d3748"
theme_btn_border = "#2d3748"

table_header_text = "#e2e8f0"
table_border = "#2d3748"
table_header_bg = "#2d3748"
floor_label_bg = "#2d3748"
floor_label_text = "#e2e8f0"
building_name_bg = "#2d3748"
building_name_text = "#e2e8f0"
info_box_text = "#e2e8f0"

date_btn_icon = "#63b3ed"
tab_active_text = "#63b3ed"
tab_active_border = "#63b3ed"
timeslot_title_text = "#63b3ed"
theme_btn_hover_border = "#63b3ed"

link_color = "#63b3ed"
strong_color = "#fc8181"
del_color = "#718096"

[layout]
font_size_table = "12px"
font_size_td = "14px"
font_size_header = "22px"
font_size_info = "13px"
font_size_timeslot = "20px"
font_size_tab = "17px"
font_size_date = "18px"

9. 常见问题

Q: 导入后没有变化？

请检查 TOML 文件中的字符串值是否用双引号包裹（如 body_bg = "#f5f5f5"）。颜色值中包含 # 字符，必须用引号括起来。

Q: 只想修改暗色模式，亮色不变？

只写 [dark] 部分即可，[light] 可以完全省略：

name = "仅暗色"
[dark]
body_bg = "#0d1117"
body_text = "#c9d1d9"

Q: 如何让主题始终显示为暗色？

设置 mode = "dark" 即可锁定暗色模式。

Q: 容器宽度可以自定义吗？

不可以。容器宽度固定为 800px，不纳入主题配置。

Q: 主题配置保存在哪里？

保存在浏览器 Cookie 中（名称 neuq_theme_config），有效期 1 年。清除浏览器 Cookie 会丢失自定义主题。

NEUQ Classroom Query · Theme Configuration Guide · Ver 3.0