fz-mirrors/AstrBot
1
0
Fork 0
mirror of https://github.com/AstrBotDevs/AstrBot synced 2026-07-16 01:40:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashboard): add a configurable theme mode with light, dark, and system options and centralize theme synchronization with system preferences. (#8648)

Browse Source 
* Update main.ts

* Update config.ts

* Update header.json

* Update auth.json

* Update header.json

* Update auth.json

* Update header.json

* Update auth.json

* Update VerticalHeader.vue

* Update customizer.ts

* Update LoginPage.vue

* Update SetupPage.vue

* Update config.ts

* Update customizer.ts

* Update plugin-pages.md

* docs: add Follow System note to plugin-pages theme section
This commit is contained in:
lingyun14
2026-06-13 16:41:54 +08:00
committed by GitHub
parent 26beaaa938
commit d2b86c5991
14 changed files with 355 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/en/dev/star/guides/plugin-pages.md
View File

@@ -176,6 +176,8 @@ When the user toggles light/dark mode in AstrBot, the theme state is automatical
- Light mode: `<html data-theme="light">`
- Dark mode: `<html data-theme="dark">`
> When **Follow System** is selected, AstrBot automatically resolves the theme based on the system's color scheme. The `data-theme` value received by the plugin page is always either `light` or `dark` — no extra handling needed.
### CSS Adaptation
CSS variables are the recommended approach:

2
docs/zh/dev/star/guides/plugin-pages.md
View File

@@ -176,6 +176,8 @@ AstrBot 切换亮色/暗色模式时，会自动将主题状态同步给插件 P
- 亮色模式：`<html data-theme="light">`
- 暗色模式：`<html data-theme="dark">`
> 选择「跟随系统」时，AstrBot 会根据系统当前色彩模式自动决定主题，插件 Page 收到的 `data-theme` 值始终为 `light` 或 `dark`，无需额外处理。
### CSS 适配
推荐使用 CSS 变量：