Dark mode

Main Website Downloads Roadmap Community

Search…

⬛

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:
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
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:
Remove all the switches - so a user can't toggle modes
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:
Remove all the switches - so a user can't toggle modes
Now, it should always be in dark mode.
​

Fundamentals - Previous

Components

Next - Fundamentals

Branding

Last modified 1mo ago

Copy link

Outline

If you decide to support both light and dark color schemes

Removing support toggling light and dark