From 44dc8cf00d3d1e335625cd5f65882ad889e15750 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 26 Feb 2026 15:52:27 +0200
Subject: [PATCH 1/2] Close #7932

---
 .../src/widgets/containers/root_container.ts      | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index 2e852033c4..698e741c37 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -34,6 +34,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
             window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
         }
 
+        this.#initTheme();
         this.#setDeviceSpecificClasses();
         this.#setMaxContentWidth();
         this.#setMotion();
@@ -67,6 +68,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() {
         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.

From a971640ffcc3cfd6ac5abb452554f676b0128bf9 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 26 Feb 2026 16:14:39 +0200
Subject: [PATCH 2/2] client: add some documentation

---
 apps/client/src/widgets/containers/root_container.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index 698e741c37..ccc3e8a9a1 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -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:
  *
+ * - `#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.horizontal-layout`, if the current layout is horizontal.
  * - `#root-container.vertical-layout`, if the current layout is horizontal.