github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-03-22 06:02:06 -05:00
Code Issues 308 Packages Projects Releases 100 Wiki Activity

issue: (custom) toggles have different color from Web Search #5300

New Issue
Closed
opened 2025-11-11 16:16:43 -06:00 by GiteaMirror · 3 comments
GiteaMirror commented 2025-11-11 16:16:43 -06:00
Owner
Copy Link

Originally created by @mrexodia on GitHub (May 23, 2025).

Check Existing Issues

  • I have searched the existing issues and discussions.
  • I am using the latest version of Open WebUI.

Installation Method

Pip Install

Open WebUI Version

v0.6.10

Ollama Version (if applicable)

No response

Operating System

Ubuntu 24.04

Browser (if applicable)

Chrome (light mode)

Confirmation

  • I have read and followed all instructions in README.md.
  • I am using the latest version of both Open WebUI and Ollama.
  • I have included the browser console logs.
  • I have included the Docker container logs.
  • I have listed steps to reproduce the bug in detail.

Expected Behavior

The toggles should have the same colors.

Actual Behavior

The custom toggle from a function and code interpreter have a different color than the web search one. The Web Search toggle is colored in blue (bg-blue-100) and the others are light grey which is very difficult to see in light mode (bg-gray-50).

Steps to Reproduce

  1. Add the function below to the model
  2. Click it to toggle
from pydantic import BaseModel, Field
from typing import Optional


class Filter:
    class Valves(BaseModel):
        pass

    def __init__(self):
        self.valves = self.Valves()
        self.toggle = True
        # TIP: Use SVG Data URI!
        self.icon = """data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS02Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiAxOHYtNS4yNW0wIDBhNi4wMSA2LjAxIDAgMCAwIDEuNS0uMTg5bS0xLjUuMTg5YTYuMDEgNi4wMSAwIDAgMS0xLjUtLjE4OW0zLjc1IDcuNDc4YTEyLjA2IDEyLjA2IDAgMCAxLTQuNSAwbTMuNzUgMi4zODNhMTQuNDA2IDE0LjQwNiAwIDAgMS0zIDBNMTQuMjUgMTh2LS4xOTJjMC0uOTgzLjY1OC0xLjgyMyAxLjUwOC0yLjMxNmE3LjUgNy41IDAgMSAwLTcuNTE3IDBjLjg1LjQ5MyAxLjUwOSAxLjMzMyAxLjUwOSAyLjMxNlYxOCIgLz4KPC9zdmc+Cg=="""
        pass

    async def inlet(
        self, body: dict, __event_emitter__, __user__: Optional[dict] = None
    ) -> dict:
        await __event_emitter__(
            {
                "type": "status",
                "data": {
                    "description": "Toggled!!",
                    "done": True,
                    "hidden": False,
                },
            }
        )
        return body

Logs & Screenshots

https://github.com/user-attachments/assets/235887f3-9dc9-487a-9d88-b9c4b76a5c0b

Additional Information

No response

Originally created by @mrexodia on GitHub (May 23, 2025). ### Check Existing Issues - [x] I have searched the existing issues and discussions. - [x] I am using the latest version of Open WebUI. ### Installation Method Pip Install ### Open WebUI Version v0.6.10 ### Ollama Version (if applicable) _No response_ ### Operating System Ubuntu 24.04 ### Browser (if applicable) Chrome (light mode) ### Confirmation - [x] I have read and followed all instructions in `README.md`. - [x] I am using the latest version of **both** Open WebUI and Ollama. - [x] I have included the browser console logs. - [x] I have included the Docker container logs. - [x] I have listed steps to reproduce the bug in detail. ### Expected Behavior The toggles should have the same colors. ### Actual Behavior The custom toggle from a function and code interpreter have a different color than the web search one. The Web Search toggle is colored in blue (`bg-blue-100`) and the others are light grey which is very difficult to see in light mode (`bg-gray-50`). ### Steps to Reproduce 1. Add the function below to the model 2. Click it to toggle ```python from pydantic import BaseModel, Field from typing import Optional class Filter: class Valves(BaseModel): pass def __init__(self): self.valves = self.Valves() self.toggle = True # TIP: Use SVG Data URI! self.icon = """data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBjbGFzcz0ic2l6ZS02Ij4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiAxOHYtNS4yNW0wIDBhNi4wMSA2LjAxIDAgMCAwIDEuNS0uMTg5bS0xLjUuMTg5YTYuMDEgNi4wMSAwIDAgMS0xLjUtLjE4OW0zLjc1IDcuNDc4YTEyLjA2IDEyLjA2IDAgMCAxLTQuNSAwbTMuNzUgMi4zODNhMTQuNDA2IDE0LjQwNiAwIDAgMS0zIDBNMTQuMjUgMTh2LS4xOTJjMC0uOTgzLjY1OC0xLjgyMyAxLjUwOC0yLjMxNmE3LjUgNy41IDAgMSAwLTcuNTE3IDBjLjg1LjQ5MyAxLjUwOSAxLjMzMyAxLjUwOSAyLjMxNlYxOCIgLz4KPC9zdmc+Cg==""" pass async def inlet( self, body: dict, __event_emitter__, __user__: Optional[dict] = None ) -> dict: await __event_emitter__( { "type": "status", "data": { "description": "Toggled!!", "done": True, "hidden": False, }, } ) return body ``` ### Logs & Screenshots https://github.com/user-attachments/assets/235887f3-9dc9-487a-9d88-b9c4b76a5c0b ### Additional Information _No response_
GiteaMirror added the bug label 2025-11-11 16:16:43 -06:00
GiteaMirror commented 2025-11-11 16:16:45 -06:00
Author
Owner
Copy Link

@mrexodia commented on GitHub (May 23, 2025):

Why was it closed, where you unable to reproduce?

@mrexodia commented on GitHub (May 23, 2025): Why was it closed, where you unable to reproduce?
GiteaMirror commented 2025-11-11 16:16:45 -06:00
Author
Owner
Copy Link

@Zyfax commented on GitHub (May 23, 2025):

It is already changed in dev but this is not an issue. It is a screen/contrast problem. Too high contrast and the grey color disappear everywhere anyway.
Your recording looks fine here.

Image

@Zyfax commented on GitHub (May 23, 2025): It is already changed in dev but this is not an issue. It is a screen/contrast problem. Too high contrast and the grey color disappear everywhere anyway. Your recording looks fine here. ![Image](https://github.com/user-attachments/assets/af8d745f-d089-4674-a9db-16b7daf71e95)
GiteaMirror commented 2025-11-11 16:16:46 -06:00
Author
Owner
Copy Link

@lehhair commented on GitHub (Jun 14, 2025):

This is because the icon is set as <img src=base64 instead of actually inserting a <svg. I believe this issue has not been resolved and should be reopened.

@lehhair commented on GitHub (Jun 14, 2025): This is because the icon is set as <img src=base64 instead of actually inserting a <svg. I believe this issue has not been resolved and should be reopened.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#5300
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?