LogoLogo
v1.5.0
v1.5.0
  • 🌸What is Petal Pro?
  • πŸ’‘Changelog
  • ⏫Upgrade guide
  • Guides
    • πŸš€Creating a web app from start to finish
  • πŸ‘©β€πŸ³Recipes
    • πŸ’How to apply a recipe with git cherry pick
    • #️⃣UUIDs
    • ✍️First/Last name
    • πŸ“¦NPM packages
    • πŸ—ΊοΈGoogle Maps
  • Fundamentals
    • πŸ’ΏInstallation
    • πŸ“‚Folder structure
    • πŸ—ƒοΈIncluded Pages
    • πŸ˜€Users & Authentication
    • 🏒Organizations & Multitenancy
    • 🧊Components
    • ⬛Dark mode
    • 🎨Branding
    • 🌱Seeding
    • πŸ“„Layouts & Menus
    • πŸ› οΈBackground Tasks and Jobs
    • πŸ”§Util & Helpers
    • πŸ“§Emails
    • πŸͺJavascript Hooks
    • πŸ“šExtra Hex Libraries
    • πŸ—οΈGenerators & Page Builder
    • πŸ—£οΈTranslations
    • πŸ–οΈContributing
    • πŸ›«Deployment
    • πŸ›‘οΈTesting
Powered by GitBook
On this page
  • If you decide to support both light and dark color schemes
  • Removing support toggling light and dark

Was this helpful?

  1. Fundamentals

Dark mode

PreviousComponentsNextBranding

Last updated 2 years ago

Was this helpful?

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.

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.

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:

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.

⬛
Tailwind colors
Some examples of Tailwind colors
Remove all the switches - so a user can't toggle modes
Remove all the switches - so a user can't toggle modes