feat(projects): custom unocss colors support opacity
This commit is contained in:
parent
f73e3f648d
commit
488e6e3204
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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,7 +135,13 @@ 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) {
|
||||
@ -87,15 +149,19 @@ function getSaturation(hsv: HsvColor, i: number, isLight: boolean) {
|
||||
} 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();
|
||||
}
|
||||
|
@ -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" />
|
||||
|
@ -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'
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user