Skip to content

Instantly share code, notes, and snippets.

@jacobobryant

jacobobryant/_howto.md

Last active April 13, 2024 16:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jacobobryant/14834ada08b00242b28c2b36f4c0225d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jacobobryant/14834ada08b00242b28c2b36f4c0225d to your computer and use it in GitHub Desktop.
Download ZIP
How to add a toggle button for dark mode with Biff and Tailwind
Raw
_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"]
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment