Skip to content

Feat:adds theme color customization/为 WebUI 仪表板添加了主题颜色自定义功能#7640

Open
LovieCode wants to merge 3 commits intoAstrBotDevs:masterfrom
LovieCode:feat/theme-custom
Open

Feat:adds theme color customization/为 WebUI 仪表板添加了主题颜色自定义功能#7640
LovieCode wants to merge 3 commits intoAstrBotDevs:masterfrom
LovieCode:feat/theme-custom

Conversation

@LovieCode
Copy link
Copy Markdown
Contributor

@LovieCode LovieCode commented Apr 18, 2026

This PR adds theme color customization to the WebUI dashboard, allowing users to choose from 8 preset color themes and customize primary, secondary, and info colors. Changes apply immediately and persist in browser local storage.

此 PR 为 WebUI 仪表板添加了主题颜色自定义功能,用户可以从 8 种预设配色方案中选择,或自定义主色、辅助色和信息色。修改后立即生效,并保存在浏览器本地。

Modifications / 改动点

  • dashboard/src/views/Settings.vue - Added theme color customization UI with 8 preset color swatches and color pickers for primary, secondary, and info colors

  • dashboard/src/theme/DarkTheme.ts - Updated dark theme color configuration

  • dashboard/src/theme/LightTheme.ts - Updated light theme color configuration

  • dashboard/src/i18n/locales/zh-CN/features/settings.json - Added Chinese i18n strings for theme customization

  • dashboard/src/i18n/locales/en-US/features/settings.json - Added English i18n strings for theme customization

  • dashboard/src/i18n/locales/ru-RU/features/settings.json - Added Russian i18n strings for theme customization

  • This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

1776165766659 1776165782299 1776165773959

Checklist / 检查清单

  • 😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
    / 如果 PR 中有新加入的功能,已经通过 Issue / 邮件等方式和作者讨论过。

  • 👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
    / 我的更改经过了良好的测试,并已在上方提供了"验证步骤"和"运行截图"

  • 🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in requirements.txt and pyproject.toml.
    / 我确保没有引入新依赖库,或者引入了新依赖库的同时将其添加到 requirements.txtpyproject.toml 文件相应位置。

  • 😮 My changes do not introduce malicious code.
    / 我的更改没有引入恶意代码。

Summary by Sourcery

Add theme color customization to the WebUI dashboard settings, including support for per-user primary/secondary/info colors and preset palettes, with changes applied live and persisted in local storage.

New Features:

  • Introduce configurable primary, secondary, and info theme colors in the dashboard settings.
  • Add a set of preset color palettes that users can quickly apply to the dashboard theme.

Enhancements:

  • Improve the theme settings UI with separate text inputs and native color pickers for easier color selection.

@auto-assign auto-assign bot requested review from Raven95676 and Soulter April 18, 2026 05:37
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. area:webui The bug / feature is about webui(dashboard) of astrbot. labels Apr 18, 2026
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 1 issue, and left some high level feedback:

  • The native <input type="color"> controls currently have no explicit labels or ARIA attributes and rely on visual proximity to the Vuetify text fields; consider associating them via aria-labelledby or wrapping them in a labeled container to keep the color picker accessible to screen readers.
  • The localStorage keys ('themePrimary', 'themeSecondary', 'themeInfo') and the default/preset color values are duplicated across multiple functions; extracting them into a small config object or constants would make future changes less error‑prone and keep the theme logic more maintainable.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The native `<input type="color">` controls currently have no explicit labels or ARIA attributes and rely on visual proximity to the Vuetify text fields; consider associating them via `aria-labelledby` or wrapping them in a labeled container to keep the color picker accessible to screen readers.
- The localStorage keys (`'themePrimary'`, `'themeSecondary'`, `'themeInfo'`) and the default/preset color values are duplicated across multiple functions; extracting them into a small config object or constants would make future changes less error‑prone and keep the theme logic more maintainable.

## Individual Comments

### Comment 1
<location path="dashboard/src/views/Settings.vue" line_range="252-260" />
<code_context>
+    { name: 'Zinc', primary: '#52525B', secondary: '#52525B', info: '#71717A' },
+];
+
+const applyPreset = (preset) => {
+    primaryColor.value = preset.primary;
+    secondaryColor.value = preset.secondary;
+    infoColor.value = preset.info;
+    localStorage.setItem('themePrimary', preset.primary);
+    localStorage.setItem('themeSecondary', preset.secondary);
+    localStorage.setItem('themeInfo', preset.info);
+    applyThemeColors(preset.primary, preset.secondary, preset.info);
+};

</code_context>
<issue_to_address>
**suggestion:** Preset application duplicates side effects already handled by watchers.

Since the watchers for `primaryColor`, `secondaryColor`, and `infoColor` already persist to `localStorage` and call `applyThemeColors`, the explicit `localStorage.setItem` calls and direct `applyThemeColors` call here are redundant and add unnecessary writes/calls. Consider having `applyPreset` only update the three refs and let the watchers handle the side effects.

```suggestion
const applyPreset = (preset) => {
    primaryColor.value = preset.primary;
    secondaryColor.value = preset.secondary;
    infoColor.value = preset.info;
};
```
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread dashboard/src/views/Settings.vue
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request implements theme color customization, adding an info color and several presets across the English, Russian, and Chinese locales. The UI in Settings.vue was updated with color pickers and preset buttons. Feedback identifies redundant logic in applyPreset and resetThemeColors where manual storage and theme updates overlap with existing watchers. There is also a suggestion to avoid overwriting dark color variants to maintain UI depth and contrast.

Comment thread dashboard/src/views/Settings.vue
Comment thread dashboard/src/views/Settings.vue
Comment thread dashboard/src/views/Settings.vue
@Soulter Soulter force-pushed the master branch 2 times, most recently from faf411f to 0068960 Compare April 19, 2026 09:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:webui The bug / feature is about webui(dashboard) of astrbot. size:L This PR changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant