feat: Added support for tailwindcss night mode mechanism (#998) (189bc6fe) | Commits | canrd-outside / order-erp-front

Authored by 周旭 2021-07-28 23:08:41 +0800

Committed by GitHub 2021-07-28 23:08:41 +0800

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

(cherry picked from commit 1de8704b61c38c92bc6877d0bec9e6f67766b3c8)

* docs: update changelog

Showing 3 changed files with 15 additions and 3 deletions

CHANGELOG.zh_CN.md

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

src/logics/theme/dark.ts

  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	module.exports = {	1	module.exports = {
2	mode: 'jit',	2	mode: 'jit',
3	- // darkMode: 'class',	3	+ darkMode: 'class',
4	plugins: [createEnterPlugin()],	4	plugins: [createEnterPlugin()],
5	purge: {	5	purge: {
6	enable: process.env.NODE_ENV === 'production',	6	enable: process.env.NODE_ENV === 'production',

canrd-outside / order-erp-front · Commits