feat(projects): custom unocss colors support opacity

soybeanjs · Mar 13, 2023 · 488e6e3 · 488e6e3
1 parent f73e3f6
commit 488e6e3
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 39 deletions.
diff --git a/src/components/common/app-loading.vue b/src/components/common/app-loading.vue
@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { useAppInfo } from '@/composables';
-import { localStg } from '@/utils';
+import { localStg, getRgbOfColor } from '@/utils';
 import themeSettings from '@/settings/theme.json';
 
 const { title } = useAppInfo();
@@ -32,7 +32,10 @@ const lodingClasses = [
 function addThemeColorCssVars() {
   const defaultColor = themeSettings.themeColor;
   const themeColor = localStg.get('themeColor') || defaultColor;
-  const cssVars = `--primary-color: ${themeColor}`;
+
+  const { r, g, b } = getRgbOfColor(themeColor);
+
+  const cssVars = `--primary-color: ${r},${g},${b}`;
   document.documentElement.style.cssText = cssVars;
 }
 

diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts
@@ -3,7 +3,7 @@ import { useOsTheme } from 'naive-ui';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { kebabCase } from 'lodash-es';
-import { localStg } from '@/utils';
+import { localStg, getColorPalettes, getRgbOfColor } from '@/utils';
 import { useThemeStore } from '../modules';
 
 /** 订阅theme store */
@@ -98,7 +98,21 @@ function addThemeCssVarsToHtml(themeVars: ThemeVars) {
   const keys = Object.keys(themeVars) as ThemeVarsKeys[];
   const style: string[] = [];
   keys.forEach(key => {
-    style.push(`--${kebabCase(key)}: ${themeVars[key]}`);
+    const color = themeVars[key];
+
+    if (color) {
+      const { r, g, b } = getRgbOfColor(color);
+      style.push(`--${kebabCase(key)}: ${r},${g},${b}`);
+
+      if (key === 'primaryColor') {
+        const colorPalettes = getColorPalettes(color);
+
+        colorPalettes.forEach((palette, index) => {
+          const { r: pR, g: pG, b: pB } = getRgbOfColor(palette);
+          style.push(`--${kebabCase(key)}${index + 1}: ${pR},${pG},${pB}`);
+        });
+      }
+    }
   });
   const styleStr = style.join(';');
   document.documentElement.style.cssText += styleStr;

diff --git a/src/utils/common/color.ts b/src/utils/common/color.ts
@@ -1,30 +1,50 @@
 import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 import mixPlugin from 'colord/plugins/mix';
-import type { HsvColor } from 'colord';
+import type { AnyColor, HsvColor } from 'colord';
 
-extend([mixPlugin]);
-
-type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+extend([namesPlugin, mixPlugin]);
 
+/** 色相阶梯 */
 const hueStep = 2;
+/** 饱和度阶梯，浅色部分 */
 const saturationStep = 16;
+/** 饱和度阶梯，深色部分 */
 const saturationStep2 = 5;
+/** 亮度阶梯，浅色部分 */
 const brightnessStep1 = 5;
+/** 亮度阶梯，深色部分 */
 const brightnessStep2 = 15;
+/** 浅色数量，主色上 */
 const lightColorCount = 5;
+/** 深色数量，主色下 */
 const darkColorCount = 4;
 
+/**
+ * 调色板的颜色索引
+ * @description 从左至右颜色从浅到深，6为主色号
+ */
+type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
 /**
  * 根据颜色获取调色板颜色(从左至右颜色从浅到深，6为主色号)
  * @param color - 颜色
  * @param index - 调色板的对应的色号(6为主色号)
- * @description 算法实现从ant-design调色板算法中借鉴 https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less
+ * @returns 返回hex格式的颜色
  */
-export function getColorPalette(color: string, index: ColorIndex) {
-  if (index === 6) return color;
+export function getColorPalette(color: AnyColor, index: ColorIndex): string {
+  const transformColor = colord(color);
+
+  if (!transformColor.isValid()) {
+    throw Error('invalid input color value');
+  }
+
+  if (index === 6) {
+    return colord(transformColor).toHex();
+  }
 
   const isLight = index < 6;
-  const hsv = colord(color).toHsv();
+  const hsv = transformColor.toHsv();
   const i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
 
   const newHsv: HsvColor = {
@@ -36,13 +56,42 @@ export function getColorPalette(color: string, index: ColorIndex) {
   return colord(newHsv).toHex();
 }
 
+/** 暗色主题颜色映射关系表 */
+const darkColorMap = [
+  { index: 7, opacity: 0.15 },
+  { index: 6, opacity: 0.25 },
+  { index: 5, opacity: 0.3 },
+  { index: 5, opacity: 0.45 },
+  { index: 5, opacity: 0.65 },
+  { index: 5, opacity: 0.85 },
+  { index: 4, opacity: 0.9 },
+  { index: 3, opacity: 0.95 },
+  { index: 2, opacity: 0.97 },
+  { index: 1, opacity: 0.98 }
+];
+
 /**
  * 根据颜色获取调色板颜色所有颜色
  * @param color - 颜色
+ * @param darkTheme - 暗黑主题的调色板颜色
+ * @param darkThemeMixColor - 暗黑主题的混合颜色，默认 #141414
  */
-export function getAllColorPalette(color: string) {
+export function getColorPalettes(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
   const indexs: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-  return indexs.map(index => getColorPalette(color, index));
+
+  const patterns = indexs.map(index => getColorPalette(color, index));
+
+  if (darkTheme) {
+    const darkPatterns = darkColorMap.map(({ index, opacity }) => {
+      const darkColor = colord(darkThemeMixColor).mix(patterns[index], opacity);
+
+      return darkColor;
+    });
+
+    return darkPatterns.map(item => colord(item).toHex());
+  }
+
+  return patterns;
 }
 
 /**
@@ -53,22 +102,29 @@ export function getAllColorPalette(color: string) {
  */
 function getHue(hsv: HsvColor, i: number, isLight: boolean) {
   let hue: number;
-  if (hsv.h >= 60 && hsv.h <= 240) {
+
+  const hsvH = Math.round(hsv.h);
+
+  if (hsvH >= 60 && hsvH <= 240) {
     // 冷色调
     // 减淡变亮 色相顺时针旋转 更暖
     // 加深变暗 色相逆时针旋转 更冷
-    hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
+    hue = isLight ? hsvH - hueStep * i : hsvH + hueStep * i;
   } else {
     // 暖色调
     // 减淡变亮 色相逆时针旋转 更暖
     // 加深变暗 色相顺时针旋转 更冷
-    hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
+    hue = isLight ? hsvH + hueStep * i : hsvH - hueStep * i;
   }
+
   if (hue < 0) {
     hue += 360;
-  } else if (hue >= 360) {
+  }
+
+  if (hue >= 360) {
     hue -= 360;
   }
+
   return hue;
 }
 
@@ -79,23 +135,33 @@ function getHue(hsv: HsvColor, i: number, isLight: boolean) {
  * @param isLight - 是否是亮颜色
  */
 function getSaturation(hsv: HsvColor, i: number, isLight: boolean) {
+  // 灰色不渐变
+  if (hsv.h === 0 && hsv.s === 0) {
+    return hsv.s;
+  }
+
   let saturation: number;
+
   if (isLight) {
     saturation = hsv.s - saturationStep * i;
   } else if (i === darkColorCount) {
     saturation = hsv.s + saturationStep;
   } else {
     saturation = hsv.s + saturationStep2 * i;
   }
+
   if (saturation > 100) {
     saturation = 100;
   }
+
   if (isLight && i === lightColorCount && saturation > 10) {
     saturation = 10;
   }
+
   if (saturation < 6) {
     saturation = 6;
   }
+
   return saturation;
 }
 
@@ -107,14 +173,17 @@ function getSaturation(hsv: HsvColor, i: number, isLight: boolean) {
  */
 function getValue(hsv: HsvColor, i: number, isLight: boolean) {
   let value: number;
+
   if (isLight) {
     value = hsv.v + brightnessStep1 * i;
   } else {
     value = hsv.v - brightnessStep2 * i;
   }
+
   if (value > 100) {
     value = 100;
   }
+
   return value;
 }
 
@@ -144,3 +213,11 @@ export function mixColor(firstColor: string, secondColor: string, ratio: number)
 export function isWhiteColor(color: string) {
   return colord(color).isEqual('#ffffff');
 }
+
+/**
+ *	获取颜色的rgb值
+ * @param color 颜色
+ */
+export function getRgbOfColor(color: string) {
+  return colord(color).toRgb();
+}
diff --git a/src/views/dashboard/analysis/components/top-chart/index.vue b/src/views/dashboard/analysis/components/top-chart/index.vue
@@ -4,7 +4,7 @@
       <n-card :bordered="false" class="rounded-16px shadow-sm">
         <div class="flex w-full h-360px">
           <div class="w-200px h-full py-12px">
-            <h3 class="text-16px font-bold">Dashboard</h3>
+            <h3 class="text-16px text-custom font-bold">Dashboard</h3>
             <p class="text-[#aaa]">Overview Of Lasted Month</p>
             <h3 class="pt-36px text-24px font-bold">
               <count-to prefix="$" :start-value="0" :end-value="7754" />

diff --git a/uno.config.ts b/uno.config.ts
@@ -44,26 +44,26 @@ export default defineConfig({
   },
   theme: {
     colors: {
-      primary: 'var(--primary-color)',
-      primary_hover: 'var(--primary-color-hover)',
-      primary_pressed: 'var(--primary-color-pressed)',
-      primary_active: 'var(--primary-color-active)',
-      info: 'var(--info-color)',
-      info_hover: 'var(--info-color-hover)',
-      info_pressed: 'var(--info-color-pressed)',
-      info_active: 'var(--info-color-active)',
-      success: 'var(--success-color)',
-      success_hover: 'var(--success-color-hover)',
-      success_pressed: 'var(--success-color-pressed)',
-      success_active: 'var(--success-color-active)',
-      warning: 'var(--warning-color)',
-      warning_hover: 'var(--warning-color-hover)',
-      warning_pressed: 'var(--warning-color-pressed)',
-      warning_active: 'var(--warning-color-active)',
-      error: 'var(--error-color)',
-      error_hover: 'var(--error-color-hover)',
-      error_pressed: 'var(--error-color-pressed)',
-      error_active: 'var(--error-color-active)',
+      primary: 'rgb(var(--primary-color))',
+      primary_hover: 'rgb(var(--primary-color-hover))',
+      primary_pressed: 'rgb(var(--primary-color-pressed))',
+      primary_active: 'rgb(var(--primary-color-active))',
+      info: 'rgb(var(--info-color))',
+      info_hover: 'rgb(var(--info-color-hover))',
+      info_pressed: 'rgb(var(--info-color-pressed))',
+      info_active: 'rgb(var(--info-color-active))',
+      success: 'rgb(var(--success-color))',
+      success_hover: 'rgb(var(--success-color-hover))',
+      success_pressed: 'rgb(var(--success-color-pressed))',
+      success_active: 'rgb(var(--success-color-active))',
+      warning: 'rgb(var(--warning-color))',
+      warning_hover: 'rgb(var(--warning-color-hover))',
+      warning_pressed: 'rgb(var(--warning-color-pressed))',
+      warning_active: 'rgb(var(--warning-color-active))',
+      error: 'rgb(var(--error-color))',
+      error_hover: 'rgb(var(--error-color-hover))',
+      error_pressed: 'rgb(var(--error-color-pressed))',
+      error_active: 'rgb(var(--error-color-active))',
       dark: '#18181c'
     }
   }