A couple weeks ago, I wrote a tutorial how to install Tailwind on Laravel. This will be the base of where we add dark mode support to our website.
Dark Mode?
Like it or not, dark mode is here to stay (for now), and I was resistant to the change until about a year ago. Now I cannot bare looking at a screen not in dark mode. Its like acid to the corneas.
A lot of sites are now offering an experience in both light and dark mode, but it doesn’t have to be as hard as it is to make a print, screen and mobile stylesheets. All we will need is a plugin for Tailwind and a new directive on the unity of an element.
Update Config Themes
We need to do a couple things to allow your tailwind to accept the dark utility. You can alternatively install a plugin to achieve this, too. For the sake of simplicity, we will just modify the tailwind configuration to allow for basic dark mode.
First, we need to extend the theme to define light and dark modes. This uses the css property prefers-color-scheme which can have light or dark values. It’s a CSS media feature used to detect if the user has requested the system use a light or dark color theme.
Lastly, we have to update the plugins to define the attribute dark: and what rule to do with that attribute.
Your tailwind.config.js should now look like this:
Now compile your styles and you are able to use dark mode now.
npm run devDark Mode!
You now have the dark: utility you can use in your HTML classes now.
If you have a light background and want to offer a dark alternative, your body class might look like this:
<body class="bg-yellow-300 text-gray-900
dark:bg-gray-900 dark:text-white">You can clone the repo where I have installed tailwind and the dark mode treatment here as a starting point. Feel free to fork and it your own. I have separated the commits into 3 steps. Installing Laravel, Installing Tailwindcss and enabling dark mode. Check out the commits here.