github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-05-08 04:16:03 -05:00
Code Issues 1.3k Packages Projects Releases 126 Wiki Activity

feat: custom themes #137

New Issue
Closed
opened 2025-11-11 14:07:38 -06:00 by GiteaMirror · 12 comments
GiteaMirror commented 2025-11-11 14:07:38 -06:00
Owner
Copy Link

Originally created by @ThatOneCalculator on GitHub (Dec 29, 2023).

Custom themes would be nice. Here's an example of one I made: https://github.com/rose-pine/ollama-webui

rose_pine_ollama

Originally created by @ThatOneCalculator on GitHub (Dec 29, 2023). Custom themes would be nice. Here's an example of one I made: https://github.com/rose-pine/ollama-webui ![rose_pine_ollama](https://github.com/ollama-webui/ollama-webui/assets/44733677/9a0df610-8dc3-45d7-b7d3-1b426826ece3)
GiteaMirror commented 2025-11-11 14:07:39 -06:00
Author
Owner
Copy Link

@Morethanevil commented on GitHub (Dec 29, 2023):

Looks great, would love this too

@Morethanevil commented on GitHub (Dec 29, 2023): Looks great, would love this too
GiteaMirror commented 2025-11-11 14:07:39 -06:00
Author
Owner
Copy Link

@tjbck commented on GitHub (Dec 29, 2023):

Wow, This looks amazing! I'll think of ways to try to incorporate this in the near future, Thanks for the suggestion!

@tjbck commented on GitHub (Dec 29, 2023): Wow, This looks amazing! I'll think of ways to try to incorporate this in the near future, Thanks for the suggestion!
GiteaMirror commented 2025-11-11 14:07:39 -06:00
Author
Owner
Copy Link

@ThatOneCalculator commented on GitHub (Jan 1, 2024):

It's Rosé Pine. If you looked at the link or clicked on the repo, it clearly says rose-pine/ollama-webui.

@ThatOneCalculator commented on GitHub (Jan 1, 2024): It's Rosé Pine. If you looked at the link or clicked on the repo, it clearly says `rose-pine/ollama-webui`.
GiteaMirror commented 2025-11-11 14:07:39 -06:00
Author
Owner
Copy Link

@ThatOneCalculator commented on GitHub (Jan 1, 2024):

You don't have to clarify edits when editing... or self-react. Discussion of tools outside of ollama-webui are off-topic and not related to this issue.

@ThatOneCalculator commented on GitHub (Jan 1, 2024): You don't have to clarify edits when editing... or self-react. Discussion of tools outside of ollama-webui are off-topic and not related to this issue.
GiteaMirror commented 2025-11-11 14:07:39 -06:00
Author
Owner
Copy Link

@ruben-symbiose commented on GitHub (May 1, 2024):

Is adding custom themes documented somewhere? I would like to make some changes and save them as a new theme that can be selected in the theme dropdown menu under Settings > General.

The Rosé Pine theme theme is not showing up in this menu, even though it is present in the static/themes directory.

@ruben-symbiose commented on GitHub (May 1, 2024): Is adding custom themes documented somewhere? I would like to make some changes and save them as a new theme that can be selected in the theme dropdown menu under Settings > General. The Rosé Pine theme theme is not showing up in this menu, even though it is present in the `static/themes` directory.
GiteaMirror commented 2025-11-11 14:07:40 -06:00
Author
Owner
Copy Link

@justinh-rahb commented on GitHub (May 1, 2024):

Is adding custom themes documented somewhere? I would like to make some changes and save them as a new theme that can be selected in the theme dropdown menu under Settings > General.

The Rosé Pine theme theme is not showing up in this menu, even though it is present in the static/themes directory.

We removed it due to it having fallen quite far behind in upkeep. If someone would like to spruce it up, we'd be happy to add it back to the list. As of now, there's no way to easily add custom themes without making changes to the code. It's been suggested as a feature to have some way to mount a custom theme .css and have a menu option "Custom" if it's present, we'll see if we get a PR.

@justinh-rahb commented on GitHub (May 1, 2024): > Is adding custom themes documented somewhere? I would like to make some changes and save them as a new theme that can be selected in the theme dropdown menu under Settings > General. > > The Rosé Pine theme theme is not showing up in this menu, even though it is present in the `static/themes` directory. We removed it due to it having fallen quite far behind in upkeep. If someone would like to spruce it up, we'd be happy to add it back to the list. As of now, there's no way to _easily_ add custom themes without making changes to the code. It's been suggested as a feature to have some way to mount a custom theme .css and have a menu option "Custom" if it's present, we'll see if we get a PR.
GiteaMirror commented 2025-11-11 14:07:40 -06:00
Author
Owner
Copy Link

@arnoldblake commented on GitHub (Jun 10, 2024):

What would be the appropriate way to bring the theme up to date?

I see that in app.html there are various checks to detect a preferred theme that result in document.documentElement.classList.add() being called.

if (localStorage?.theme && localStorage?.theme.includes('oled')) { document.documentElement.style.setProperty('--color-gray-900', '#000000'); document.documentElement.style.setProperty('--color-gray-950', '#000000'); document.documentElement.classList.add('dark');

Inspecting various component I can see dark: being appended to tailwind classes.

<div class=" bg-white dark:bg-gray-800 min-h-screen">

I'll be honest I dont quite understand how dark:bg-gray-800 works in this example, is dark being seen as a conditional that applies the tailwind style?

Could the classes be refactored into something like the following?

<script>
...

const base = 'bg-white min-h-screen';
$: classBase = `${base} ${$$props.class ?? ''}`;

...
</script>

< ... class={classBase} ... >
@arnoldblake commented on GitHub (Jun 10, 2024): What would be the appropriate way to bring the theme up to date? I see that in app.html there are various checks to detect a preferred theme that result in `document.documentElement.classList.add()` being called. `if (localStorage?.theme && localStorage?.theme.includes('oled')) { document.documentElement.style.setProperty('--color-gray-900', '#000000'); document.documentElement.style.setProperty('--color-gray-950', '#000000'); document.documentElement.classList.add('dark');` Inspecting various component I can see dark: being appended to tailwind classes. `<div class=" bg-white dark:bg-gray-800 min-h-screen">` I'll be honest I dont quite understand how dark:bg-gray-800 works in this example, is dark being seen as a conditional that applies the tailwind style? Could the classes be refactored into something like the following? ``` <script> ... const base = 'bg-white min-h-screen'; $: classBase = `${base} ${$$props.class ?? ''}`; ... </script> < ... class={classBase} ... > ```
GiteaMirror commented 2025-11-11 14:07:40 -06:00
Author
Owner
Copy Link

@aleprj commented on GitHub (Aug 28, 2024):

I was trying to figure out how to do a custom theme (even if I need to change the code) and I'm also a bit confused about how the themes work. Is there any documentation available on this?
I see I can take rose-pine as an example (and use the sections it was commented out as a guide), but i have no idea of what is out of date in this theme... How could I figure out what is missing?

@aleprj commented on GitHub (Aug 28, 2024): I was trying to figure out how to do a custom theme (even if I need to change the code) and I'm also a bit confused about how the themes work. Is there any documentation available on this? I see I can take rose-pine as an example (and use the sections it was commented out as a guide), but i have no idea of what is out of date in this theme... How could I figure out what is missing?
GiteaMirror commented 2025-11-11 14:07:41 -06:00
Author
Owner
Copy Link

@NoobDeveloper412 commented on GitHub (Feb 5, 2025):

Exactly, there is no easy way to add custom themes, I am personally updating the tailwind.config.ts, and just using the newly added classes in the places where I need them.

@NoobDeveloper412 commented on GitHub (Feb 5, 2025): Exactly, there is no easy way to add custom themes, I am personally updating the tailwind.config.ts, and just using the newly added classes in the places where I need them.
GiteaMirror commented 2025-11-11 14:07:41 -06:00
Author
Owner
Copy Link

@jhchnc commented on GitHub (Mar 21, 2025):

For a quick and dirty theme, I've noticed that "loader.js" is left empty. That seems like a clever way to get into the front-end, but I want to know if that's inadvisable for some reason. Thanks.

@jhchnc commented on GitHub (Mar 21, 2025): For a quick and dirty theme, I've noticed that "loader.js" is left empty. That seems like a clever way to get into the front-end, but I want to know if that's inadvisable for some reason. Thanks.
GiteaMirror commented 2025-11-11 14:07:42 -06:00
Author
Owner
Copy Link

@sellerscrisp commented on GitHub (Apr 19, 2025):

I just appended the following to the onMount function in +layout.svelte:

theme.set(localStorage.theme);
if (localStorage.theme?.includes('rose-pine')) {
    document.documentElement.style.setProperty('--color-gray-800', '#26233a');
    document.documentElement.style.setProperty('--color-gray-850', '#191724');
    document.documentElement.style.setProperty('--color-gray-900', '#11111b');
    document.documentElement.style.setProperty('--color-gray-950', '#0c0a12');
    document.documentElement.classList.add('dark');
}

and added the option <option value="rose-pine dark">🪻Rosé Pine</option> in General.svelte.

A little hacky but it works prior to any testing. I also think this could be accomplished before hydration via localStorage.getItem('theme') in app.html, but the latter is working well for me.

@sellerscrisp commented on GitHub (Apr 19, 2025): I just appended the following to the onMount function in `+layout.svelte`: ```typescript theme.set(localStorage.theme); if (localStorage.theme?.includes('rose-pine')) { document.documentElement.style.setProperty('--color-gray-800', '#26233a'); document.documentElement.style.setProperty('--color-gray-850', '#191724'); document.documentElement.style.setProperty('--color-gray-900', '#11111b'); document.documentElement.style.setProperty('--color-gray-950', '#0c0a12'); document.documentElement.classList.add('dark'); } ``` and added the option ```<option value="rose-pine dark">🪻Rosé Pine</option>``` in `General.svelte`. A little hacky but it works prior to any testing. I also think this could be accomplished before hydration via `localStorage.getItem('theme')` in `app.html`, but the latter is working well for me.
GiteaMirror commented 2025-11-11 14:07:42 -06:00
Author
Owner
Copy Link

@klamil commented on GitHub (Jun 23, 2025):

I just appended the following to the onMount function in +layout.svelte:

theme.set(localStorage.theme);
if (localStorage.theme?.includes('rose-pine')) {
document.documentElement.style.setProperty('--color-gray-800', '#26233a');
document.documentElement.style.setProperty('--color-gray-850', '#191724');
document.documentElement.style.setProperty('--color-gray-900', '#11111b');
document.documentElement.style.setProperty('--color-gray-950', '#0c0a12');
document.documentElement.classList.add('dark');
}
and added the option <option value="rose-pine dark">🪻Rosé Pine</option> in General.svelte.

A little hacky but it works prior to any testing. I also think this could be accomplished before hydration via localStorage.getItem('theme') in app.html, but the latter is working well for me.

Hey does this still work for you? I just tried it out but with no luck.

@klamil commented on GitHub (Jun 23, 2025): > I just appended the following to the onMount function in `+layout.svelte`: > > theme.set(localStorage.theme); > if (localStorage.theme?.includes('rose-pine')) { > document.documentElement.style.setProperty('--color-gray-800', '#26233a'); > document.documentElement.style.setProperty('--color-gray-850', '#191724'); > document.documentElement.style.setProperty('--color-gray-900', '#11111b'); > document.documentElement.style.setProperty('--color-gray-950', '#0c0a12'); > document.documentElement.classList.add('dark'); > } > and added the option `<option value="rose-pine dark">🪻Rosé Pine</option>` in `General.svelte`. > > A little hacky but it works prior to any testing. I also think this could be accomplished before hydration via `localStorage.getItem('theme')` in `app.html`, but the latter is working well for me. Hey does this still work for you? I just tried it out but with no luck.
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#137
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?