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

dark mode toggle in tailwindcss

Add Answer

Faheem Khan answered on May 1, 2022 Popularity 10/10 Helpfulness 3/10

answer dark mode toggle in tailwindcss

related Setting darkmode using Tailwind

related tailwind dark mode class

related Dark Mode in Tailwind CSS based on users selection

related dark mode tailwind toogle

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 3/10 Language whatever

Source: www.freecodecamp.org

Tags: mode tailwind-css toggle whatever

Link to this answer
Share Copy Link

Contributed on Dec 23 2022

Faheem Khan

0 Answers Avg Quality 2/10

Closely Related Answers

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

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

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

dark mode tailwind toogle

Comment

var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
} else {
    themeToggleDarkIcon.classList.remove('hidden');
}

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function() {

    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');

    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
        if (localStorage.getItem('color-theme') === 'light') {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        } else {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        }

    // if NOT set via local storage previously
    } else {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        }
    }
    
});

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: www.freecodecamp.org

Tags: mode

Link to this answer
Share Copy Link

Contributed on Nov 03 2022

sebastian jensen

0 Answers Avg Quality 2/10

dark mode toggle in tailwindcss

Contents

More Related Answers

dark mode toggle in tailwindcss

Closely Related Answers

Setting darkmode using Tailwind

tailwind dark mode class

Dark Mode in Tailwind CSS based on users selection

dark mode tailwind toogle

Grepper

Documentation

Social

Legal

Contact

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