React中Tailwind CSS暗黑模式切换异常问题求助

问题现象 #

暗黑模式显示正常，但浅色模式下部分元素颜色不符合预期，已排查CSS冲突、使用过Tailwind !修饰符，无全局自定义CSS冲突。

问题根源及修复步骤 #

1. 自定义颜色类使用错误 #

你在Tailwind配置中定义了headingColor.light和headingColor.dark两个子颜色，但在<h2>标签中直接使用text-headingColor——这个类不存在（因为没有默认的headingColor值），导致浅色模式下该标题无法应用正确的颜色。

修复代码：
将Pricing组件中的：

<h2 className="text-xl font-semibold mb-2 text-headingColor">
  API Pricing
</h2>

修改为：

<h2 className="text-xl font-semibold mb-2 text-headingColor-light dark:text-headingColor-dark">
  API Pricing
</h2>

2. 表格tbody边框颜色未适配浅色模式 #

表格tbody的border-gray-700在浅色模式下颜色过暗，几乎不可见，需要添加浅色模式的边框类。

修复代码：
将表格中所有<tr>的border-gray-700修改为border-gray-300 dark:border-gray-700，例如：

<tr className="border-t border-gray-300 dark:border-gray-700">

3. 主题切换组件初始状态优化（可选） #

当前ThemeToggle组件初始状态固定为false，刷新页面后会回到浅色模式，可优化为读取本地存储或系统偏好，提升用户体验：

修改后的ThemeToggle代码：

import { useState, useEffect } from 'react'

const ThemeToggle = () => {
  // 初始化时优先读取本地存储，无则读取系统深色模式偏好
  const [isDarkMode, setIsDarkMode] = useState<boolean>(() => {
    const savedMode = localStorage.getItem('darkMode');
    if (savedMode) return savedMode === 'true';
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  })

  useEffect(() => {
    const root = window.document.documentElement
    if (isDarkMode) {
      root.classList.add('dark')
      localStorage.setItem('darkMode', 'true')
    } else {
      root.classList.remove('dark')
      localStorage.setItem('darkMode', 'false')
    }
  }, [isDarkMode])

  return (
    <button
      onClick={() => setIsDarkMode(!isDarkMode)}
      className="p-2 rounded-full bg-gray-200 dark:bg-gray-800"
      aria-label="Toggle Dark Mode"
    >
      {/* 可添加太阳/月亮SVG图标 */}
    </button>
  )
}

export default ThemeToggle

完整修复后的Pricing组件代码 #

const Pricing = () => {
  return (
    <div className="text-black dark:text-white p-8 rounded-lg border border-black dark:border-[#7B8595] shadow-lg max-w-3xl mx-auto bg-white dark:bg-gray-800 ">
      <h2 className="text-xl font-semibold mb-2 text-headingColor-light dark:text-headingColor-dark">
        API Pricing
      </h2>
      <p className="mb-6 text-sm">
        Our API pricing is based on the model used and the number of tokens
        processed. Here's a breakdown of the costs:
      </p>

      <div className="overflow-x-auto">
        <table className="w-full text-left overflow-hidden rounded-xl text-sm ">
          <thead>
            <tr className="bg-indigo-500 text-white">
              <th className="p-3 font-semibold">API</th>
              <th className="p-3 font-semibold">MODEL</th>
              <th className="p-3 font-semibold">PRICE PER 1K TOKENS</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t border-gray-300 dark:border-gray-700">
              <td className="p-3">OpenAI</td>
              <td className="p-3">GPT-3.5</td>
              <td className="p-3">$0.002</td>
            </tr>
            <tr className="border-t border-gray-300 dark:border-gray-700">
              <td className="p-3">OpenAI</td>
              <td className="p-3">GPT-4</td>
              <td className="p-3">$0.03</td>
            </tr>
            <tr className="border-t border-gray-300 dark:border-gray-700">
              <td className="p-3">Together AI</td>
              <td className="p-3">Llama-2-70b</td>
              <td className="p-3">$0.0008</td>
            </tr>
            <tr className="border-t border-gray-300 dark:border-gray-700">
              <td className="p-3">Together AI</td>
              <td className="p-3">Llama-2-13b</td>
              <td className="p-3">$0.0006</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div className="mt-6">
        <h3 className="text-lg font-semibold mb-2 dark:text-headingColor-dark text-headingColor-light ">
          Token Estimation
        </h3>
        <p className="mb-4 text-sm">
          On average, 1 token is approximately 4 characters or 0.75 words. For
          precise pricing, we recommend using our token calculator tool.
        </p>

        <h3 className="text-lg font-semibold mb-2 dark:text-headingColor-dark text-headingColor-light">
          Billing
        </h3>
        <p className="text-sm">
          You will only be charged for the tokens used in generating the book.
          The API tracks token usage and bills accordingly. Detailed usage
          reports are available in your account dashboard.
        </p>
      </div>
    </div>
  )
}

export default Pricing

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