[PR #19599] [CLOSED] feat: Add per-model accent colors with intensity control #64114

New Issue

GiteaMirror · 2026-05-06T09:26:10-05:00

GiteaMirror commented

2026-05-06 09:26:10 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/19599
Author: @troylar
Created: 11/30/2025
Status: ❌ Closed

Base: dev ← Head: feat/model-accent-colors

📝 Commits (1)

dfb23d6 feat: Add per-model accent colors with intensity control

📊 Changes

16 files changed (+735 additions, -12 deletions)

View changed files

📝 backend/open_webui/config.py (+47 -0)
📝 backend/open_webui/main.py (+2 -0)
📝 backend/open_webui/models/models.py (+12 -0)
📝 backend/open_webui/routers/configs.py (+25 -1)
📝 src/app.css (+62 -0)
📝 src/lib/apis/configs/index.ts (+59 -1)
📝 src/lib/components/admin/Settings/Interface.svelte (+27 -3)
➕ src/lib/components/admin/Settings/Interface/ModelColors.svelte (+182 -0)
📝 src/lib/components/chat/Chat.svelte (+15 -1)
📝 src/lib/components/chat/MessageInput.svelte (+1 -1)
📝 src/lib/components/chat/Messages/ResponseMessage.svelte (+1 -1)
📝 src/lib/components/workspace/Models/ModelEditor.svelte (+107 -2)
📝 src/lib/stores/index.ts (+7 -1)
📝 src/lib/types/index.ts (+28 -0)
📝 src/lib/utils/index.ts (+152 -0)
📝 src/routes/(app)/+layout.svelte (+8 -1)

📄 Description

Summary

Add the ability to set custom accent colors for models that provide visual distinction during conversations. This helps users quickly identify which model they're interacting with.

Features

Per-model accent color: Color picker with direct hex input support in Model Editor
Adjustable intensity: Slider with live preview showing the color at selected opacity
Color inheritance: Child models inherit accent color and intensity from base models
Subtle visual indicators:
- Left border on AI response messages
- Focus ring on chat input when typing
Opt-in behavior: No styling changes unless a model explicitly has an accent color set

Design Decisions

Intensity defaults to 35% for subtle, non-distracting appearance
Both color and intensity support "Default" mode for inheritance
Color picker includes hex text input for precise color matching
Slider track itself shows the color preview at current intensity

Test Plan

Set accent color on a model, verify it appears in chat
Adjust intensity slider, verify preview updates in real-time
Create child model, verify it inherits parent's accent color
Clear accent color, verify UI returns to default (no accent)
Enter hex value directly, verify color updates
Test with multiple models to verify colors switch correctly

Contributor License Agreement

I have read and agree to the Contributor License Agreement.

🤖 Generated with Claude Code

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/19599 **Author:** [@troylar](https://github.com/troylar) **Created:** 11/30/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `feat/model-accent-colors` --- ### 📝 Commits (1) - [`dfb23d6`](https://github.com/open-webui/open-webui/commit/dfb23d635752c0760a9f82e65d3c5993ea78dfb0) feat: Add per-model accent colors with intensity control ### 📊 Changes **16 files changed** (+735 additions, -12 deletions) <details> <summary>View changed files</summary> 📝 `backend/open_webui/config.py` (+47 -0) 📝 `backend/open_webui/main.py` (+2 -0) 📝 `backend/open_webui/models/models.py` (+12 -0) 📝 `backend/open_webui/routers/configs.py` (+25 -1) 📝 `src/app.css` (+62 -0) 📝 `src/lib/apis/configs/index.ts` (+59 -1) 📝 `src/lib/components/admin/Settings/Interface.svelte` (+27 -3) ➕ `src/lib/components/admin/Settings/Interface/ModelColors.svelte` (+182 -0) 📝 `src/lib/components/chat/Chat.svelte` (+15 -1) 📝 `src/lib/components/chat/MessageInput.svelte` (+1 -1) 📝 `src/lib/components/chat/Messages/ResponseMessage.svelte` (+1 -1) 📝 `src/lib/components/workspace/Models/ModelEditor.svelte` (+107 -2) 📝 `src/lib/stores/index.ts` (+7 -1) 📝 `src/lib/types/index.ts` (+28 -0) 📝 `src/lib/utils/index.ts` (+152 -0) 📝 `src/routes/(app)/+layout.svelte` (+8 -1) </details> ### 📄 Description ## Summary Add the ability to set custom accent colors for models that provide visual distinction during conversations. This helps users quickly identify which model they're interacting with. ### Features - **Per-model accent color**: Color picker with direct hex input support in Model Editor - **Adjustable intensity**: Slider with live preview showing the color at selected opacity - **Color inheritance**: Child models inherit accent color and intensity from base models - **Subtle visual indicators**: - Left border on AI response messages - Focus ring on chat input when typing - **Opt-in behavior**: No styling changes unless a model explicitly has an accent color set ### Design Decisions - Intensity defaults to 35% for subtle, non-distracting appearance - Both color and intensity support "Default" mode for inheritance - Color picker includes hex text input for precise color matching - Slider track itself shows the color preview at current intensity ## Test Plan - [ ] Set accent color on a model, verify it appears in chat - [ ] Adjust intensity slider, verify preview updates in real-time - [ ] Create child model, verify it inherits parent's accent color - [ ] Clear accent color, verify UI returns to default (no accent) - [ ] Enter hex value directly, verify color updates - [ ] Test with multiple models to verify colors switch correctly ## Contributor License Agreement I have read and agree to the [Contributor License Agreement](https://github.com/open-webui/open-webui/blob/main/CLA.md). 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-05-06 09:26:10 -05:00

GiteaMirror closed this issue

2026-05-06 09:26:13 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#64114