The Theme Controller component provides a plethora of pre-built sub-components that can be used to build a custom theme switcher.
The ThemeController component is a Builder component rather than
your standard Slotable ViewComponent.
This means that instead of the component providing slots, and handling where your custom components are inserted, the developer utilizes helper methods on the component to choose where the sub-components are rendered.
In the examples below, we use the HAML = syntax to output the rendered
sub-components, whereas typical components use the HAML - syntax to
"pass" the component to a slot.
One of the most basic sub-components is the theme preview icon. It shows a
visual representation of the theme using the base, primary,
secondary, and accent colors as little dots inside of a rounded
square.
= daisy_theme_controller do |theme_controller|
.flex.flex-col.sm:flex-row.gap-4.items-start.sm:items-center
- theme_controller.themes.each do |theme|
.flex.flex-row.gap-2.items-center
= theme_controller.build_theme_preview(theme)
= theme.humanize
When a theme radio input is selected, the theme's page will change to the value of the the input.
We provide a custom name of docs-radio-theme so that this example
doesn't interfere with the header theme or other examples.
However, because we are only using the radio inputs, we do NOT
call the setTheme() method, and thus we do NOT save these changes
to localStorage.
You can also build a custom switcher by using all of the sub-components in combination.
Note that the daisy_theme_controller may need to be the parent of
your custom switcher to ensure that it appropriately sets up the
Stimulus controller.
In the example below, the dropdown doesn't render custom content when
using the with_item helper, so the Stimulus controller wouldn't be
applied if the order were switched.
= daisy_theme_controller do |tc|
= daisy_dropdown do |dropdown|
- dropdown.with_button(css: "btn-error", icon: "swatch", title: "Themes", right_icon: "chevron-down")
- tc.themes.each do |theme|
- dropdown.with_item do
= daisy_link(href: "#", css: "no-underline", html: { data: { action: "click->loco-theme#setTheme" } }) do
= tc.build_radio_input(theme, name: "docs-custom-theme", css: "hidden peer")
= tc.build_theme_preview(theme)
= theme.humanize
= hero_icon "check", css: "size-4 invisible peer-checked:visible"
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.