search
Ctrlk

⬛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?".

hashtag
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 colorsarrow-up-right 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:

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.

circle-info

All Petal Components support both light and dark out of the box

hashtag
Removing support toggling light and dark

If you can't be bothered supporting both, then you can pick one and run with it.

hashtag
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.

hashtag
I want dark mode only

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:

Remove all the switches - so a user can't toggle modes

Now, it should always be in dark mode.

PreviousComponentsNextBranding

Was this helpful?