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

Dark Mode in Tailwind CSS based on users selection

Add Answer

Adorable Angelfish answered on April 12, 2021 Popularity 10/10 Helpfulness 2/10

answer Dark Mode in Tailwind CSS based on users selection

related detect system dark mode tailwind css

related tailwind css dark mode

related Setting darkmode using Tailwind

related dark mode toggle in tailwindcss

related tailwind dark mode class

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 selection tailwind-css whatever

Link to this answer
Share Copy Link

Contributed on May 27 2023

Adorable Angelfish

0 Answers Avg Quality 2/10

Closely Related Answers

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 4/10 Language javascript

Source: Grepper

Tags: detect de

Link to this answer
Share Copy Link

Contributed on Jan 30 2022

Dead Dormouse

0 Answers Avg Quality 2/10

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

Undefined

0 Answers Avg Quality 2/10

Setting darkmode using Tailwind

Comment

-1

<script>
    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark')
    }
</script>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: flowbite.com

Tags: darkmode darkmod

Link to this answer
Share Copy Link

Contributed on May 01 2022

Kenny

0 Answers Avg Quality 2/10

dark mode toggle in tailwindcss

Comment

-1

<button
  id="theme-toggle"
  type="button"
  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
>
  <svg
    id="theme-toggle-dark-icon"
    class="w-5 h-5 hidden"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
    ></path>
  </svg>
  <svg
    id="theme-toggle-light-icon"
    class="w-5 h-5 hidden"
    fill="currentColor"
    viewBox="0 0 20 20"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
      fill-rule="evenodd"
      clip-rule="evenodd"
    ></path>
  </svg>
</button>

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: www.freecodecamp.org

Tags: mode

Link to this answer
Share Copy Link

Contributed on Dec 23 2022

Faheem Khan

0 Answers Avg Quality 2/10

tailwind dark mode class

Comment

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

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: tailwindcss.com

Tags: class clas

Link to this answer
Share Copy Link

Contributed on Oct 30 2022

Fxc Jahid

0 Answers Avg Quality 2/10

Dark Mode in Tailwind CSS based on users selection

Contents

More Related Answers

Dark Mode in Tailwind CSS based on users selection

Closely Related Answers

detect system dark mode tailwind css

tailwind css dark mode

Setting darkmode using Tailwind

dark mode toggle in tailwindcss

tailwind dark mode class

Grepper

Documentation

Social

Legal

Contact

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