Fix theme manager script

src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml

@@ -83,5 +83,4 @@ else
             $(document).trigger('contentpreview:render');
         });
     });
-    $.trumbowyg.svgPath = '@Url.Content("~/OrchardCore.Resources/Styles/ui/icons.svg")';
 </script>

src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Trumbowyg.Edit.cshtml

@@ -76,5 +76,4 @@ else
             $(document).trigger('contentpreview:render');
         });
     });
-    $.trumbowyg.svgPath = '@Url.Content("~/OrchardCore.Resources/Styles/ui/icons.svg")';
 </script>

src/OrchardCore.Modules/OrchardCore.Html/Views/HtmlBodyPart-Wysiwyg.Edit.cshtml

@@ -13,6 +13,7 @@
 <style asp-name="trumbowyg" version="2"></style>
 <script asp-src="~/OrchardCore.Html/Scripts/trumbowyg.media.tag.min.js" debug-src="~/OrchardCore.Html/Scripts/trumbowyg.media.tag.js" depends-on="trumbowyg" at="Foot"></script>
 <script asp-name="trumbowyg-shortcodes" at="Foot"></script>
+<script asp-name="trumbowyg-theme" at="Foot"></script>
 
 @await DisplayAsync(await New.ShortcodeModal())
 

src/OrchardCore.Modules/OrchardCore.Resources/Assets.json

@@ -184,6 +184,13 @@
     ],
     "output": "wwwroot/Styles/trumbowyg/trumbowyg.css"
   },
+  {
+    "copy": true,
+    "inputs": [
+      "node_modules/trumbowyg/dist/ui/icons.svg"
+    ],
+    "output": "wwwroot/Scripts/trumbowyg/ui/icons.svg"
+  },
   {
     "generateRTL": true,
     "inputs": [

src/OrchardCore.Modules/OrchardCore.Resources/Assets/trumbowyg/js/trumbowyg.theme.js

@@ -1,6 +1,12 @@
 document.addEventListener('DOMContentLoaded', function () {
-    function setTheme() {
-        var isDark = getPreferredTheme() == darkThemeName;
+    const setTheme = () => {
+        var isDark = false;
+
+        if (typeof getPreferredTheme === 'function') {
+            isDark = getPreferredTheme() == (darkThemeName || 'dark');
+        } else {
+            isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
 
         document
             .querySelectorAll('.trumbowyg')

src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs

@@ -434,7 +434,7 @@ ResourceManifest BuildManifest()
             manifest
                 .DefineScript("trumbowyg-theme")
                 .SetUrl("~/OrchardCore.Resources/Scripts/trumbowyg/trumbowyg.theme.min.js", "~/OrchardCore.Resources/Scripts/trumbowyg/trumbowyg.theme.js")
-                .SetDependencies("trumbowyg", "theme-manager")
+                .SetDependencies("trumbowyg", "theme-head")
                 .SetVersion("1.0.0");
 
             manifest

src/OrchardCore.Modules/OrchardCore.Resources/wwwroot/Scripts/trumbowyg/trumbowyg.theme.js

@@ -4,12 +4,17 @@
 */
 
 document.addEventListener('DOMContentLoaded', function () {
-  function setTheme() {
-    var isDark = getPreferredTheme() == darkThemeName;
+  var setTheme = function setTheme() {
+    var isDark = false;
+    if (typeof getPreferredTheme === 'function') {
+      isDark = getPreferredTheme() == (darkThemeName || 'dark');
+    } else {
+      isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
     document.querySelectorAll('.trumbowyg').forEach(function (element) {
       return element.parentElement.classList.toggle('trumbowyg-dark', isDark);
     });
-  }
+  };
   var mutationObserver = new MutationObserver(setTheme);
   mutationObserver.observe(document.documentElement, {
     attributes: true,

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

@@ -7,7 +7,21 @@
   },
   {
     "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"
   }

src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/theme-manager.js → src/OrchardCore.Modules/OrchardCore.Themes/Assets/js/constants.js

@@ -1,9 +1,8 @@
 const darkThemeName = 'dark';
 const lightThemeName = 'light';
-const tenantName = document.currentScript.dataset.tenantName;
 const themeStoreKeySuffix = 'theme';
 
-const getTenantName = () => tenantName || document.documentElement.getAttribute('data-tenant') || 'default';
+const getTenantName = () => document.documentElement.getAttribute('data-tenant') || 'default';
 const getStoreKeySuffix = () => themeStoreKeySuffix || 'theme';
 const getStoreKey = () => `${getTenantName()}-${getStoreKeySuffix()}`;
 const getStoredTheme = () => localStorage.getItem(getStoreKey());

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,30 @@
 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);
+    public void Configure(ResourceManagementOptions options)
+    {
+        options.ResourceManifests.Add(_manifest);
     }
 }

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

@@ -0,0 +1,59 @@
+/*
+** 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 themeStoreKeySuffix = 'theme';
+var getTenantName = function getTenantName() {
+  return 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.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-manager", "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("theme-head", "js-cookie")
                 .SetVersion("1.0.0");
 
             _manifest

src/OrchardCore.Themes/TheAdmin/Views/Layout-Login.cshtml

@@ -13,7 +13,7 @@
     <link type="image/x-icon" rel="shortcut icon" href="~/TheAdmin/favicon.ico" />
 
     <!-- This script can't wait till the footer -->
-    <script asp-name="admin-head" version="1" at="Head"></script>
+    <script asp-name="admin-main" version="1" at="Head"></script>
 
     <!-- Bootstrap CSS -->
     @if (Orchard.IsRightToLeft())

src/OrchardCore.Themes/TheAdmin/Views/Layout-TwoFactor.cshtml

@@ -13,7 +13,7 @@
     <link type="image/x-icon" rel="shortcut icon" href="~/TheAdmin/favicon.ico" />
 
     <!-- This script can't wait till the footer -->
-    <script asp-name="admin-head" version="1" at="Head"></script>
+    <script asp-name="admin-main" version="1" at="Head"></script>
 
     <!-- Bootstrap CSS -->
     @if (Orchard.IsRightToLeft())