如何使用TailwindCSS强制网站默认加载深色模式

你只需要调整Tailwind暗色模式配置+修改初始主题加载逻辑即可，完全保留现有手动切换功能的同时，实现首次访问默认强制dark模式，忽略系统主题设置：

1. 确认Tailwind暗色模式策略 #

首先确保你的Tailwind配置使用class模式触发暗色样式，不要使用跟随系统的media模式：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // 保留你原有的content、theme等其他配置项
}

2. 添加无闪烁初始主题脚本 #

把下面的内联脚本放到HTML的<head>标签最顶部，优先于所有样式、其他脚本加载，避免页面加载时出现明暗主题闪烁：

<head>
  <script>
    // 优先读取用户之前手动选择保存的主题
    const userSavedTheme = localStorage.getItem('theme')
    // 没有用户手动保存的记录时，强制默认使用dark模式
    const currentTheme = userSavedTheme ?? 'dark'

    if (currentTheme === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  </script>
  <!-- 后续放你原有的meta标签、CSS引入、其他脚本等内容 -->
</head>

注意：这段脚本不要放到DOM加载完成的回调里执行，也不要放到页面底部，必须在页面渲染前执行，才能完全避免主题切换闪烁的问题。

3. 对齐主题切换按钮的存储逻辑 #

确保你现有的主题切换按钮，在用户点击切换时把选择结果同步存入localStorage，和初始化脚本的读取逻辑保持一致即可，切换逻辑不需要大改，参考示例：

// 绑定到切换按钮的点击事件
const handleThemeToggle = () => {
  const isDarkNow = document.documentElement.classList.toggle('dark')
  // 持久化用户的主动选择
  localStorage.setItem('theme', isDarkNow ? 'dark' : 'light')
}

逻辑说明 #

• 用户首次访问网站时，本地没有存储过主题选择记录，会直接给根节点加dark类，默认加载暗色模式，完全忽略系统的主题偏好设置
• 用户手动点击切换按钮后，选择会被存在本地，后续每次访问都会优先使用用户自己选的主题，不会强制改回暗色
• 现有所有明暗模式的样式代码、切换交互都不需要改动，改完配置和加载逻辑就能直接生效

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