How to add a toggle button for dark mode with Biff and Tailwind

_howto.md

How to add a toggle button for dark mode with Biff and Tailwind

By default, Tailwind's dark mode classes will take effect automatically if the user's operating system is already set to dark mode. Follow these instructions if you would also like to provide a toggle button so the user can override the operating system setting.

Set darkMode: 'class' in tailwind.config.js:

module.exports = {
  darkMode: 'class',
  // ...
}

Add the provided darkmode.js file to resources/darkmode.js. Inline it into your HTML so that it runs immediately when the page loads:

(defn some-page [ctx]
  (biff/base-html
   (merge ctx {:base/head [[:script (biff/unsafe (slurp (io/resource "darkmode.js")))]]})
   ...))

Then add a button to your UI that calls toggleDarkMode():

[:button {:onclick "toggleDarkMode()"} "Toggle"]

darkmode.js

// Adapted from https://tailwindcss.com/docs/dark-mode#supporting-system-preference-and-manual-selection

if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}
var darkModeOn = document.documentElement.classList.contains('dark');

function toggleDarkMode () {
  if (darkModeOn) {
    document.documentElement.classList.remove('dark');
    localStorage.theme = 'light';
  } else {
    document.documentElement.classList.add('dark');
    localStorage.theme = 'dark';
  }
  darkModeOn = !darkModeOn;
}