⬛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?".
If you decide to support both light and dark color schemes
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:
<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.
Removing support toggling light and dark
If you can't be bothered supporting both, then you can pick one and run with it.
I want light mode only
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.
I want dark mode only
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:
Now, it should always be in dark mode.
Was this helpful?