Class: DocsUI::ThemeSwitcher

Inherits:
Phlex::HTML
  • Object
show all
Defined in:
app/components/docs_ui/theme_switcher.rb

Overview

daisyUI theme switcher — a dropdown of radio inputs with the theme-controller class. daisyUI swaps the page theme (data-theme on :root) via a CSS :has() selector; the docs-nav Stimulus controller additionally PERSISTS the choice to localStorage (change->docs-nav#selectTheme) and re-applies it on connect, and the anti-flash script (DocsUI::Shell) restores it before first paint — so the theme survives navigation without a flicker.

The offered themes come from DocsKit.configuration.themes and MUST match the themes enabled in the site's Tailwind @plugin "daisyui" { themes: ... } block.

Instance Method Summary collapse

Instance Method Details

#view_templateObject



14
15
16
17
18
19
20
21
22
23
24
25
# File 'app/components/docs_ui/theme_switcher.rb', line 14

def view_template
  div(class: "dropdown dropdown-end") do
    div(tabindex: "0", role: "button", class: "btn btn-sm btn-ghost gap-1") do
      render DocsUI::Icon.new("palette", class: "size-4")
      plain "Theme"
    end
    ul(tabindex: "0",
       class: "dropdown-content bg-base-300 rounded-box z-10 w-44 p-2 shadow-2xl max-h-96 overflow-y-auto") do
      themes.each { |theme| theme_option(theme) }
    end
  end
end