Eigene Open WebUI Themes erstellen

Obwohl Open WebUI keine eingebaute Theme-Unterstützung hat, kannst du das Aussehen ganz einfach anpassen, indem du eine eigene CSS-Datei in das Docker Image einbindest. Diese Anleitung zeigt dir, wie du deine eigene Theme-Version von Open WebUI erstellst.

Willst du ein vollständiges Beispiel sehen? Schau dir unser Open WebUI Theme Repository auf GitHub für eine komplette funktionierende Implementierung an.

Schau dir dieses wunderschöne (fragwürdige) pinke Theme an:

Voraussetzungen

• Docker auf deinem System installiert
• Grundlegende CSS-Kenntnisse
• Ein Texteditor

Schritt 1: Erstelle ein Dockerfile

Erstelle zuerst ein Dockerfile, das das Open WebUI Image erweitert:

FROM ghcr.io/open-webui/open-webui:git-49a928d

# Optional: Favicon Icons ersetzen
# COPY favicon.svg /app/build/static/favicon.svg
# COPY favicon.png /app/build/static/favicon.png
# COPY favicon.ico /app/build/static/favicon.ico

# Kopiere deine eigene CSS-Datei
COPY custom.css /app/build/static/custom.css

Wichtig: Verwende immer einen spezifischen Version-Tag (wie git-49a928d) anstatt main, um sicherzustellen, dass dein Theme bei Updates nicht kaputt geht. Prüfe die Open WebUI Releases für verfügbare Tags, besonders wenn du CUDA oder Ollama Support brauchst.

Schritt 2: Erstelle dein eigenes CSS

Erstelle eine custom.css Datei im gleichen Verzeichnis wie dein Dockerfile. Hier ist ein Beispiel-Theme mit einem Blau-Gelb Farbschema:

:root {
  --primary-text: #00487d;
  --primary-yellow: #ffd600;
  --primary-bg: #e2eef5;
  --hover-bg: #d4e3ed;
}

* {
  color: var(--primary-text) !important;
}

#send-message-button {
  background-color: var(--primary-yellow) !important;
}

#sidebar {
  background-color: var(--primary-bg) !important;
}

#sidebar > div *:hover {
  background-color: var(--hover-bg) !important;
}

[aria-label="Voice mode"] {
  background-color: var(--primary-yellow) !important;
}

.tippy-content {
  background-color: var(--primary-yellow) !important;
  border-color: var(--primary-yellow) !important;
}

.tippy-box {
  background-color: var(--primary-yellow) !important;
  border-color: var(--primary-yellow) !important;
}

button[type="submit"] {
  background-color: var(--primary-yellow) !important;
}

[role="switch"][aria-checked="true"] {
  background-color: var(--primary-yellow) !important;
}

button.px-3\.5.py-1\.5.text-sm.font-medium.bg-black.hover\:bg-gray-900.text-white.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-full {
  background-color: var(--primary-yellow) !important;
}

Schritt 3: CSS-Selektoren finden

Um andere Elemente anzupassen:

1. Öffne Open WebUI in deinem Browser
2. Rechtsklicke auf das Element, das du stylen möchtest
3. Wähle "Untersuchen" oder "Element untersuchen"
4. Finde den passenden CSS-Selektor
5. Füge ihn zu deiner custom.css mit !important hinzu, um bestehende Styles zu überschreiben

Schritt 4: Baue und starte dein eigenes Image

Baue dein Docker Image:

docker build -t my-custom-openwebui .

Starte dein gethemtes Open WebUI:

docker run -d -p 3000:8080 \
  -v open-webui:/app/backend/data \
  --name open-webui-custom \
  my-custom-openwebui

Die Kernfunktionalität von Open WebUI hat sich nicht geändert. Alle normalen Konfigurationen gelten weiterhin!

Tipps und Best Practices

• CSS-Variablen verwenden: Definiere Farben als CSS-Variablen für einfache theme-weite Änderungen
• Gründlich testen: Prüfe alle UI-Elemente, um sicherzustellen, dass dein Theme keine Funktionen kaputt macht
• Spezifische Selektoren verwenden: Manche Elemente brauchen sehr spezifische Selektoren wegen Open WebUIs Styling-Ansatz
• Versionskontrolle: Behalte dein Dockerfile und custom.css in der Versionskontrolle
• Änderungen dokumentieren: Kommentiere dein CSS, um dich zu erinnern, was jeder Override macht

Deployment

Willst du dein gethemtes Open WebUI schnell deployen? Schau dir unsere Anleitung zum Self-Hosting von OpenWebUI mit Ollama an, die dir zeigt, wie du Open WebUI in Minuten deployst. Einmal deployed, kannst du den Container einfach mit deinem eigenen Theme updaten.

Fazit

Eigene Themes für Open WebUI zu erstellen ist unkompliziert, wenn du den Prozess verstehst. Durch das Einbinden einer eigenen CSS-Datei in das Docker Image kannst du das Aussehen deiner Open WebUI Instanz komplett verändern. Denk daran, spezifische Version-Tags zu verwenden und deine Themes gründlich zu testen, bevor du sie in Produktion einsetzt :)

Viel Spaß beim Theming!

Jonas, Co-Founder von sliplane.io