Phlex Components
x
1
2
3
4
5
6
<div>
  <div data-controller="toggle-theme">
    <div class="dark:hidden" data-action="click->toggle-theme#setDarkTheme"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></button></div>
    <div class="hidden dark:inline-block" data-action="click->toggle-theme#setLightTheme"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 w-9"><svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></button></div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render(TestView.new) do
  ThemeToggle do |toggle|
    toggle.light_mode do
      Button(variant: :ghost, icon: true) do
        plain(helpers.lucide_icon("sun", class: "w-4 h-4"))
      end
    end
    toggle.dark_mode do
      Button(variant: :ghost, icon: true) do
        plain(helpers.lucide_icon("moon", class: "w-4 h-4"))
      end
    end
  end
end

No notes provided.

No params configured.