diff --git a/src/platform/web/Platform.js b/src/platform/web/Platform.js
index 2481d256..e2628351 100644
--- a/src/platform/web/Platform.js
+++ b/src/platform/web/Platform.js
@@ -38,7 +38,7 @@ import {downloadInIframe} from "./dom/download.js";
 import {Disposables} from "../../utils/Disposables";
 import {parseHTML} from "./parsehtml.js";
 import {handleAvatarError} from "./ui/avatar";
-import {ThemeLoader} from "./ThemeLoader";
+import {ThemeLoader, COLOR_SCHEME_PREFERENCE} from "./ThemeLoader";
 
 function addScript(src) {
     return new Promise(function (resolve, reject) {
@@ -316,6 +316,15 @@ export class Platform {
         return this._themeLoader;
     }
 
+    get preferredColorScheme() {
+        if (window.matchMedia("(prefers-color-scheme: dark)")) {
+            return COLOR_SCHEME_PREFERENCE.DARK;
+        } else if (window.matchMedia("(prefers-color-scheme: light)")) {
+            return COLOR_SCHEME_PREFERENCE.LIGHT;
+        }
+        return undefined;
+    } 
+
     replaceStylesheet(newPath) {
         const head = document.querySelector("head");
         // remove default theme 
diff --git a/src/platform/web/ThemeLoader.ts b/src/platform/web/ThemeLoader.ts
index 256aed54..713c7a62 100644
--- a/src/platform/web/ThemeLoader.ts
+++ b/src/platform/web/ThemeLoader.ts
@@ -16,6 +16,8 @@ limitations under the License.
 
 import type {Platform} from "./Platform.js";
 
+export enum COLOR_SCHEME_PREFERENCE { DARK, LIGHT, }
+
 export class ThemeLoader {
     private _platform: Platform;
     private _themeMapping: Record<string, string> = {};
@@ -64,12 +66,12 @@ export class ThemeLoader {
             return theme;
         }
         // return default theme
-        if (window.matchMedia) {
-            if (window.matchMedia("(prefers-color-scheme: dark)")) {
+        const preference  = this._platform.preferredColorScheme;
+        switch (preference) {
+            case COLOR_SCHEME_PREFERENCE.DARK:
                 return this._platform.config["defaultTheme"].dark;
-            } else if (window.matchMedia("(prefers-color-scheme: light)")) {
+            case COLOR_SCHEME_PREFERENCE.LIGHT:
                 return this._platform.config["defaultTheme"].light;
-            }
         }
         return undefined;
     }