Dark Mode

Back

Tailwind

https://v2.tailwindcss.com/docs/dark-mode (opens in a new tab)

Enabling dark mode

- <html>
+ <html class="dark">
 
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
 
</html>

with a bit js on page load

// default value from `prefers-color-scheme`, overrides from `localStorage`
 
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')
}
 
 
// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'
// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'
// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')