Migrate OC.Themes

darkmode toggler

src/OrchardCore.Modules/OrchardCore.Themes/package.json → src/OrchardCore.Modules/OrchardCore.Themes/Assets/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@orchardcore/themes",
   "version": "1.0.0",
+  "type": "module",
   "dependencies": {
     "@popperjs/core": "2.11.8",
     "bootstrap": "5.3.3"

src/OrchardCore.Modules/OrchardCore.Themes/Assets/ts/constants.ts

@@ -0,0 +1,59 @@
+const darkThemeName = "dark";
+const lightThemeName = "light";
+const themeStoreKeySuffix = "theme";
+
+const getTenantName = () =>
+    document.documentElement.getAttribute("data-tenant") || "default";
+
+const getStoreKeySuffix = () => themeStoreKeySuffix || "theme";
+
+const getStoreKey = () => `${getTenantName()}-${getStoreKeySuffix()}`;
+
+const getStoredTheme = () => localStorage.getItem(getStoreKey());
+
+const setStoredTheme = (theme: string | null) => {
+    if (theme) {
+        localStorage.setItem(getStoreKey(), theme);
+    }
+};
+
+const isDarkMedia = () =>
+    window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme();
+    if (storedTheme) {
+        return storedTheme;
+    }
+
+    return isDarkMedia() ? darkThemeName : lightThemeName;
+};
+
+const setTheme = (theme: string | null) => {
+    if (!theme) {
+        return;
+    }
+
+    if (theme === "auto") {
+        document.documentElement.setAttribute(
+            "data-bs-theme",
+            isDarkMedia() ? darkThemeName : lightThemeName
+        );
+    } else {
+        document.documentElement.setAttribute("data-bs-theme", theme ?? "");
+    }
+};
+
+export {
+    darkThemeName,
+    lightThemeName,
+    themeStoreKeySuffix,
+    getTenantName,
+    getStoreKeySuffix,
+    getStoreKey,
+    getStoredTheme,
+    setStoredTheme,
+    isDarkMedia,
+    getPreferredTheme,
+    setTheme,
+};

src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-loader.js → src/OrchardCore.Modules/OrchardCore.Themes/Assets/ts/theme-head.ts

@@ -1,16 +1,19 @@
+import { getPreferredTheme, setTheme } from "./constants";
+
 // We need to apply the classes BEFORE the page is rendered. 
 // That is why we use a MutationObserver instead of document.Ready().
 const themeObserver = new MutationObserver(function (mutations) {
 
     for (let i = 0; i < mutations.length; i++) {
         for (let j = 0; j < mutations[i].addedNodes.length; j++) {
 
-            if (mutations[i].addedNodes[j].tagName == 'BODY') {
+            const addedNode = mutations[i].addedNodes[j] as HTMLElement;
+            if (addedNode.tagName === 'BODY') {
                 setTheme(getPreferredTheme());
 
                 // we're done: 
                 themeObserver.disconnect();
-            };
+            }
         }
     }
 });