[GH-ISSUE #19585] feat: Per-model accent color/theme for visual differentiation #18933

Closed
opened 2026-04-20 01:13:30 -05:00 by GiteaMirror · 0 comments
Owner

Originally created by @troylar on GitHub (Nov 29, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/19585

Feature Request

Problem

When working with multiple models, it's difficult to quickly identify which model is currently selected. This can lead to confusion, especially when switching between models with different capabilities (e.g., GPT-4 vs Claude vs local models).

Proposed Solution

Allow admins to configure accent colors or subtle theme variations per model, providing instant visual feedback about which model is active.

Visual elements that could change (starting subtle):

  • Accent color (buttons, links, active states)
  • Subtle header/navbar tint
  • Border or indicator on chat area
  • Model selector highlight color

Implementation Approach

  1. Leverage the existing theming system (PR #17396)
  2. Add model-to-color mapping in admin settings
  3. Apply colors via CSS custom properties (e.g., --model-accent, --model-tint)
  4. Support pattern matching for model families (e.g., claude-* → orange, gpt-* → green)

Configuration Example

{
  "modelColors": {
    "gpt-4o": "#10a37f",
    "claude-*": "#d97706",
    "llama-*": "#6366f1",
    "default": "#3b82f6"
  }
}

Scope

  • Instance-wide (admin configures for all users)
  • Subtle by default - enhance UX without being distracting
  • Fully customizable - admins can define their own color schemes

Use Cases

  • Prevent accidentally using expensive models when a cheaper one suffices
  • Quickly identify model capabilities at a glance
  • Visual consistency for teams using specific models for specific tasks

Similar Patterns in Open WebUI

  • Per-model TTS options (#8354)
  • Per-model RAG template override (#17550)
  • Model-specific tool restrictions (#18392)

This follows the established "per-model configuration" pattern already present in the codebase.

Originally created by @troylar on GitHub (Nov 29, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/19585 ## Feature Request ### Problem When working with multiple models, it's difficult to quickly identify which model is currently selected. This can lead to confusion, especially when switching between models with different capabilities (e.g., GPT-4 vs Claude vs local models). ### Proposed Solution Allow admins to configure accent colors or subtle theme variations per model, providing instant visual feedback about which model is active. **Visual elements that could change (starting subtle):** - Accent color (buttons, links, active states) - Subtle header/navbar tint - Border or indicator on chat area - Model selector highlight color ### Implementation Approach 1. Leverage the existing theming system (PR #17396) 2. Add model-to-color mapping in admin settings 3. Apply colors via CSS custom properties (e.g., `--model-accent`, `--model-tint`) 4. Support pattern matching for model families (e.g., `claude-*` → orange, `gpt-*` → green) ### Configuration Example ```json { "modelColors": { "gpt-4o": "#10a37f", "claude-*": "#d97706", "llama-*": "#6366f1", "default": "#3b82f6" } } ``` ### Scope - **Instance-wide** (admin configures for all users) - **Subtle by default** - enhance UX without being distracting - **Fully customizable** - admins can define their own color schemes ### Use Cases - Prevent accidentally using expensive models when a cheaper one suffices - Quickly identify model capabilities at a glance - Visual consistency for teams using specific models for specific tasks ### Similar Patterns in Open WebUI - Per-model TTS options (#8354) - Per-model RAG template override (#17550) - Model-specific tool restrictions (#18392) This follows the established "per-model configuration" pattern already present in the codebase.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#18933