--- title: "TailwindCSS on Rails: Dark Mode" author: "Yaroslav Shmarov" date: "2024-07-05" canonical_url: "https://blog.superails.com/tailwindcss-dark-mode" markdown_url: "https://blog.superails.com/tailwindcss-dark-mode.md" description: "Previously I wrote about implementing Dark Mode with pure CSS. To implement Dark Mode with TailwindCSS, you simply use the dark: variant." tags: ["rails","tailwindcss","dark-mode"] license: "GNU AGPL v3. Credit Yaroslav Shmarov and link the canonical URL." --- # TailwindCSS on Rails: Dark Mode Previously I wrote about implementing [Dark Mode with pure CSS](https://blog.superails.com/ruby-on-rails-dark-mode). #### 1. Dark mode CSS To implement Dark Mode with TailwindCSS, you simply use the `dark:` variant. ```html
+ ``` Now, all the `dark:` classes will be applied by default! #### 3. Toggle dark mode You can use JS to add/remove the `dark` class from the document. You can store the users' choice in the database, or in the **cookies** (localStorage). Let's use StimulusJS for this ```shell rails g stimulus theme ``` ```js // app/javascript/controllers/theme_controller.js import { Controller } from "@hotwired/stimulus" //
// <%= button_to "🌞 Light", "#", data: { action: "theme#light" } %> // <%= button_to "🌙 Dark", "#", data: { action: "theme#dark" } %> //
// Connects to data-controller="theme" export default class extends Controller { connect() { if (localStorage.getItem('theme') === 'dark') { this.dark(); } } dark(e) { e.preventDefault(); localStorage.setItem('theme', 'dark'); document.documentElement.classList.add('dark'); } light(e) { e.preventDefault(); localStorage.removeItem('theme'); document.documentElement.classList.remove('dark'); } } ``` Final result: ![toggle dark mode](https://blog.superails.com/assets/images/toggle-dark-mode.gif) If you want to go deeper and set `[:light, :dark, :system_default]` varians, you can read these: - [Tailwind: dark mode](https://tailwindcss.com/docs/dark-mode) - [Flowbite: dark mode](https://flowbite.com/docs/customize/dark-mode/)