Fix theme manager script

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

@@ -7,8 +7,31 @@
   },
   {
     "inputs": [
-      "Assets/js/theme-manager.js"
+      "Assets/js/constants.js",
+      "Assets/js/theme-loader.js"
+    ],
+    "watch": [
+      "Assets/js/constants.js",
+      "Assets/js/theme-loader.js"
+    ],
+    "output": "wwwroot/Scripts/theme-head.js"
+  },
+  {
+    "inputs": [
+      "Assets/js/theme-toggler.js"
+    ],
+    "watch": [
+      "Assets/js/theme-toggler.js"
     ],
     "output": "wwwroot/Scripts/theme-manager.js"
+  },
+  {
+    "inputs": [
+      "Assets/js/theme-toggler.js"
+    ],
+    "watch": [
+      "Assets/js/theme-toggler.js"
+    ],
+    "output": "wwwroot/Scripts/theme-toggler.js"
   }
 ]

src/OrchardCore.Themes/TheAdmin/Assets/js/header/theme/themeLoader.js → src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-loader.js

@@ -1,5 +1,3 @@
-// We add some classes to the body tag to restore the sidebar to the state is was before reload.
-// That state was saved to localstorage by userPreferencesPersistor.js
 // 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) {

src/OrchardCore.Modules/OrchardCore.Themes/ResourceManagementOptionsConfiguration.cs

@@ -1,28 +1,36 @@
 using Microsoft.Extensions.Options;
-using OrchardCore.Environment.Shell;
 using OrchardCore.ResourceManagement;
 
 namespace OrchardCore.Themes;
 
 public sealed class ResourceManagementOptionsConfiguration : IConfigureOptions<ResourceManagementOptions>
 {
-    private readonly ShellSettings _shellSettings;
+    private static readonly ResourceManifest _manifest;
 
-    public ResourceManagementOptionsConfiguration(ShellSettings shellSettings)
+    static ResourceManagementOptionsConfiguration()
     {
-        _shellSettings = shellSettings;
-    }
+        _manifest = new ResourceManifest();
 
-    public void Configure(ResourceManagementOptions options)
-    {
-        var manifest = new ResourceManifest();
+        _manifest
+            .DefineScript("theme-head")
+            .SetUrl("~/OrchardCore.Themes/Scripts/theme-head.min.js", "~/OrchardCore.Themes/Scripts/theme-head.js")
+            .SetVersion("1.0.0");
 
-        manifest
+        _manifest
             .DefineScript("theme-manager")
-            .SetAttribute("data-tenant-name", _shellSettings.Name)
             .SetUrl("~/OrchardCore.Themes/Scripts/theme-manager.min.js", "~/OrchardCore.Themes/Scripts/theme-manager.js")
+            .SetDependencies("theme-head")
             .SetVersion("1.0.0");
 
-        options.ResourceManifests.Add(manifest);
+        _manifest
+            .DefineScript("theme-toggler")
+            .SetUrl("~/OrchardCore.Themes/Scripts/theme-toggler.min.js", "~/OrchardCore.Themes/Scripts/theme-toggler.js")
+            .SetDependencies("theme-head")
+            .SetVersion("1.0.0");
+    }
+
+    public void Configure(ResourceManagementOptions options)
+    {
+        options.ResourceManifests.Add(_manifest);
     }
 }

src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-head.js

@@ -0,0 +1,60 @@
+/*
+** NOTE: This file is generated by Gulp and should not be edited directly!
+** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp.
+*/
+
+var darkThemeName = 'dark';
+var lightThemeName = 'light';
+var tenantName = document.currentScript.dataset.tenantName;
+var themeStoreKeySuffix = 'theme';
+var getTenantName = function getTenantName() {
+  return tenantName || document.documentElement.getAttribute('data-tenant') || 'default';
+};
+var getStoreKeySuffix = function getStoreKeySuffix() {
+  return themeStoreKeySuffix || 'theme';
+};
+var getStoreKey = function getStoreKey() {
+  return "".concat(getTenantName(), "-").concat(getStoreKeySuffix());
+};
+var getStoredTheme = function getStoredTheme() {
+  return localStorage.getItem(getStoreKey());
+};
+var setStoredTheme = function setStoredTheme(theme) {
+  return localStorage.setItem(getStoreKey(), theme);
+};
+var isDarkMedia = function isDarkMedia() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+var getPreferredTheme = function getPreferredTheme() {
+  var storedTheme = getStoredTheme();
+  if (storedTheme) {
+    return storedTheme;
+  }
+  return isDarkMedia() ? darkThemeName : lightThemeName;
+};
+var setTheme = function setTheme(theme) {
+  if (theme === 'auto') {
+    document.documentElement.setAttribute('data-bs-theme', isDarkMedia() ? darkThemeName : lightThemeName);
+  } else {
+    document.documentElement.setAttribute('data-bs-theme', theme);
+  }
+};
+// We need to apply the classes BEFORE the page is rendered. 
+// That is why we use a MutationObserver instead of document.Ready().
+var themeObserver = new MutationObserver(function (mutations) {
+  for (var i = 0; i < mutations.length; i++) {
+    for (var j = 0; j < mutations[i].addedNodes.length; j++) {
+      if (mutations[i].addedNodes[j].tagName == 'BODY') {
+        setTheme(getPreferredTheme());
+
+        // we're done: 
+        themeObserver.disconnect();
+      }
+      ;
+    }
+  }
+});
+themeObserver.observe(document.documentElement, {
+  childList: true,
+  subtree: true
+});

src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-manager.js

@@ -3,39 +3,48 @@
 ** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp.
 */
 
-var darkThemeName = 'dark';
-var lightThemeName = 'light';
-var tenantName = document.currentScript.dataset.tenantName;
-var themeStoreKeySuffix = 'theme';
-var getTenantName = function getTenantName() {
-  return tenantName || document.documentElement.getAttribute('data-tenant') || 'default';
-};
-var getStoreKeySuffix = function getStoreKeySuffix() {
-  return themeStoreKeySuffix || 'theme';
-};
-var getStoreKey = function getStoreKey() {
-  return "".concat(getTenantName(), "-").concat(getStoreKeySuffix());
-};
-var getStoredTheme = function getStoredTheme() {
-  return localStorage.getItem(getStoreKey());
-};
-var setStoredTheme = function setStoredTheme(theme) {
-  return localStorage.setItem(getStoreKey(), theme);
-};
-var isDarkMedia = function isDarkMedia() {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches;
-};
-var getPreferredTheme = function getPreferredTheme() {
-  var storedTheme = getStoredTheme();
-  if (storedTheme) {
-    return storedTheme;
-  }
-  return isDarkMedia() ? darkThemeName : lightThemeName;
-};
-var setTheme = function setTheme(theme) {
-  if (theme === 'auto') {
-    document.documentElement.setAttribute('data-bs-theme', isDarkMedia() ? darkThemeName : lightThemeName);
-  } else {
-    document.documentElement.setAttribute('data-bs-theme', theme);
-  }
-};
+(function () {
+  'use strict';
+
+  var showActiveTheme = function showActiveTheme(theme) {
+    var focus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var themeSwitcher = document.querySelector('#bd-theme');
+    if (!themeSwitcher) {
+      return;
+    }
+    var themeSwitcherText = document.querySelector('#bd-theme-text');
+    var activeThemeIcon = document.querySelector('.theme-icon-active');
+    var btnToActive = document.querySelector("[data-bs-theme-value=\"".concat(theme, "\"]"));
+    var svgOfActiveBtn = btnToActive.querySelector('.theme-icon');
+    btnToActive.classList.add('active');
+    btnToActive.setAttribute('aria-pressed', 'true');
+    activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML;
+    var themeSwitcherLabel = "".concat(themeSwitcherText.textContent, " (").concat(btnToActive.dataset.bsThemeValue, ")");
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);
+    var btnsToInactive = document.querySelectorAll("[data-bs-theme-value]:not([data-bs-theme-value=\"".concat(theme, "\"])"));
+    for (var i = 0; i < btnsToInactive.length; i++) {
+      btnsToInactive[i].classList.remove('active');
+      btnsToInactive[i].setAttribute('aria-pressed', 'false');
+    }
+    if (focus) {
+      themeSwitcher.focus();
+    }
+  };
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+    var storedTheme = getStoredTheme();
+    if (storedTheme !== lightThemeName && storedTheme !== darkThemeName) {
+      setTheme(getPreferredTheme());
+    }
+  });
+  window.addEventListener('DOMContentLoaded', function () {
+    showActiveTheme(getPreferredTheme());
+    document.querySelectorAll('[data-bs-theme-value]').forEach(function (toggle) {
+      toggle.addEventListener('click', function () {
+        var theme = toggle.getAttribute('data-bs-theme-value');
+        setStoredTheme(theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+      });
+    });
+  });
+})();

src/OrchardCore.Modules/OrchardCore.Themes/wwwroot/Scripts/theme-toggler.js

@@ -0,0 +1,50 @@
+/*
+** NOTE: This file is generated by Gulp and should not be edited directly!
+** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp.
+*/
+
+(function () {
+  'use strict';
+
+  var showActiveTheme = function showActiveTheme(theme) {
+    var focus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var themeSwitcher = document.querySelector('#bd-theme');
+    if (!themeSwitcher) {
+      return;
+    }
+    var themeSwitcherText = document.querySelector('#bd-theme-text');
+    var activeThemeIcon = document.querySelector('.theme-icon-active');
+    var btnToActive = document.querySelector("[data-bs-theme-value=\"".concat(theme, "\"]"));
+    var svgOfActiveBtn = btnToActive.querySelector('.theme-icon');
+    btnToActive.classList.add('active');
+    btnToActive.setAttribute('aria-pressed', 'true');
+    activeThemeIcon.innerHTML = svgOfActiveBtn.innerHTML;
+    var themeSwitcherLabel = "".concat(themeSwitcherText.textContent, " (").concat(btnToActive.dataset.bsThemeValue, ")");
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel);
+    var btnsToInactive = document.querySelectorAll("[data-bs-theme-value]:not([data-bs-theme-value=\"".concat(theme, "\"])"));
+    for (var i = 0; i < btnsToInactive.length; i++) {
+      btnsToInactive[i].classList.remove('active');
+      btnsToInactive[i].setAttribute('aria-pressed', 'false');
+    }
+    if (focus) {
+      themeSwitcher.focus();
+    }
+  };
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+    var storedTheme = getStoredTheme();
+    if (storedTheme !== lightThemeName && storedTheme !== darkThemeName) {
+      setTheme(getPreferredTheme());
+    }
+  });
+  window.addEventListener('DOMContentLoaded', function () {
+    showActiveTheme(getPreferredTheme());
+    document.querySelectorAll('[data-bs-theme-value]').forEach(function (toggle) {
+      toggle.addEventListener('click', function () {
+        var theme = toggle.getAttribute('data-bs-theme-value');
+        setStoredTheme(theme);
+        setTheme(theme);
+        showActiveTheme(theme, true);
+      });
+    });
+  });
+})();

src/OrchardCore.Themes/TheAdmin/Assets.json

@@ -44,19 +44,10 @@
   {
     "inputs": [
       "Assets/js/header/global/*.js",
-      "Assets/js/header/theme/*.js"
-    ],
-    "watch": [
-      "Assets/js/header/global/*.js",
-      "Assets/js/header/theme/*.js"
-    ],
-    "output": "wwwroot/js/TheAdmin-header.js"
-  },
-  {
-    "inputs": [
       "Assets/js/header/main/*.js"
     ],
     "watch": [
+      "Assets/js/header/global/*.js",
       "Assets/js/header/main/*.js"
     ],
     "output": "wwwroot/js/TheAdmin-main.js"

src/OrchardCore.Themes/TheAdmin/Manifest.cs

@@ -7,5 +7,12 @@
     Website = ManifestConstants.OrchardCoreWebsite,
     Version = ManifestConstants.OrchardCoreVersion,
     Description = "The default Admin theme.",
-    Tags = [ManifestConstants.AdminTag]
+    Dependencies =
+    [
+        "OrchardCore.Themes",
+    ],
+    Tags =
+    [
+        ManifestConstants.AdminTag,
+    ]
 )]

src/OrchardCore.Themes/TheAdmin/ResourceManagementOptionsConfiguration.cs

@@ -13,20 +13,14 @@ static ResourceManagementOptionsConfiguration()
 
             _manifest
                 .DefineScript("admin")
-                .SetDependencies("bootstrap", "admin-head", "jQuery")
+                .SetDependencies("bootstrap", "admin-main", "theme-toggler", "jQuery")
                 .SetUrl("~/TheAdmin/js/TheAdmin.min.js", "~/TheAdmin/js/TheAdmin.js")
                 .SetVersion("1.0.0");
 
-            _manifest
-                .DefineScript("admin-head")
-                .SetUrl("~/TheAdmin/js/TheAdmin-header.min.js", "~/TheAdmin/js/TheAdmin-header.js")
-                .SetDependencies("js-cookie", "theme-manager")
-                .SetVersion("1.0.0");
-
             _manifest
                 .DefineScript("admin-main")
                 .SetUrl("~/TheAdmin/js/TheAdmin-main.min.js", "~/TheAdmin/js/TheAdmin-main.js")
-                .SetDependencies("admin-head")
+                .SetDependencies("admin-head", "theme-head")
                 .SetVersion("1.0.0");
 
             _manifest

src/OrchardCore.Themes/TheAdmin/wwwroot/js/TheAdmin-main.js

@@ -3,6 +3,20 @@
 ** Any changes made directly to this file will be overwritten next time its asset group is processed by Gulp.
 */
 
+themeStoreKeySuffix = 'admintheme';
+var getAdminPreferenceKey = function getAdminPreferenceKey() {
+  return getTenantName() + '-adminPreferences';
+};
+var getAdminPreferences = function getAdminPreferences() {
+  return JSON.parse(localStorage.getItem(getAdminPreferenceKey()));
+};
+var setAdminPreferences = function setAdminPreferences(adminPreferences) {
+  var key = getAdminPreferenceKey();
+  localStorage.setItem(key, JSON.stringify(adminPreferences));
+  Cookies.set(key, JSON.stringify(adminPreferences), {
+    expires: 360
+  });
+};
 // We add some classes to the body tag to restore the sidebar to the state is was before reload.
 // That state was saved to localstorage by userPreferencesPersistor.js
 // We need to apply the classes BEFORE the page is rendered.

src/OrchardCore.Themes/TheTheme/Manifest.cs

@@ -7,5 +7,13 @@
     Website = ManifestConstants.OrchardCoreWebsite,
     Version = ManifestConstants.OrchardCoreVersion,
     Description = "The default Theme.",
-    Tags = ["Bootstrap", "Default"]
+    Dependencies =
+    [
+        "OrchardCore.Themes",
+    ],
+    Tags =
+    [
+        "Bootstrap",
+        "Default",
+    ]
 )]