⬛Dark mode
Last updated
Last updated
If you're new to supporting dark mode in your Phoenix applications, then when you start adding new templates and components you might get frustrated when you forget to add the dark Tailwind classes.
You will need to decide at the start of your project "am I going to support toggling between light and dark?".
You will need to ensure you add dark variants to any new HTML you write. It's usually quite simple.
Tailwind colors usually go from 50 - 900:
When you add a color to your element, all you need to do is write a corresponding dark mode equivalent. For example:
As you can see, it's just a matter of matching the number from the opposite end.
Light 100 needs a dark 900.
Light 600 needs a dark 400
One issue we've found is with text-gray-500. Instinctively you'd just leave this as it is. But we've found that it's hard to read in dark mode, so we recommend: text-gray-500 dark:text-gray-400.
All Petal Components support both light and dark out of the box
If you can't be bothered supporting both, then you can pick one and run with it.
Open up root.html.heex and ensure the <html> class doesn't have "dark" in it (by default it shouldn't be there anyway).
Do a global search for color_scheme_switch and remove all references to this component. By default, it should just be in layout.ex:
Now, it should always be in light mode.
Open up root.html.heex and ensure the <html> class includes "dark" in it.
Do a global search for color_scheme_switch and remove all references to this component. By default, it should just be in layout.ex:
Now, it should always be in dark mode.
