Skip to content

feat: Is it possible to switch between multiple theme UIs? #544

Description

@EVEDensity

What problem are you trying to solve?

Summary
I would like to propose adding a built-in theme switching function to the interactive dashboard of Understand-Anything, allowing users to toggle between multiple UI themes freely. This will improve user experience for different usage scenarios, lighting environments, and personal preference demands.
Use Case & Motivation
Currently, the Understand-Anything dashboard only has a single default UI style, and there is no option to switch themes. Based on the project’s existing capabilities (persona-adaptive UI, layer visualization with color-coded legends), adding multi-theme support will bring the following benefits:

  • Light/Dark Mode Adaptation: Developers usually code in dark environments; a dedicated dark theme can reduce eye strain, while a light theme is suitable for daytime demonstration and team sharing scenarios.
  • Custom Visual Style: Different users have different color preferences for knowledge graph nodes, architectural layer color schemes, and dashboard panel styles.
  • Scenario-Based Switching: High-contrast themes can be provided for users with visual accessibility needs, and minimalist themes can simplify the interface for large codebase graph browsing.
  • Consistency with Ecosystem: Align the UI theme style with mainstream AI coding tools (Cursor, VS Code Copilot, Claude Code) to realize unified visual experience across IDE/plugins.
    Suggested Feature Implementation
  1. Built-in Default Theme Set
  • Default Theme (current existing style)
  • Dark Theme (primary priority, most demanded by developers)
  • Light Theme
  • High-Contrast Accessibility Theme
  1. Entrance & Operation
  • Add a theme dropdown menu in the dashboard header (next to language switch, zoom control buttons)
  • Support one-click switching without reloading the entire graph page
  • Save user's theme preference to .understand-anything/config.json for persistent memory across project restarts and sessions
  1. Style Scope Coverage
  • Knowledge graph node/edge colors, hover highlight effects
  • Architectural layer color-coded legend matching (keep layer color logic consistent, only adjust background/base tone)
  • Dashboard panels, buttons, tooltips, guided tour text styles
  • Domain view and knowledge base graph visual styles
  1. Extended Capability (Optional)
  2. Allow advanced users to import custom CSS theme files to customize colors and styles
  3. Follow system theme automatically (sync OS light/dark mode)
    Additional Notes
  • The existing persona-adaptive UI logic should not be affected by theme switching; theme only changes visual styles, not the information detail level adapted for different user roles (junior dev/PM/power user).
  • Ensure that the color distinction of architectural layers and graph relationships remains clear under all themes to avoid information ambiguity caused by color adjustment.
  • No breaking changes to the existing knowledge graph JSON data structure and plugin command logic.
    Thanks for maintaining this excellent project! I believe multi-theme support will make the dashboard more polished and user-friendly.

Proposed solution (optional)

No response

Alternatives you've considered

No response

Which part of the project?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions