Search code examples
javascripthtmlsasstailwind-css

Tailwind CSS Completely remove Light Mode

I downloaded a Tailwind CSS template online, hoping to streamline the process of a project I was working on, and I ran into a little problem; I can't get rid of light mode. There is a settings toggle, where you can either toggle dark mode or off. Problem is, dark mode doesn't stick when you reload, or change to another page. Here is the Javascript of the toggle:

  const lightThemeButton = document.querySelector('.lightThemeButton')
  const darkThemeButton = document.querySelector('.darkThemeButton')
  const logo = document.querySelector('.navbar-logo img')

  darkThemeButton.addEventListener('click', () => {
    document.body.classList.add('darkTheme')
    sidebarNavWrapper.classList.remove('style-2')
    darkThemeButton.classList.add('active')
    lightThemeButton.classList.remove('active')
    logo.src = 'assets/images/logo/logo-white.svg'
  })

  lightThemeButton.addEventListener('click', () => {
    document.body.classList.remove('darkTheme')
    sidebarNavWrapper.classList.remove('style-2')
    lightThemeButton.classList.add('active')
    darkThemeButton.classList.remove('active')
    logo.src = 'assets/images/logo/logo.svg'
  })

Here is the SCSS of the toggle:

.darkTheme {
  color: rgba($white, 0.7);

  .text-gray {
    color: rgba($white, 0.5) !important;
  }

  .card-style {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

    .dropdown-menu {
      background: $dark-2;
    }
  }

  .more-btn-wrapper {
    .dropdown-menu {
      border-color: $dark-4;

      .dropdown-item {
        a {
          color: $white;
        }
      }
    }
  }
}

How would I go about completely deleting light mode? As far as I'm concerned, I can't find a single page in the SCSS given that relates to the light mode, and there's hundreds of files in the CSS category so there's got to be a more efficient way than editing each one. If that's not possible, how would I get it to stay that way upon reload, or better yet: Default to dark mode upon page load?

I've tried everything in Tailwind's documentation relating to dark mode. Setting up the config file and putting class="dark" in the body/html tags do not work.

Solution

  • Implied by the JavaScript snippet you gave:

    darkThemeButton.addEventListener('click', () => {
    document.body.classList.add('darkTheme')

    And the Scss snippet you gave:

    .darkTheme {

    It seems like dark mode would be activated by having darkTheme class on the <body> element:

    <body class="darkTheme">