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>
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.
📋 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+)
b94dc76implement system wide light/dark mode option 🔦27153ddremove unused variable6f3acb3update theme handling and persist selection using Svelte storef1716f4add event listener in app.html to handle system theme changesdb0712aMerge branch 'dev' into feat/system-wide-themef55dae3fix merge conflictf25a967add system theme ⚙️ option to select menu549408dAdd setContext import to +layout.svelte41cb6d7remove duplicate "System" in select menua57586ause 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
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
Changed
applyThemefunction🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.