Feat: Refactor Theming for Improved Flexibility and Maintainability

[andifined-de]

Hello everyone,
I'd like to propose an improvement to the theming system in Open WebUI.

The Current Situation
The existing theming implementation has several limitations that make it difficult to manage and extend:

• Many styles, especially for the default light and dark themes, are hardcoded, making them inflexible.
• Creating custom themes, like the Rose Pine theme, requires overriding numerous CSS styles, often resorting to !important. This is brittle and hard to maintain. As new features and components are added, existing themes often break or require manual updates, creating an ongoing maintenance burden.

Proposed Solution
My proposal is to move towards a theming system based on semantic CSS variables.
This approach would allow developers to easily create a new theme by defining a set of core variables in a single CSS file and (if required) add some small changes to selectors.

Advantages

• Developers could create new themes without needing to understand the component structure deeply or fight specificity with !important.
• As long as new components use these semantic variables for styling, they will automatically be compatible with all existing and future themes. This makes the entire UI more robust.

Proposed Implementation Plan

1. Establish common variables (e.g. primary, text, background...), possibly with a dark variant (.my-theme.dark)
2. Systematically replace all hardcoded color values (e.g., gray-500) with the new semantic CSS variables (primary).
3. Rebuild the current default themes using this new technique. This will serve as a proof-of-concept and a template for new themes.

Backwards Compatibility
The current approach of overriding specific selectors in theme files could remain possible as a fallback. The new variable-based system would be the primary, recommended method, but this change wouldn't break existing, more simplistic theme overrides.

Future Enhancement
This new structure could easily be extended with tooling that automatically discovers theme files in the designated folder and makes them available in the UI, further simplifying the user experience.

I believe this change would make theming in Open WebUI significantly more powerful and developer-friendly. What are your thoughts on this proposal? Do you have preferences for variable names?