Packages
moon
2.74.0
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/components/show_room_page/wizard/theme_options.ex
defmodule MoonWeb.Components.ShowRoomPage.Wizard.ThemeOptions do
@moduledoc false
use MoonWeb, :stateless_component
alias MoonWeb.Components.ShowRoomPage.Wizard.Card
alias Moon.Design.Switch
alias Moon.Icons.{OtherMoon, OtherSun}
prop(light_sidebar, :string)
prop(light_header, :string)
prop(toggle_sidebar_theme, :event)
prop(toggle_header_theme, :event)
def render(assigns) do
~F"""
<Card>
<:title>Effortless customization</:title>
<:description>Tailor your app's appearance to match your workflow. Moon offers a choice between dark and light theme. Select the one that suits your preferences.</:description>
<div class="flex gap-4">
<Switch
checked={!@light_sidebar}
on_change={@toggle_sidebar_theme}
on_bg_color="bg-roshi"
size="xs"
>
<:on_icon><OtherMoon /></:on_icon>
<:off_icon><OtherSun /></:off_icon>
</Switch>
<span>{(@light_sidebar && "Light theme sidebar") || "Dark theme sidebar"}</span>
</div>
<div class="flex gap-4">
<Switch
checked={!@light_header}
on_change={@toggle_header_theme}
on_bg_color="bg-roshi"
size="xs"
>
<:on_icon><OtherMoon /></:on_icon>
<:off_icon><OtherSun /></:off_icon>
</Switch>
<span>{(@light_header && "Light theme header") || "Dark theme header"}</span>
</div>
</Card>
"""
end
end