TW Elements - Dark Mode. Free UI/UX design course

Dark mode

Psst! On TWE website you can press shift + D to toggle dark/light mode.

For some time now, dark mode has ceased to be just a fashionable novelty, and has become a mandatory functionality of good design.

Thanks to Tailwind, the implementation of dark mode in our project is child's play.

All we have to do is, as with Hover or other states, use the appropriate modifier and then specify the condition.

The modifier for dark mode is keyword dark; HTML:

<div class="bg-white dark:bg-neutral-700">[...]</div>

So if we want our standard, light card with dark text to have a dark mode variant, we need to define the condition that when dark mode is turned on, the background of the card changes to dark (dark:bg-neutral-700) and the text of the card to light (dark:text-neutral-50).

<div class="block rounded-lg bg-white p-6 shadow-md dark:bg-neutral-700">
  <h5
    class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
    Light mode
  </h5>
  <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
    Dark mode reduces eye strain in low-light conditions, saves energy on
    OLED screens, and offers a visually refreshing aesthetic.
  </p>
</div>

System preferences

Dark mode in Tailwind supports (in most cases) the preferences of your operating system.

This means that Tailwind can detect whether you are using a dark or light theme on your computer and adapt to it.

Therefore, depending on whether you used dark mode or light mode on your computer, our site should be displayed in your preferred mode from the beginning.

That's just yet another cool feature of Tailwind CSS 😉

Dark mode in the Navbar

Take another look at the Navbar in our project.

All the components of TW Elements support dark mode by default. So if you press shift + D on this website, you will notice that also the Navbar below switches the mode.

If you look at Navbar's code, you'll notice the dark: modifier in many places. Now you know how it works.

<!-- Navbar -->
<nav
  class="flex-no-wrap relative flex w-full items-center justify-between bg-white py-2 shadow-md shadow-black/5 dark:bg-neutral-600 dark:shadow-black/10 lg:flex-wrap lg:justify-start lg:py-4"
  data-te-navbar-ref>
  [...]
</nav>
<!-- Navbar -->

Demo and source code for this lesson