Add dynamic logo rendering for light and dark modes

lib/plutonium/configuration.rb

@@ -91,6 +91,9 @@ class AssetConfiguration
       # @return [String] path to logo file
       attr_accessor :logo
 
+      # @return [String] path to logo file for dark mode
+      attr_accessor :logo_dark
+
       # @return [String] path to favicon file
       attr_accessor :favicon
 
@@ -125,6 +128,8 @@ def configuration
     # @return [void]
     def configure
       yield(configuration)
+
+      configuration.assets.logo_dark ||= configuration.assets.logo
     end
   end
 end

lib/plutonium/helpers/assets_helper.rb

@@ -32,14 +32,7 @@ def resource_favicon_tag
       # @param classname [String] CSS class name for the image tag
       # @return [ActiveSupport::SafeBuffer] HTML image tag
       def resource_logo_tag(classname:)
-        image_tag(resource_logo_asset, class: classname)
-      end
-
-      # Get the logo asset path
-      #
-      # @return [String] path to the logo asset
-      def resource_logo_asset
-        Plutonium.configuration.assets.logo
+        render Plutonium::UI::Display::Components::Logo.new(classname:)
       end
 
       # Get the stylesheet asset path

lib/plutonium/ui/display/components/logo.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Components
+        class Logo < Phlexi::Display::Components::Base
+          include Phlex::Rails::Helpers::ImageTag
+
+          def initialize(classname:, logos: nil)
+            @classname = classname
+            @logos = logos || {
+              light: Plutonium.configuration.assets.logo,
+              dark: Plutonium.configuration.assets.logo_dark
+            }
+          end
+
+          def view_template
+            div(class: "flex",
+              data: {
+                controller: "logo",
+                action: "color-mode:changed@document->logo#updateFromEvent"
+              }) do
+              @logos.each do |mode, path|
+                image_tag(path, class: @classname, data: {logo_target: mode})
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

src/js/controllers/color_mode_controller.js

@@ -29,6 +29,8 @@ export default class extends Controller {
     // Update button state
     this.currentValue = mode;
 
+    this.dispatch("changed", { detail: { mode }, target: document });
+
     // Show/hide icons
     this.toggleIcons(mode);
   }

src/js/controllers/logo_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
+
+// connects to data-controller="logo"
+export default class extends Controller {
+  static targets = ["light", "dark"];
+
+  connect() {
+    const dark = document.documentElement.classList.contains("dark");
+    this.toggleLogo(dark);
+  }
+
+  updateFromEvent({ detail: { mode } }) {
+    this.toggleLogo(mode === "dark");
+  }
+
+  toggleLogo(dark) {
+    this.lightTarget.hidden = dark;
+    this.darkTarget.hidden = !dark;
+  }
+}

src/js/controllers/register_controllers.js

@@ -1,47 +1,49 @@
 // Import controllers here
-import ResourceHeaderController from "./resource_header_controller.js"
-import NestedResourceFormFieldsController from "./nested_resource_form_fields_controller.js"
-import FormController from "./form_controller.js"
-import ResourceDropDownController from "./resource_drop_down_controller.js"
-import ResourceCollapseController from "./resource_collapse_controller.js"
-import ResourceDismissController from "./resource_dismiss_controller.js"
-import FrameNavigatorController from "./frame_navigator_controller.js"
-import ColorModeController from "./color_mode_controller.js"
-import EasyMDEController from "./easymde_controller.js"
-import SlimSelectController from "./slim_select_controller.js"
-import FlatpickrController from "./flatpickr_controller.js"
-import IntlTelInputController from "./intl_tel_input_controller.js"
-import SelectNavigatorController from "./select_navigator.js"
-import ResourceTabListController from "./resource_tab_list_controller.js"
-import AttachmentInputController from "./attachment_input_controller.js"
-import AttachmentPreviewController from "./attachment_preview_controller.js"
-import AttachmentPreviewContainerController from "./attachment_preview_container_controller.js"
-import SidebarController from "./sidebar_controller.js"
-import PasswordVisibilityController from "./password_visibility_controller.js"
-import RemoteModalController from "./remote_modal_controller.js"
-import KeyValueStoreController from "./key_value_st\ore_controller.js"
+import ResourceHeaderController from "./resource_header_controller.js";
+import NestedResourceFormFieldsController from "./nested_resource_form_fields_controller.js";
+import FormController from "./form_controller.js";
+import ResourceDropDownController from "./resource_drop_down_controller.js";
+import ResourceCollapseController from "./resource_collapse_controller.js";
+import ResourceDismissController from "./resource_dismiss_controller.js";
+import FrameNavigatorController from "./frame_navigator_controller.js";
+import ColorModeController from "./color_mode_controller.js";
+import EasyMDEController from "./easymde_controller.js";
+import SlimSelectController from "./slim_select_controller.js";
+import FlatpickrController from "./flatpickr_controller.js";
+import IntlTelInputController from "./intl_tel_input_controller.js";
+import SelectNavigatorController from "./select_navigator.js";
+import ResourceTabListController from "./resource_tab_list_controller.js";
+import AttachmentInputController from "./attachment_input_controller.js";
+import AttachmentPreviewController from "./attachment_preview_controller.js";
+import AttachmentPreviewContainerController from "./attachment_preview_container_controller.js";
+import SidebarController from "./sidebar_controller.js";
+import PasswordVisibilityController from "./password_visibility_controller.js";
+import RemoteModalController from "./remote_modal_controller.js";
+import KeyValueStoreController from "./key_value_st\ore_controller.js";
+import LogoController from "./logo_controller.js";
 
 export default function (application) {
   // Register controllers here
-  application.register("password-visibility", PasswordVisibilityController)
-  application.register("sidebar", SidebarController)
-  application.register("resource-header", ResourceHeaderController)
-  application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
-  application.register("form", FormController)
-  application.register("resource-drop-down", ResourceDropDownController)
-  application.register("resource-collapse", ResourceCollapseController)
-  application.register("resource-dismiss", ResourceDismissController)
-  application.register("frame-navigator", FrameNavigatorController)
-  application.register("color-mode", ColorModeController)
-  application.register("easymde", EasyMDEController)
-  application.register("slim-select", SlimSelectController)
-  application.register("flatpickr", FlatpickrController)
-  application.register("intl-tel-input", IntlTelInputController)
-  application.register("select-navigator", SelectNavigatorController)
-  application.register("resource-tab-list", ResourceTabListController)
-  application.register("attachment-input", AttachmentInputController)
-  application.register("attachment-preview", AttachmentPreviewController)
-  application.register("attachment-preview-container", AttachmentPreviewContainerController)
-  application.register("remote-modal", RemoteModalController)
-  application.register("key-value-store", KeyValueStoreController)
+  application.register("password-visibility", PasswordVisibilityController);
+  application.register("sidebar", SidebarController);
+  application.register("resource-header", ResourceHeaderController);
+  application.register("nested-resource-form-fields", NestedResourceFormFieldsController);
+  application.register("form", FormController);
+  application.register("resource-drop-down", ResourceDropDownController);
+  application.register("resource-collapse", ResourceCollapseController);
+  application.register("resource-dismiss", ResourceDismissController);
+  application.register("frame-navigator", FrameNavigatorController);
+  application.register("color-mode", ColorModeController);
+  application.register("easymde", EasyMDEController);
+  application.register("slim-select", SlimSelectController);
+  application.register("flatpickr", FlatpickrController);
+  application.register("intl-tel-input", IntlTelInputController);
+  application.register("select-navigator", SelectNavigatorController);
+  application.register("resource-tab-list", ResourceTabListController);
+  application.register("attachment-input", AttachmentInputController);
+  application.register("attachment-preview", AttachmentPreviewController);
+  application.register("attachment-preview-container", AttachmentPreviewContainerController);
+  application.register("remote-modal", RemoteModalController);
+  application.register("key-value-store", KeyValueStoreController);
+  application.register("logo", LogoController);
 }