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

src/logics/theme/dark.ts

1	1	import { darkCssIsReady, loadDarkThemeCss } from 'vite-plugin-theme/es/client';
	2	+import { addClass, hasClass, removeClass } from '/@/utils/domUtils';
2	3
3	4	export async function updateDarkTheme(mode: string \| null = 'light') {
4	5	const htmlRoot = document.getElementById('htmlRoot');
	6	+ if (!htmlRoot) {
	7	+ return;
	8	+ }
	9	+ const hasDarkClass = hasClass(htmlRoot, 'dark');
5	10	if (mode === 'dark') {
6	11	if (import.meta.env.PROD && !darkCssIsReady) {
7	12	await loadDarkThemeCss();
8	13	}
9		- htmlRoot?.setAttribute('data-theme', 'dark');
	14	+ htmlRoot.setAttribute('data-theme', 'dark');
	15	+ if (!hasDarkClass) {
	16	+ addClass(htmlRoot, 'dark');
	17	+ }
10	18	} else {
11		- htmlRoot?.setAttribute('data-theme', 'light');
	19	+ htmlRoot.setAttribute('data-theme', 'light');
	20	+ if (hasDarkClass) {
	21	+ removeClass(htmlRoot, 'dark');
	22	+ }
12	23	}
13	24	}
...	...

tailwind.config.js

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

canrd-outside / order-erp-front · Commits