Tailwind+Next.js网站在三星浏览器自动切换暗色模式问题求助

核心原因 #

三星浏览器自带的强制网页暗色模式特性，会在系统处于暗色状态时，自动反转未适配暗色模式的网站颜色——这是浏览器自身的行为，和Tailwind的配置无关。

解决步骤 #

• 添加color-scheme meta标签
  在Next.js的根布局文件（app/layout.tsx 或 pages/_document.tsx）的<head>中加入：

  <meta name="color-scheme" content="only light">
  

  这个标签会明确告知浏览器，网站仅支持亮色模式，禁止自动反转颜色。

• 锁定全局基础样式
  在Tailwind的全局样式文件（比如globals.css）中，通过@layer base强制设置页面的基础颜色，避免浏览器自动篡改：

  @layer base {
    body {
      @apply bg-white text-gray-900;
    }
  }
  

• 确认Tailwind配置
  确保tailwind.config.js中的darkmode设置为false，彻底关闭Tailwind的暗色模式支持：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    darkMode: false,
    // 其他配置...
  }
  

• 用户端临时解决（可选）
  如果需要指导用户手动关闭浏览器的自动反转，可以让他们在三星浏览器中操作：
  设置 → 显示和亮度 → 深色模式 → 关闭“网页内容”的自动暗色切换

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