feat: Added support for tailwindcss night mode mechanism (#998)

* feat: 新增支持 tailwindcss 的夜间模式支持

(cherry picked from commit 1de8704b61c38c92bc6877d0bec9e6f67766b3c8)

* docs: update changelog

CHANGELOG.zh_CN.md

@@ -1,6 +1,7 @@
 ### ✨ Features
 
 - **Preview** 添加新的属性及事件
+- **Dark Theme** 新增对 tailwindcss 夜间模式的支持
 
 ### 🐛 Bug Fixes
 

src/logics/theme/dark.ts

@@ -1,13 +1,24 @@
 import { darkCssIsReady, loadDarkThemeCss } from 'vite-plugin-theme/es/client';
+import { addClass, hasClass, removeClass } from '/@/utils/domUtils';
 
 export async function updateDarkTheme(mode: string | null = 'light') {
   const htmlRoot = document.getElementById('htmlRoot');
+  if (!htmlRoot) {
+    return;
+  }
+  const hasDarkClass = hasClass(htmlRoot, 'dark');
   if (mode === 'dark') {
     if (import.meta.env.PROD && !darkCssIsReady) {
       await loadDarkThemeCss();
     }
-    htmlRoot?.setAttribute('data-theme', 'dark');
+    htmlRoot.setAttribute('data-theme', 'dark');
+    if (!hasDarkClass) {
+      addClass(htmlRoot, 'dark');
+    }
   } else {
-    htmlRoot?.setAttribute('data-theme', 'light');
+    htmlRoot.setAttribute('data-theme', 'light');
+    if (hasDarkClass) {
+      removeClass(htmlRoot, 'dark');
+    }
   }
 }

tailwind.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   mode: 'jit',
-  // darkMode: 'class',
+  darkMode: 'class',
   plugins: [createEnterPlugin()],
   purge: {
     enable: process.env.NODE_ENV === 'production',