CSS 覆盖手风琴导致黑暗模式

Question

我正在使用 Flowbite 的手风琴组件。我无法弄清楚是什么导致手风琴在页面加载时进入黑暗模式。我检查了 element 并看到了 Flowbite 附带的一些暗模式 CSS。我将该 CSS 下载到一个文件中，并手动删除了从检查元素中找到的 CSS，但手风琴仍然是黑色的。在 Flowbite 网站上，您也可以在浅色模式或深色模式下复制代码，我重新复制了多次，以确保我没有选择错误的设置。我已经检查了 CSS 文件、HTML 和检查元素，但仍然遇到问题。

我希望手风琴在加载时保持浅灰色，而不是图中显示的深色模式。这是一些截图。

*注意：我也尝试过清除网络缓存。如果我关闭黑暗模式，问题就得到解决，但我使用了网站上的其他组件，它们不会导致这个问题，所以我不明白这个手风琴有什么不同。

 <div id="accordion-open" data-accordion="open" class="mx-auto mt-6 mb-10">
                         <h2 id="accordion-open-heading-1">
                           <button type="button" class=" flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200   hover:bg-gray-100  bg-gray-100 " data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
                             <span class="flex items-center">Activity Diagram (click to open/close)</span>
                             <svg data-accordion-icon="" class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                           </button>
                         </h2>
                         <div id="accordion-open-body-1" class="" aria-labelledby="accordion-open-heading-1">
                           <div class="p-5 font-light border-b-2 border-gray-200  border border-b-3 border-gray-200 rounded-b-xl focus:ring-4 focus:ring-gray-200">
                            <img class="pt-6 object-scale-down h-full w-full mx-auto px-28" src="">     
                         </div>
                         </div>
                       </div>      

Answer 1

我遇到了这个问题，

我在 tailwindcss.config.js 中将 darkMode 设置为 class

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.html", "./js/**/*.js"],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

然后将以下内容添加到我的 html 页面的 head 部分：

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

然后，我的手风琴上的灰色文本问题在展开后消失了......

但是很长一段时间我都没有意识到手风琴文本中的颜色变化是由于我的 mac 在晚上自动将系统设置更改为暗模式...而 flowbit 选择了此设置，因为我没有在项目中启用暗模式顺风...