Originally created by @ThatOneCalculator on GitHub (Dec 29, 2023).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/316
Custom themes would be nice. Here's an example of one I made: https://github.com/rose-pine/ollama-webui
Wow, This looks amazing! I'll think of ways to try to incorporate this in the near future, Thanks for the suggestion!
<!-- gh-comment-id:1872206558 -->
@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!
@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.
<!-- gh-comment-id:1873445429 -->
@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):
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.
<!-- gh-comment-id:1873463355 -->
@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.
@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.
<!-- gh-comment-id:2088173586 -->
@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.
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.
<!-- gh-comment-id:2088768301 -->
@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.
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?
<!-- gh-comment-id:2159491754 -->
@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} ... >
```
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?
<!-- gh-comment-id:2316223465 -->
@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?
@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.
<!-- gh-comment-id:2635953954 -->
@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.
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.
<!-- gh-comment-id:2744131321 -->
@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.
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.
<!-- gh-comment-id:2816830978 -->
@seIIers 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.
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.
<!-- gh-comment-id:2996439353 -->
@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.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Originally created by @ThatOneCalculator on GitHub (Dec 29, 2023).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/316
Custom themes would be nice. Here's an example of one I made: https://github.com/rose-pine/ollama-webui
@Morethanevil commented on GitHub (Dec 29, 2023):
Looks great, would love this too
@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!
@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):
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.
@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/themesdirectory.@justinh-rahb commented on GitHub (May 1, 2024):
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.
@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?
@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?
@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.
@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.
@seIIers commented on GitHub (Apr 19, 2025):
I just appended the following to the onMount function in
+layout.svelte:and added the option
<option value="rose-pine dark">🪻Rosé Pine</option>inGeneral.svelte.A little hacky but it works prior to any testing. I also think this could be accomplished before hydration via
localStorage.getItem('theme')inapp.html, but the latter is working well for me.@klamil commented on GitHub (Jun 23, 2025):
Hey does this still work for you? I just tried it out but with no luck.