⬛
Dark mode
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.Some examples of Tailwind colors
When you add a color to your element, all you need to do is write a corresponding dark mode equivalent. For example:
<div class="text-gray-800">No dark support</div>
<div class="text-gray-800 dark:text-gray-200">Dark support</div>
<div class="bg-gray-200">No dark support</div>
<div class="bg-gray-200 dark:text-gray-800">Dark support</div>
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:Remove all the switches - so a user can't toggle modes
Now, it should always be in light mode.
Open up
root.html.heex and ensure the <html> class includes "dark" in it.<html lang="en" class="scroll-smooth dark">
...
</html>
Do a global search for
color_scheme_switch and remove all references to this component. By default, it should just be in layout.ex:Remove all the switches - so a user can't toggle modes
Now, it should always be in dark mode.
Last modified 1mo ago