gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-28 09:33:38 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Theming: color scheme selectors (#8839)

Browse Source
This commit is contained in:
Adorian Doran 2026-02-26 16:16:52 +02:00 committed by GitHub
commit 28fe73911f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
apps/client/src/widgets/containers/root_container.ts
View File

@ -13,6 +13,8 @@ import FlexContainer from "./flex_container.js";
* *
* For convenience, the root container has a few class selectors that can be used to target some global state: * For convenience, the root container has a few class selectors that can be used to target some global state:
* *
* - `#root-container.light-theme`, indicates whether the current color scheme is light.
* - `#root-container.dark-theme`, indicates whether the current color scheme is dark.
* - `#root-container.virtual-keyboard-opened`, on mobile devices if the virtual keyboard is open. * - `#root-container.virtual-keyboard-opened`, on mobile devices if the virtual keyboard is open.
* - `#root-container.horizontal-layout`, if the current layout is horizontal. * - `#root-container.horizontal-layout`, if the current layout is horizontal.
* - `#root-container.vertical-layout`, if the current layout is horizontal. * - `#root-container.vertical-layout`, if the current layout is horizontal.
@ -34,6 +36,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
window.visualViewport?.addEventListener("resize", () => this.#onMobileResize()); window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
} }
this.#initTheme();
this.#setDeviceSpecificClasses(); this.#setDeviceSpecificClasses();
this.#setMaxContentWidth(); this.#setMaxContentWidth();
this.#setMotion(); this.#setMotion();
@ -67,6 +70,20 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
} }
} }
#initTheme() {
const colorSchemeChangeObserver = matchMedia("(prefers-color-scheme: dark)")
colorSchemeChangeObserver.addEventListener("change", () => this.#updateColorScheme());
this.#updateColorScheme();
}
#updateColorScheme() {
const colorScheme = readCssVar(document.body, "theme-style").asString();
document.body.classList.toggle("light-theme", colorScheme === "light");
document.body.classList.toggle("dark-theme", colorScheme === "dark");
}
#onMobileResize() { #onMobileResize() {
const viewportHeight = window.visualViewport?.height ?? window.innerHeight; const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
const windowHeight = Math.max(window.innerHeight, this.originalWindowHeight); // inner height changes when keyboard is opened, we need to compare with the original height to detect it. const windowHeight = Math.max(window.innerHeight, this.originalWindowHeight); // inner height changes when keyboard is opened, we need to compare with the original height to detect it.