From 189bc6feb3f2860be8c531dd1ca996f3a2cff018 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E6=97=AD?= <zhou.xu@ejlchina.com>
Date: Wed, 28 Jul 2021 23:08:41 +0800
Subject: [PATCH] feat: Added support for tailwindcss night mode mechanism
 (#998)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

(cherry picked from commit 1de8704b61c38c92bc6877d0bec9e6f67766b3c8)

* docs: update changelog
---
 CHANGELOG.zh_CN.md       |  1 +
 src/logics/theme/dark.ts | 15 +++++++++++++--
 tailwind.config.js       |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 8ff62432110..bef9028f76a 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,6 +1,7 @@
 ### ✨ Features
 
 - **Preview** 添加新的属性及事件
+- **Dark Theme** 新增对 tailwindcss 夜间模式的支持
 
 ### 🐛 Bug Fixes
 
diff --git a/src/logics/theme/dark.ts b/src/logics/theme/dark.ts
index 23c54885735..7069826b85b 100644
--- a/src/logics/theme/dark.ts
+++ b/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');
+    }
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 116d2605f3c..dcc82dc8178 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   mode: 'jit',
-  // darkMode: 'class',
+  darkMode: 'class',
   plugins: [createEnterPlugin()],
   purge: {
     enable: process.env.NODE_ENV === 'production',