github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-05-05 18:38:17 -05:00
Code Issues 1.1k Packages Projects Releases 126 Wiki Activity

[GH-ISSUE #8194] Make currentColor in SVGs react to theme #15035

New Issue
Closed
opened 2026-04-19 21:19:15 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-19 21:19:15 -05:00
Owner
Copy Link

Originally created by @damgem on GitHub (Dec 29, 2024).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/8194

Is your feature request related to a problem? Please describe.

SVG model icons that use fill="currentColor" don't react to dark / light mode and currentColor is always rendered black. This makes the icon very hard to see in dark mode.

Describe the solution you'd like

Render SVGs in a way that exposes currentColor correctly.

Describe alternatives you've considered

Manually change the SVG's fill attribute to white, as most users on my instance use dark mode, but that just puts the problem for users with a preference for light mode instead.

Additional context

I'm using the following SVG (source)

<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg>

I've noticed 4 different locations where the styling issues occur:

  • empty chat
    imageimage

  • chat message
    imageimage

  • model selection
    imageimage

  • admin panel model list
    imageimage

  • admin panel model page
    imageimage

Used version: docker image ghcr.io/open-webui/open-webui:9aa6abd2c800

Originally created by @damgem on GitHub (Dec 29, 2024). Original GitHub issue: https://github.com/open-webui/open-webui/issues/8194 ## Is your feature request related to a problem? Please describe. SVG model icons that use `fill="currentColor"` don't react to dark / light mode and `currentColor` is always rendered black. This makes the icon very hard to see in dark mode. ## Describe the solution you'd like Render SVGs in a way that exposes `currentColor` correctly. ## Describe alternatives you've considered Manually change the SVG's `fill` attribute to white, as most users on my instance use dark mode, but that just puts the problem for users with a preference for light mode instead. ## Additional context I'm using the following SVG ([source](https://lobehub.com/icons/openai)) ```html <svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>OpenAI</title><path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"></path></svg> ``` I've noticed 4 different locations where the styling issues occur: - empty chat <img width="350" alt="image" src="https://github.com/user-attachments/assets/85d17405-cfae-4774-89ba-bf5091392687" /><img width="350" alt="image" src="https://github.com/user-attachments/assets/a80e0010-20d4-42db-ad08-26236cc08604" /> - chat message <img width="350" alt="image" src="https://github.com/user-attachments/assets/7af7d9bd-cbe4-4a0b-8d64-d1722cab287f" /><img width="350" alt="image" src="https://github.com/user-attachments/assets/4af13b67-31d8-43d0-9f9b-6afd14beee6d" /> - model selection <img width="350" alt="image" src="https://github.com/user-attachments/assets/5067399f-68ba-4744-8130-ea4220ceae3b" /><img width="350" alt="image" src="https://github.com/user-attachments/assets/914139af-8576-46bb-85eb-0559d5b83065" /> - admin panel model list <img width="350" alt="image" src="https://github.com/user-attachments/assets/99ce1c4f-2559-46d2-a817-21cb5ed69089" /><img width="350" alt="image" src="https://github.com/user-attachments/assets/256e5790-45a0-43e3-9923-f6c29aea89cd" /> - admin panel model page <img width="350" alt="image" src="https://github.com/user-attachments/assets/47595ab3-0321-4229-b292-4cb4a8415baa" /><img width="350" alt="image" src="https://github.com/user-attachments/assets/d8a0c6f8-86be-4468-8f57-4cf9b0fb6c4a" /> Used version: docker image `ghcr.io/open-webui/open-webui:9aa6abd2c800`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label
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#15035
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?