如何彻底移除Tailwind CSS模板浅色模式并默认深色模式？

一、默认启用深色模式 #

有两种快速实现方式：

• 直接修改HTML：找到页面的<body>标签，手动添加darkTheme类，示例：

  <body class="darkTheme">
  

  同时调整按钮默认状态，给深色按钮加上active类，移除浅色按钮的active类，并把logo默认设置为白色版本。

• JS初始化强制启用：在原有JS代码最前面添加页面加载逻辑，自动应用深色模式：

  // 页面加载完成后默认启用深色模式
  document.addEventListener('DOMContentLoaded', () => {
    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'
  })
  

二、让深色模式状态持久化（刷新/跳转不失效） #

利用localStorage存储用户的主题选择，页面加载时读取并应用，修改后的完整JS代码如下：

const lightThemeButton = document.querySelector('.lightThemeButton')
const darkThemeButton = document.querySelector('.darkThemeButton')
const logo = document.querySelector('.navbar-logo img')
const sidebarNavWrapper = document.querySelector('.sidebar-nav-wrapper') // 确保该变量已定义，原代码中未声明但已使用

// 页面加载时读取本地存储的主题设置
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('theme')
  // 优先使用保存的设置，无保存则默认启用深色模式
  if (savedTheme === 'dark' || !savedTheme) {
    document.body.classList.add('darkTheme')
    darkThemeButton.classList.add('active')
    lightThemeButton.classList.remove('active')
    logo.src = 'assets/images/logo/logo-white.svg'
  } else {
    document.body.classList.remove('darkTheme')
    lightThemeButton.classList.add('active')
    darkThemeButton.classList.remove('active')
    logo.src = 'assets/images/logo/logo.svg'
  }
})

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'
  // 保存深色模式选择到本地存储
  localStorage.setItem('theme', 'dark')
})

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'
  // 保存浅色模式选择到本地存储
  localStorage.setItem('theme', 'light')
})

三、彻底移除浅色模式（可选） #

如果想完全取消浅色模式选项：

• 隐藏浅色按钮：在CSS中添加

  .lightThemeButton {
    display: none !important;
  }
  

• 直接删除HTML中的浅色按钮元素，同时移除JS中对应的点击事件逻辑。

内容的提问来源于stack exchange，提问作者Blaze