如何将Tailwind CSS+DaisyUI网站默认主题设为浅色模式？

我使用Tailwind CSS和DaisyUI实现了日夜切换按钮，但当前代码运行时网站默认以深色模式打开。以下是我的代码：

HTML代码 #

<button aria-label="Dark Mode" id="dark" class="btn btn-ghost">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 md:h-5 md:w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"></path></svg>
</button>
<button aria-label="Light Mode" id="light" class="btn btn-ghost hidden">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 md:h-5 md:w-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"></path></svg>
</button>

JavaScript代码 #

const c="light",l="dark",t=document.getElementById("dark"),a=document.getElementById("light"),e=document.documentElement,d=()=>{t.classList.add("hidden"),a.classList.remove("hidden"),e.classList.add("dark"),localStorage.setItem("theme","dark"),e.setAttribute("data-theme",l)},s=()=>{t.classList.remove("hidden"),a.classList.add("hidden"),e.classList.remove("dark"),localStorage.setItem("theme","light"),e.setAttribute("data-theme",c)},m=()=>{t.addEventListener("click",()=>{d()}),a.addEventListener("click",()=>{s()}),localStorage.getItem("theme")==="dark"||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?d():s()};m();

我希望网站默认以浅色模式打开，该如何修改？

问题出在初始化逻辑的条件判断上：当前代码会在无本地存储主题记录且系统偏好深色模式时默认启用深色模式。要改成默认浅色，只需调整判断逻辑，让仅当本地存储明确记录为深色时才启用深色，其余情况均默认浅色。

修改后的JavaScript代码（核心修改初始化判断部分） #

const c="light",l="dark",t=document.getElementById("dark"),a=document.getElementById("light"),e=document.documentElement,d=()=>{t.classList.add("hidden"),a.classList.remove("hidden"),e.classList.add("dark"),localStorage.setItem("theme","dark"),e.setAttribute("data-theme",l)},s=()=>{t.classList.remove("hidden"),a.classList.add("hidden"),e.classList.remove("dark"),localStorage.setItem("theme","light"),e.setAttribute("data-theme",c)},m=()=>{t.addEventListener("click",()=>{d()}),a.addEventListener("click",()=>{s()}),// 修改条件判断，仅当本地明确存储深色时才启用深色
localStorage.getItem("theme")==="dark"?d():s()};m();

逻辑说明 #

• 原逻辑：localStorage.getItem("theme")==="dark" || (!("theme"in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)，即本地存了深色或没存过且系统偏好深色时启用深色。
• 修改后逻辑：localStorage.getItem("theme")==="dark"，即仅当本地明确存储了深色主题时才启用深色；其余所有情况（无存储记录、存储了浅色、系统偏好浅色）均默认启用浅色模式，完全符合需求。

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