Class: PhlexKit::ThemeToggle

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/theme_toggle/theme_toggle.rb

Overview

Light/dark theme switch built on Toggle. Ported from ruby_ui's RubyUI

ThemeToggle. The sibling phlex-kit--theme-toggle controller listens for the toggle's change event and flips :root (matching the token system). Only an actual user toggle is persisted to localStorage — with no stored choice the OS preference is followed live on every load.

The controller applies the stored theme at Stimulus connect, which is late enough to flash light-mode for returning dark-theme users. To avoid the FOUC, inline this in before any stylesheets:

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(wrapper: {}, aria: {}, **attrs) ⇒ ThemeToggle

Returns a new instance of ThemeToggle.



17
18
19
20
21
 
# File 'app/components/phlex_kit/theme_toggle/theme_toggle.rb', line 17

def initialize(wrapper: {}, aria: {}, **attrs)
  @wrapper = wrapper
  @aria = aria
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



23
24
25
26
27
28
29
30
31
32
 
# File 'app/components/phlex_kit/theme_toggle/theme_toggle.rb', line 23

def view_template(&block)
  # Merge caller wrapper/aria instead of splatting @attrs over the defaults —
  # a caller `wrapper:` would otherwise replace the hash wholesale and
  # silently delete the theme-toggle controller wiring.
  render PhlexKit::Toggle.new(
    aria: { label: "Toggle theme" }.merge(@aria),
    wrapper: mix({ data: { controller: "phlex-kit--theme-toggle", action: "phlex-kit--toggle:change->phlex-kit--theme-toggle#apply" } }, @wrapper),
    **@attrs, &block
  )
end