I was evaluating phoenix version 1.8.0-rc.0 together with the newly updated version of fluxon and trying to get the dark mode selection to automatically apply to the fluxon components.
I got it working with the following changes:
Add the following line to app.css:
@custom-variant dark (&:where(.dark, .dark *));
Add the following to the setTheme function in root.html.heex:
Since more people might be using tailwinds dark variant on their components, this might be something to include in phoenix by default, to increase adoption. In previous versions of phoenix, a light/dark mode selector was a something you had to build yourself. But now that we have the daisyui theme switcher, it might as well be enabled for other tailwind components by default.
Iâm working on my personal website and itâs the first time I really use full blown TailwindCSS (used it several times for prototyping but always ended up using my âown frameworkâ on production projects). I simply followed the suggestion of Tailwind but opted to go the attribute route.
I had done something similar first, but then I found that the phoenix theme selector would not move to system anymore, because it is based on the data-theme attribute. Thatâs why I switched to using the dark class.
You can easily change that. This is what Iâve done. Thought Iâm not using it as I change themes in a different way.
@doc """
Provides dark vs light theme toggle based on themes defined in app.css.
See <head> in root.html.heex which applies the theme before page load.
"""
def theme_toggle(assigns) do
~H"""
<div class="relative flex flex-row items-center border-1 border-surface-30 bg-surface-20 rounded-full">
<div class="absolute w-[33.33%] h-full rounded-full border-1 border-surface-30 bg-surface-10 brightness-110 left-0
[[data-theme-mode=user][data-theme=light]_&]:left-[33.33%] [[data-theme-mode=user][data-theme=dark]_&]:left-[66.66%] transition-[left]" />
<button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "system"})} class="flex p-2">
<.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
</button>
<button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "light"})} class="flex p-2">
<.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" />
</button>
<button phx-click={JS.dispatch("phx:set-theme", detail: %{theme: "dark"})} class="flex p-2">
<.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" />
</button>
</div>
"""
end
I added another attribute called that-theme-mode, that is either âsystemâ or âuserâ, where system is well, system based and âuserâ is user selected, be it âlightâ, âdarkâ or any other theme keyword.
