Skip to content

feat(gui): add Material 3 dark theme with full component state coverage#1848

Merged
MarksonHon merged 1 commit into
v2rayA:mainfrom
sanaxes:feat/dark-theme
Apr 19, 2026
Merged

feat(gui): add Material 3 dark theme with full component state coverage#1848
MarksonHon merged 1 commit into
v2rayA:mainfrom
sanaxes:feat/dark-theme

Conversation

@sanaxes

@sanaxes sanaxes commented Mar 27, 2026

Copy link
Copy Markdown

Summary

This PR adds a full dark theme for the current gui (Vue 2 + Buefy) with a Material 3-based palette, plus a navbar theme toggle with persistence.

The implementation is isolated in a dedicated stylesheet and avoids changing the existing light theme design logic.

What’s included

  • Added dark theme toggle in navbar (App.vue)
    • Uses existing MDI icons (weather-night / weather-sunny)
    • Label switches dynamically (Dark/Light)
    • Persists in localStorage (theme=dark|light)
  • Added dark theme stylesheet:
    • gui/src/assets/scss/dark-theme.scss
  • Added i18n keys for theme toggle labels in existing locales:
    • en, zh, ru, pt-br, fa-ir

Styling approach

  • Material 3 dark color roles via CSS variables (--md-*)
  • Dark styles applied under body.theme-dark
  • Kept base/light styles intact; dark theme is override-only

Covered UI states/components

  • Navbar/menu/dropdowns (desktop + mobile menu)
  • Buttons (default, outlined, primary, warning/info/success/danger/delete, hover/focus/active)
  • Tabs (is-toggle, is-toggle-rounded, is-boxed, including focus/hover/active)
  • Tables (header/body, sorted column state, unselectable row behavior)
  • Inputs/textarea/select (including placeholders and select arrow)
  • Primary checkboxes/switches (checked/hover/focus + icon color)
  • Modals/cards/messages/sidebar
  • Scrollbars and dividers

Notes

  • No backend logic changes.
  • No new dependencies added.
  • Frontend build succeeds locally with existing non-blocking bundle-size warnings.

@MarksonHon MarksonHon merged commit bb9bea7 into v2rayA:main Apr 19, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants