Fix Wysiwyg/Trumbowyg editor colors when dark theme enabled

src/OrchardCore.Modules/OrchardCore.ContentFields/Assets.json

@@ -37,14 +37,20 @@
   },
   {
     "inputs": [
-      "Assets/trumbowyg.media.tag.js"
+      "Assets/js/trumbowyg.media.tag.js"
     ],
     "output": "wwwroot/Scripts/trumbowyg.media.tag.js"
   },
   {
     "inputs": [
-      "Assets/trumbowyg.media.url.js"
+      "Assets/js/trumbowyg.media.url.js"
     ],
     "output": "wwwroot/Scripts/trumbowyg.media.url.js"
+  },
+  {
+    "inputs": [
+      "Assets/js/trumbowyg.theme.js"
+    ],
+    "output": "wwwroot/Scripts/trumbowyg.theme.js"
   }
 ]

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

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+    function setTheme() {
+        var isDark = getPreferredTheme() == darkThemeName;
+
+        document
+            .querySelectorAll('.trumbowyg-wrapper')
+            .forEach((element) =>
+                element.classList.toggle('trumbowyg-dark', isDark)
+            );
+    }
+
+    const mutationObserver = new MutationObserver(setTheme);
+    mutationObserver.observe(document.documentElement, { attributes: true });
+
+    setTheme();
+});
+

src/OrchardCore.Modules/OrchardCore.ContentFields/ResourceManagementOptionsConfiguration.cs

@@ -0,0 +1,37 @@
+using Microsoft.Extensions.Options;
+using OrchardCore.ResourceManagement;
+
+namespace OrchardCore.ContentFields;
+
+public sealed class ResourceManagementOptionsConfiguration : IConfigureOptions<ResourceManagementOptions>
+{
+    private static readonly ResourceManifest _manifest;
+
+    static ResourceManagementOptionsConfiguration()
+    {
+        _manifest = new ResourceManifest();
+
+        _manifest
+            .DefineScript("trumbowyg-theme")
+            .SetUrl("~/OrchardCore.ContentFields/Scripts/trumbowyg.theme.min.js", "~/OrchardCore.ContentFields/Scripts/trumbowyg.theme.js")
+            .SetDependencies("trumbowyg", "admin-head")
+            .SetVersion("1.0.0");
+
+        _manifest
+            .DefineScript("trumbowyg-media-url")
+            .SetUrl("~/OrchardCore.ContentFields/Scripts/trumbowyg.media.url.min.js", "~/OrchardCore.ContentFields/Scripts/trumbowyg.media.url.js")
+            .SetDependencies("trumbowyg")
+            .SetVersion("1.0.0");
+
+        _manifest
+            .DefineScript("trumbowyg-media-tag")
+            .SetUrl("~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.min.js", "~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.js")
+            .SetDependencies("trumbowyg")
+            .SetVersion("1.0.0");
+    }
+
+    public void Configure(ResourceManagementOptions options)
+    {
+        options.ResourceManifests.Add(_manifest);
+    }
+}

src/OrchardCore.Modules/OrchardCore.ContentFields/Startup.cs

@@ -1,6 +1,7 @@
 using System;
 using Fluid;
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Options;
 using OrchardCore.ContentFields.Drivers;
 using OrchardCore.ContentFields.Fields;
 using OrchardCore.ContentFields.Handlers;
@@ -16,6 +17,7 @@
 using OrchardCore.Data.Migration;
 using OrchardCore.Indexing;
 using OrchardCore.Modules;
+using OrchardCore.ResourceManagement;
 using OrchardCore.Users;
 
 namespace OrchardCore.ContentFields
@@ -24,6 +26,8 @@ public sealed class Startup : StartupBase
     {
         public override void ConfigureServices(IServiceCollection services)
         {
+            services.AddTransient<IConfigureOptions<ResourceManagementOptions>, ResourceManagementOptionsConfiguration>();
+
             services.Configure<TemplateOptions>(o =>
             {
                 o.MemberAccessStrategy.Register<BooleanField>();

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

@@ -11,18 +11,20 @@
 <script asp-name="trumbowyg-plugins" version="2" at="Foot"></script>
 <style asp-name="trumbowyg-plugins" version="2"></style>
 <script asp-name="trumbowyg-shortcodes" at="Foot"></script>
+<script asp-name="trumbowyg-theme" at="Foot"></script>
+
 @if (trumbowygSettings.InsertMediaWithUrl)
 {
-<script asp-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.url.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.url.js" depends-on="trumbowyg" at="Foot"></script>
+    <script asp-name="trumbowyg-media-url" at="Foot"></script>
 }
 else
 {
-<script asp-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.js" depends-on="trumbowyg" at="Foot"></script>
+    <script asp-name="trumbowyg-media-tag" at="Foot"></script>
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Html)_FieldWrapper">
     <label asp-for="Html" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
-    <div class="@Orchard.GetEndClasses()">
+    <div class="@Orchard.GetEndClasses("trumbowyg-wrapper")">
         @await DisplayAsync(await New.ShortcodeModal())
         @if (culture.IsRightToLeft())
         {
@@ -59,6 +61,7 @@ else
         </text>
     }
 }    
+
     $(function () {
         @if (!string.IsNullOrEmpty(trumbowygSettings.Options))
         {

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

@@ -8,13 +8,13 @@
 }
 
 <style asp-name="trumbowyg" version="2"></style>
-<script asp-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.js" depends-on="trumbowyg" at="Foot"></script>
+<script asp-name="trumbowyg-media-tag" at="Foot"></script>
 <script asp-name="trumbowyg-shortcodes" at="Foot"></script>
-
+<script asp-name="trumbowyg-theme" at="Foot"></script>
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Html)_FieldWrapper">
     <label asp-for="Html" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
-    <div class="@Orchard.GetEndClasses()">
+    <div class="@Orchard.GetEndClasses("trumbowyg-wrapper")">
         @await DisplayAsync(await New.ShortcodeModal())
         @if (culture.IsRightToLeft())
         {

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

@@ -0,0 +1,18 @@
+/*
+** 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.
+*/
+
+document.addEventListener('DOMContentLoaded', function () {
+  function setTheme() {
+    var isDark = getPreferredTheme() == darkThemeName;
+    document.querySelectorAll('.trumbowyg-wrapper').forEach(function (element) {
+      return element.classList.toggle('trumbowyg-dark', isDark);
+    });
+  }
+  var mutationObserver = new MutationObserver(setTheme);
+  mutationObserver.observe(document.documentElement, {
+    attributes: true
+  });
+  setTheme();
+});

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_trumbowyg.scss

@@ -2,68 +2,43 @@
     font-size: 16px;
 }
 
-[dir] .trumbowyg-box {
+[dir] .trumbowyg-box,
+[dir] .trumbowyg-dark .trumbowyg-box {
     border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
     border-radius: var(--bs-border-radius);
     background-color: var(--bs-body-bg);
     color: var(--bs-body-color);
 }
 
-[dir] trumbowyg-editor-box {
+[dir] .trumbowyg-editor-box,
+[dir] .trumbowyg-dark .trumbowyg-editor-box {
     background-color: var(--bs-body-bg);
     color: var(--bs-body-color);
 }
 
-[dir] .trumbowyg-button-pane {
+[dir] .trumbowyg-button-pane,
+[dir] .trumbowyg-dark .trumbowyg-button-pane {
     border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
-    background-color: var(--bs-border-color);
-    padding: 0;
 }
 
-.trumbowyg-box svg, .trumbowyg-modal svg {
-    color: var(--bs-body-color);
-    fill: var(--bs-body-color);
-}
-
-[dir] .trumbowyg-button-pane button {
-    margin-bottom: 0 !important;
+[dir] .trumbowyg-button-pane .trumbowyg-button-group:not(:empty),
+[dir] .trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty) {
+    &::after {
+        background: var(--bs-border-color);
+    }
 }
 
-[dir] .trumbowyg-dropdown {
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
+[dir] .trumbowyg-dropdown,
+[dir] .trumbowyg-dark .trumbowyg-dropdown {
     border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
 }
 
-[dir] .trumbowyg-dropdown button:hover, [dir] .trumbowyg-dropdown button:focus {
-    background-color: var(--bs-body-color) !important;
-    color: var(--bs-body-bg) !important;
-}
-
-[dir] .trumbowyg-button-pane .trumbowyg-open-dropdown::after {
-    border-top-color: var(--bs-body-color);
-}
-
-[dir] .trumbowyg-dropdown button {
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
-}
-
 .trumbowyg-fullscreen {
     z-index: var(--oc-editor-fullscreen);
 }
 
-[dir] .trumbowyg-fullscreen.trumbowyg-box, [dir] .trumbowyg-fullscreen .trumbowyg-editor-box {
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
-}
-
-.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
-    color: var(--bs-body-color);
-    fill: var(--bs-body-color);
-}
-
-[dir] .trumbowyg-box .trumbowyg-editor th, [dir] .trumbowyg-box .trumbowyg-editor td {
+[dir] .trumbowyg-box .trumbowyg-editor th,
+[dir] .trumbowyg-box .trumbowyg-editor td {
     border-width: var(--bs-border-width, 1px);
     border-style: var(--bs-border-style, solid);
     border-color: var(--bs-border-color, #dee2e6);

src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css

@@ -8589,68 +8589,41 @@ ul.ui-sortable:not(:has(> li)) {
   font-size: 16px;
 }
 
-[dir] .trumbowyg-box {
+[dir] .trumbowyg-box,
+[dir] .trumbowyg-dark .trumbowyg-box {
   border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
   border-radius: var(--bs-border-radius);
   background-color: var(--bs-body-bg);
   color: var(--bs-body-color);
 }
 
-[dir] trumbowyg-editor-box {
+[dir] .trumbowyg-editor-box,
+[dir] .trumbowyg-dark .trumbowyg-editor-box {
   background-color: var(--bs-body-bg);
   color: var(--bs-body-color);
 }
 
-[dir] .trumbowyg-button-pane {
+[dir] .trumbowyg-button-pane,
+[dir] .trumbowyg-dark .trumbowyg-button-pane {
   border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
-  background-color: var(--bs-border-color);
-  padding: 0;
-}
-
-.trumbowyg-box svg, .trumbowyg-modal svg {
-  color: var(--bs-body-color);
-  fill: var(--bs-body-color);
 }
 
-[dir] .trumbowyg-button-pane button {
-  margin-bottom: 0 !important;
+[dir] .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after,
+[dir] .trumbowyg-dark .trumbowyg-button-pane .trumbowyg-button-group:not(:empty)::after {
+  background: var(--bs-border-color);
 }
 
-[dir] .trumbowyg-dropdown {
-  background-color: var(--bs-body-bg);
-  color: var(--bs-body-color);
+[dir] .trumbowyg-dropdown,
+[dir] .trumbowyg-dark .trumbowyg-dropdown {
   border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
 }
 
-[dir] .trumbowyg-dropdown button:hover, [dir] .trumbowyg-dropdown button:focus {
-  background-color: var(--bs-body-color) !important;
-  color: var(--bs-body-bg) !important;
-}
-
-[dir] .trumbowyg-button-pane .trumbowyg-open-dropdown::after {
-  border-top-color: var(--bs-body-color);
-}
-
-[dir] .trumbowyg-dropdown button {
-  background-color: var(--bs-body-bg);
-  color: var(--bs-body-color);
-}
-
 .trumbowyg-fullscreen {
   z-index: var(--oc-editor-fullscreen);
 }
 
-[dir] .trumbowyg-fullscreen.trumbowyg-box, [dir] .trumbowyg-fullscreen .trumbowyg-editor-box {
-  background-color: var(--bs-body-bg);
-  color: var(--bs-body-color);
-}
-
-.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
-  color: var(--bs-body-color);
-  fill: var(--bs-body-color);
-}
-
-[dir] .trumbowyg-box .trumbowyg-editor th, [dir] .trumbowyg-box .trumbowyg-editor td {
+[dir] .trumbowyg-box .trumbowyg-editor th,
+[dir] .trumbowyg-box .trumbowyg-editor td {
   border-width: var(--bs-border-width, 1px);
   border-style: var(--bs-border-style, solid);
   border-color: var(--bs-border-color, #dee2e6);