Class: Plutonium::UI::ColorModeSelector

Inherits:
Plutonium::UI::Component::Base show all
Defined in:
lib/plutonium/ui/color_mode_selector.rb

Overview

Component for selecting color mode (light/dark/system)

Examples:

Basic usage

render ColorModeSelector.new

Constant Summary collapse

COMMON_CLASSES =

Common CSS classes used across the component

{
  button: "inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer dark:hover:text-white dark:text-gray-200 hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200",
  icon: "w-5 h-5"
}.freeze
COLOR_MODES =

Available color modes with their associated icons and actions

[
  {mode: "light", icon: Phlex::TablerIcons::Sun, action: "setLightColorMode"},
  {mode: "dark", icon: Phlex::TablerIcons::Moon, action: "setDarkColorMode"}
].freeze

Instance Method Summary collapse

Methods included from Plutonium::UI::Component::Behaviour

#around_template

Methods included from Plutonium::UI::Component::Tokens

#classes, #tokens

Methods included from Plutonium::UI::Component::Kit

#BuildActionButton, #BuildBlock, #BuildBreadcrumbs, #BuildColorModeSelector, #BuildDynaFrameContent, #BuildDynaFrameHost, #BuildEmptyCard, #BuildFrameNavigatorPanel, #BuildPageHeader, #BuildPanel, #BuildSkeletonTable, #BuildTabList, #BuildTableInfo, #BuildTablePagination, #BuildTableScopesBar, #BuildTableSearchBar, #method_missing, #respond_to_missing?

Dynamic Method Handling

This class handles dynamic methods through the method_missing method in the class Plutonium::UI::Component::Kit

Instance Method Details

#view_template ⇒ void

This method returns an undefined value.

Renders the color mode selector



23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
# File 'lib/plutonium/ui/color_mode_selector.rb', line 23

def view_template
  button(
    type: "button",
    class: COMMON_CLASSES[:button],
    data_controller: "color-mode",
    data_action: "click->color-mode#toggleMode",
    data_color_mode_current_value: "light", # Default to light mode
    title: "Toggle color mode"
  ) do
    # Both icons rendered, only one visible at a time
    render Phlex::TablerIcons::Sun.new(class: "#{COMMON_CLASSES[:icon]} color-mode-icon-light", data: {color_mode_icon: "light"})
    render Phlex::TablerIcons::Moon.new(class: "#{COMMON_CLASSES[:icon]} color-mode-icon-dark", data: {color_mode_icon: "dark"})
  end
end