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

BUTTON_CLASSES = 
"inline-flex justify-center items-center p-2 text-[var(--pu-text-muted)] rounded-[var(--pu-radius-md)] cursor-pointer hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] transition-colors duration-200"
ICON_SIZE = 
18
ICON_STROKE = 
1.5

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, #BuildActionsDropdown, #BuildBlock, #BuildBreadcrumbs, #BuildBulkActionsToolbar, #BuildColorModeSelector, #BuildDynaFrameContent, #BuildDynaFrameHost, #BuildEmptyCard, #BuildFrameNavigatorPanel, #BuildPageHeader, #BuildPanel, #BuildRowActionsDropdown, #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 ⇒ Object 



13
14
15
16
17
18
19
20
21
22
23
24
25
 
# File 'lib/plutonium/ui/color_mode_selector.rb', line 13

def view_template
  button(
    type: "button",
    class: BUTTON_CLASSES,
    data_controller: "color-mode",
    data_action: "click->color-mode#toggleMode",
    title: "Toggle color mode"
  ) do
    render Phlex::TablerIcons::DeviceDesktop.new(size: ICON_SIZE, stroke: ICON_STROKE, class: "color-mode-icon-auto")
    render Phlex::TablerIcons::Sun.new(size: ICON_SIZE, stroke: ICON_STROKE, class: "color-mode-icon-light hidden")
    render Phlex::TablerIcons::Moon.new(size: ICON_SIZE, stroke: ICON_STROKE, class: "color-mode-icon-dark hidden")
  end
end