Breaking News: Grepper is joining You.com. Read the official announcement!

detect system dark mode tailwind css

Add Answer

Dead Dormouse answered on April 12, 2021 Popularity 9/10 Helpfulness 2/10

answer detect system dark mode tailwind css

related tailwind css dark mode

related Dark Mode in Tailwind CSS based on users selection

detect system dark mode tailwind css

Comment

// toggle  
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
  if (darkTheme.matches) {
       document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
       }

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: detect javascript mode system tailwind-css

Link to this answer
Share Copy Link

Contributed on Jan 30 2022

Dead Dormouse

0 Answers Avg Quality 2/10

Closely Related Answers

tailwind css dark mode

Comment

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark Mode!!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Example Text
  </p>
</div>

<script>
  // Change in Tailwinds Config.
  module.exports = {
  darkMode: 'media',
}
</script>

Popularity 10/10 Helpfulness 4/10 Language html

Source: tailwindcss.com

Tags: html

Link to this answer
Share Copy Link

Contributed on Apr 12 2021

jub0t

0 Answers Avg Quality 2/10

Dark Mode in Tailwind CSS based on users selection

Comment

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
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')

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: tailwindcss.com

Tags: mode

Link to this answer
Share Copy Link

Contributed on May 27 2023

Adorable Angelfish

0 Answers Avg Quality 2/10

detect system dark mode tailwind css

Contents

More Related Answers

detect system dark mode tailwind css

Closely Related Answers

tailwind css dark mode

Dark Mode in Tailwind CSS based on users selection

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.