[PR #1115] [MERGED] feat: system os light/dark mode option 🔦 #20580

New Issue

GiteaMirror · 2026-04-20T03:03:43-05:00

GiteaMirror commented

2026-04-20 03:03:43 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/1115
Author: @dannyl1u
Created: 3/9/2024
Status: ✅ Merged
Merged: 3/18/2024
Merged by: @tjbck

Base: dev ← Head: feat/system-wide-theme

📝 Commits (10+)

b94dc76 implement system wide light/dark mode option 🔦
27153dd remove unused variable
6f3acb3 update theme handling and persist selection using Svelte store
f1716f4 add event listener in app.html to handle system theme changes
db0712a Merge branch 'dev' into feat/system-wide-theme
f55dae3 fix merge conflict
f25a967 add system theme ⚙️ option to select menu
549408d Add setContext import to +layout.svelte
41cb6d7 remove duplicate "System" in select menu
a57586a use IIFE in app.html to prevent FOUC

📊 Changes

3 files changed (+66 additions, -33 deletions)

View changed files

📝 src/app.html (+28 -11)
📝 src/lib/components/chat/Settings/General.svelte (+37 -21)
📝 src/lib/stores/index.ts (+1 -1)

📄 Description

Pull Request Checklist

Description: Briefly describe the changes in this pull request.
Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
Documentation: Have you updated relevant documentation?
Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?

Description

Add support for system OS light and dark themes to the web application, improving the user experience and providing a more seamless integration with the user's preferences. Closes https://github.com/open-webui/open-webui/issues/1065

Changelog Entry

Added

Added System option to the theme menu which automatically detects the system's color scheme (light or dark) and applies it as the default theme. This ensures a consistent user experience that aligns with the user's system settings
Dynamic Theme Switching: The application dynamically updates its theme when the system's color scheme changes. This ensures that the application's appearance remains consistent with the system's settings even when they are altered while the application is running.

Changed

Refactor - moved the theme logic to its own applyTheme function
Refactor - add event listener in app.html to update theme automatically if system theme changes
Refactor - IIFE (Immediately Invoked Function Expression) in app.html to prevent FOUC
Refactor - manage theme state using Svelte store

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/1115 **Author:** [@dannyl1u](https://github.com/dannyl1u) **Created:** 3/9/2024 **Status:** ✅ Merged **Merged:** 3/18/2024 **Merged by:** [@tjbck](https://github.com/tjbck) **Base:** `dev` ← **Head:** `feat/system-wide-theme` --- ### 📝 Commits (10+) - [`b94dc76`](https://github.com/open-webui/open-webui/commit/b94dc767ff60396b811508bcaa2dd23f1cd07382) implement system wide light/dark mode option 🔦 - [`27153dd`](https://github.com/open-webui/open-webui/commit/27153ddb037167c3a4b64df4bf4e13f1a7b59a74) remove unused variable - [`6f3acb3`](https://github.com/open-webui/open-webui/commit/6f3acb347d76068b12c653e035566773e19ea7e7) update theme handling and persist selection using Svelte store - [`f1716f4`](https://github.com/open-webui/open-webui/commit/f1716f45b9a9ce46aa8e98be9f414ff2c3d1cae4) add event listener in app.html to handle system theme changes - [`db0712a`](https://github.com/open-webui/open-webui/commit/db0712aefd3eb6eebbc02d454b95c4cdc0fc9304) Merge branch 'dev' into feat/system-wide-theme - [`f55dae3`](https://github.com/open-webui/open-webui/commit/f55dae3027bc31690a380c89ccdea73a8c5a8098) fix merge conflict - [`f25a967`](https://github.com/open-webui/open-webui/commit/f25a967a0baff37052cfae3281860e18b823edc9) add system theme ⚙️ option to select menu - [`549408d`](https://github.com/open-webui/open-webui/commit/549408d8082f59fc9d5b32d9c69f1e0b1e5e0971) Add setContext import to +layout.svelte - [`41cb6d7`](https://github.com/open-webui/open-webui/commit/41cb6d7a54f480d0f6094c9df62ee60fcc8075d8) remove duplicate "System" in select menu - [`a57586a`](https://github.com/open-webui/open-webui/commit/a57586a2b7f95d2d355a2a1b06aa6f7fcceb033a) use IIFE in app.html to prevent FOUC ### 📊 Changes **3 files changed** (+66 additions, -33 deletions) <details> <summary>View changed files</summary> 📝 `src/app.html` (+28 -11) 📝 `src/lib/components/chat/Settings/General.svelte` (+37 -21) 📝 `src/lib/stores/index.ts` (+1 -1) </details> ### 📄 Description ## Pull Request Checklist - [x] **Description:** Briefly describe the changes in this pull request. - [x] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description. - [x] **Documentation:** Have you updated relevant documentation? - [x] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation? --- ## Description Add support for system OS light and dark themes to the web application, improving the user experience and providing a more seamless integration with the user's preferences. Closes https://github.com/open-webui/open-webui/issues/1065 --- ### Changelog Entry ### Added - Added System option to the theme menu which automatically detects the system's color scheme (light or dark) and applies it as the default theme. This ensures a consistent user experience that aligns with the user's system settings - Dynamic Theme Switching: The application dynamically updates its theme when the system's color scheme changes. This ensures that the application's appearance remains consistent with the system's settings even when they are altered while the application is running. ### Changed - Refactor - moved the theme logic to its own `applyTheme` function - Refactor - add event listener in app.html to update theme automatically if system theme changes - Refactor - IIFE (Immediately Invoked Function Expression) in app.html to prevent FOUC - Refactor - manage theme state using Svelte store --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-04-20 03:03:43 -05:00

GiteaMirror closed this issue