* config: support to use dark theme.

easysoft · Dec 6, 2023 · 5e057c2 · 5e057c2
1 parent 2ae921b
commit 5e057c2
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 22 deletions.
diff --git a/config/tailwind-theme/colors.cjs b/config/tailwind-theme/colors.cjs
@@ -56,9 +56,15 @@ const canvas = white;
 /** 画布反色 */
 const inverse = black;
 
+/** 控件背景 */
+const surfaceLight = gray[50];
+
 /** 控件背景 */
 const surface = gray[100];
 
+/** 控件背景 */
+const surfaceStrong = gray[200];
+
 /** 文本 */
 const fore = gray[700];
 
@@ -74,6 +80,9 @@ const linkHover = primary[600];
 /** 链接（visited） */
 const linkVisited = primary[700];
 
+/** 链接（Active） */
+const linkActive = primary[800];
+
 /* 占位文本颜色（placeholder） */
 const placeholder = gray[400];
 
@@ -105,11 +114,14 @@ module.exports = {
     canvas,
     inverse,
     surface,
+    'surface-light': surfaceLight,
+    'surface-strong': surfaceStrong,
     fore,
     focus,
     link,
     'link-hover': linkHover,
     'link-visited': linkVisited,
+    'link-active': linkActive,
     placeholder,
     border,
     'border-strong': borderStrong,

diff --git a/config/tailwind-theme/dark-colors.cjs b/config/tailwind-theme/dark-colors.cjs
@@ -1,36 +1,115 @@
-const colors = require('./colors.cjs');
+const shades = require('tailwindcss/colors');
+const {reverseShade} = require('./reverse-shade.cjs');
+
+// 语义化调色板 - Semantic palettes
+// ==================================
+
+/** 主要：主题的、可链接、正常 */
+const primary = reverseShade(shades.blue);
+
+/** 次要：次级、常态的 */
+const secondary = reverseShade(shades.sky);
+
+/** 成功：完成、积极 */
+const success = reverseShade(shades.green);
+
+/** 关注：提示、重点 */
+const warning = reverseShade(shades.amber);
+
+/** 警告：提示、异常、警醒 */
+const danger = reverseShade(shades.red);
+
+/** 重要：优先 */
+const important = reverseShade(shades.pink);
+
+/** 特殊：触动、激情 */
+const special = reverseShade(shades.purple);
+
+/** 灰色：中立、背景、边框 */
+const gray = reverseShade(shades.slate);
+
+
+// 特殊颜色 - Special Colors
+// ======================
+
+/** 纯黑 */
+const black = shades.black;
+
+/** 纯白 */
+const white = shades.white;
+
+
+// UI 特殊颜色定义 - UI Special Colors
+// ======================
 
 /** 画布（页面背景） */
-const canvas = colors.gray[900];
+const canvas = black;
 
 /** 画布反色 */
-const inverse = colors.white;
+const inverse = white;
+
+/** 控件背景 */
+const surfaceLight = gray[50];
+
+/** 控件背景 */
+const surface = gray[100];
 
 /** 控件背景 */
-const surface = colors.gray[800];
+const surfaceStrong = gray[200];
 
 /** 文本 */
-const fore = colors.gray[200];
+const fore = gray[700];
 
 /** 焦点 */
-const focus = colors.primary[600];
+const focus = primary[200];
 
 /** 链接 */
-const link = colors.primary[500];
+const link = primary[500];
 
 /** 链接（hover） */
-const linkHover = colors.primary[300];
+const linkHover = primary[600];
+
+/** 链接（visited） */
+const linkVisited = primary[700];
+
+/** 链接（Active） */
+const linkActive = primary[800];
+
+/* 占位文本颜色（placeholder） */
+const placeholder = gray[400];
 
 /** Border */
-const border = colors.gray[700];
+const border = gray[200];
+
+/** Strong border */
+const borderStrong = gray[300];
+
+/** Strong border */
+const borderLight = gray[100];
 
 module.exports = {
+    gray,
+    primary,
+    secondary,
+    success,
+    warning,
+    danger,
+    important,
+    special,
+
     canvas,
     inverse,
     surface,
+    'surface-light': surfaceLight,
+    'surface-strong': surfaceStrong,
     fore,
     focus,
     link,
     'link-hover': linkHover,
+    'link-visited': linkVisited,
+    'link-active': linkActive,
+    placeholder,
     border,
+    'border-strong': borderStrong,
+    'border-light': borderLight,
 };
diff --git a/config/tailwind-theme/index.cjs b/config/tailwind-theme/index.cjs
@@ -17,6 +17,6 @@ module.exports = {
         boxShadow: toVars(boxShadow, 'shadow'),
         zIndex,
         screens,
-        variables,
+        ...variables,
     },
 };
diff --git a/config/tailwind-theme/reverse-shade.cjs b/config/tailwind-theme/reverse-shade.cjs
@@ -0,0 +1,17 @@
+/**
+ * Reverse tailwind shade list.
+ *
+ * @param {{'50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, '950': string}} shade
+ * @returns {{'50': string, '100': string, '200': string, '300': string, '400': string, '500': string, '600': string, '700': string, '800': string, '900': string, '950': string}}
+ */
+function reverseShade(shade) {
+    const keys = Object.keys(shade).sort((a, b) => Number(a) - Number(b));
+    return keys.reduce((reversedShade, key, index) => {
+        reversedShade[key] = shade[keys[keys.length - 1 - index]];
+        return reversedShade;
+    }, {});
+}
+
+module.exports = {
+    reverseShade,
+};
diff --git a/config/tailwind-theme/to-vars.cjs b/config/tailwind-theme/to-vars.cjs
@@ -3,7 +3,7 @@ const colorVariable = require('@mertasan/tailwindcss-variables/colorVariable');
 function toVars(colorObject, parentName = 'color', vars = {}) {
     Object.keys(colorObject).forEach(name => {
         const value = colorObject[name];
-        if (!value) {
+        if (!value || ['transparent', 'inherit', 'currentColor'].includes(value)) {
             return;
         }
         const varName = name === 'DEFAULT' ? '' : String(name).replace(/([A-Z])/g, '-$1').toLowerCase();

diff --git a/config/tailwind-theme/variables.cjs b/config/tailwind-theme/variables.cjs
@@ -6,15 +6,25 @@ const fontSize = require('./font-size.cjs');
 
 // see https://github.com/mertasan/tailwindcss-variables
 module.exports = {
-    DEFAULT: {
-        color: colors,
-        radius: borderRadius,
-        shadow: boxShadow,
-        space: '0.25rem',
-        'font-size-root': fontSize.root,
-        'font-size-page': fontSize.page,
+    variables: {
+        DEFAULT: {
+            color: colors,
+            radius: borderRadius,
+            shadow: boxShadow,
+            space: '0.25rem',
+            'font-size-root': fontSize.root,
+            'font-size-page': fontSize.page[1],
+        },
+        '.dark': {
+            color: darkColors,
+        },
+        '.light-in-dark': {
+            color: colors,
+        },
     },
-    '.dark': {
-        color: darkColors,
+    darkVariables: {
+        '.dark-auto': {
+            color: darkColors,
+        },
     },
 };
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -4,7 +4,7 @@ const defaultTheme = require('./config/tailwind-theme/index.cjs');
 
 /** @type {import('tailwindcss').Config} */
 const config = {
-    darkMode: ['class', '[class="dark"]'],
+    darkMode: 'media',
     content: process.env.NODE_ENV === 'development' ? [
         './index.html',
         './index.md',
@@ -14,10 +14,12 @@ const config = {
         './lib/*/src/**/*.{vue,js,ts,jsx,tsx}',
         './exts/*/*/src/**/*.{vue,js,ts,jsx,tsx}',
     ] : [{raw: ''}],
+    safelist: ['dark'],
     theme: defaultTheme,
     plugins: [
         require('@mertasan/tailwindcss-variables')({
             colorVariables: true,
+            darkToRoot: false,
         }),
     ],
     prefix: '-',
@@ -26,7 +28,7 @@ const config = {
 function colorToVars(colorObject, parentName = 'color', vars = {}) {
     Object.keys(colorObject).forEach(name => {
         const value = colorObject[name];
-        if (!value) {
+        if (!value || ['transparent', 'inherit', 'currentColor'].includes(value)) {
             return;
         }
         const varName = String(name).replace(/([A-Z])/g, '-$1').toLowerCase();
@@ -71,4 +73,21 @@ if (argv.noPreflightStyle || process.env.TAILWIND_NO_PREFLIGHT) {
     };
 }
 
+[config.theme, config.theme.extend].forEach(theme => {
+    const varsSafelist = [];
+    ['variables', 'darkVariables'].forEach(key => {
+        const variables = theme[key];
+        if (typeof variables === 'object') {
+            Object.keys(variables).forEach(varKey => {
+                if (varKey.startsWith('.')) {
+                    varsSafelist.push(varKey.substring(1));
+                }
+            });
+        }
+    });
+    if (varsSafelist.length) {
+        config.safelist = [...new Set([...(config.safelist || []), ...varsSafelist])];
+    }
+});
+
 module.exports = config;