|
|
@@ -0,0 +1,134 @@
|
|
|
+/*
|
|
|
+ * @Author: wjc
|
|
|
+ * @Date: 2026-01-19 16:52:19
|
|
|
+ * @LastEditors: wjc
|
|
|
+ * @LastEditTime: 2026-01-22 09:43:34
|
|
|
+ * @Description:
|
|
|
+ */
|
|
|
+import { TinyColor } from '@ctrl/tinycolor'
|
|
|
+import { getColors } from 'theme-colors'
|
|
|
+
|
|
|
+interface ColorItem {
|
|
|
+ alias?: string
|
|
|
+ color: string
|
|
|
+ name: string
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 生成颜色变量的函数
|
|
|
+ * @param colorItems 颜色项数组，每个项包含颜色、名称和可选的别名
|
|
|
+ * @returns 颜色变量的记录对象，键为 CSS 变量名，值为颜色值:
|
|
|
+ * @example
|
|
|
+ * --primary-500: #505050;
|
|
|
+ * --primary-400: #c0c0c0;
|
|
|
+ * --primary-300: #d0d0d0;
|
|
|
+ * --primary-200: #e0e0e0;
|
|
|
+ * --primary-100: #f0f0f0;
|
|
|
+ * --primary-50: #fafafa;
|
|
|
+ */
|
|
|
+function generatorColorVariables(colorItems: ColorItem[]) {
|
|
|
+ const colorVariables: Record<string, string> = {}
|
|
|
+
|
|
|
+ colorItems.forEach(({ alias, color, name }) => {
|
|
|
+ if (color) {
|
|
|
+ const colorsMap = getColors(new TinyColor(color).toHexString())
|
|
|
+
|
|
|
+ let mainColor = colorsMap['500']
|
|
|
+
|
|
|
+ const colorKeys = Object.keys(colorsMap)
|
|
|
+
|
|
|
+ colorKeys.forEach((key) => {
|
|
|
+ const colorValue = colorsMap[key]
|
|
|
+
|
|
|
+ if (colorValue) {
|
|
|
+ colorVariables[`--${name}-${key}`] = colorValue
|
|
|
+ if (alias) {
|
|
|
+ colorVariables[`--${alias}-${key}`] = colorValue
|
|
|
+ }
|
|
|
+
|
|
|
+ if (key === '500') {
|
|
|
+ mainColor = colorValue
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (alias && mainColor) {
|
|
|
+ colorVariables[`--${alias}`] = mainColor
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return colorVariables
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 将 CSS 颜色变量设置到根元素样式中
|
|
|
+ * @param variables 要更新的 CSS 变量与其新值的映射
|
|
|
+ */
|
|
|
+function setCSSVariables(
|
|
|
+ variables: { [key: string]: string },
|
|
|
+ id = '__uni-starter-styles__'
|
|
|
+): void {
|
|
|
+ // 获取或创建内联样式表元素
|
|
|
+ const styleElement = document.querySelector(`#${id}`) || document.createElement('style')
|
|
|
+
|
|
|
+ styleElement.id = id
|
|
|
+
|
|
|
+ // 构建要更新的 CSS 变量的样式文本
|
|
|
+ let cssText = ':root, page {'
|
|
|
+ for (const key in variables) {
|
|
|
+ if (Object.prototype.hasOwnProperty.call(variables, key)) {
|
|
|
+ cssText += `${key}: ${variables[key]};`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ cssText += '}'
|
|
|
+
|
|
|
+ // 将样式文本赋值给内联样式表
|
|
|
+ styleElement.textContent = cssText
|
|
|
+
|
|
|
+ // 将内联样式表添加到文档头部
|
|
|
+ if (!document.querySelector(`#${id}`)) {
|
|
|
+ setTimeout(() => {
|
|
|
+ document.head.append(styleElement)
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 更新主要的 CSS 变量
|
|
|
+ * @param preference - 当前偏好设置对象，它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。
|
|
|
+ */
|
|
|
+export function updateMainColorVariables(theme: any) {
|
|
|
+ // 当修改到颜色变量时，更新 css 变量
|
|
|
+ const root = document.documentElement
|
|
|
+ if (!root) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!theme) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const { colorDestructive, colorPrimary, colorSuccess, colorWarning } = theme
|
|
|
+
|
|
|
+ const colorVariables = generatorColorVariables([
|
|
|
+ { color: colorPrimary, name: 'primary' },
|
|
|
+ { alias: 'warning', color: colorWarning, name: 'yellow' },
|
|
|
+ { alias: 'success', color: colorSuccess, name: 'green' },
|
|
|
+ { alias: 'destructive', color: colorDestructive, name: 'red' },
|
|
|
+ ])
|
|
|
+
|
|
|
+ // 要设置的 CSS 变量映射
|
|
|
+ const colorMappings = {
|
|
|
+ '--green-500': '--success',
|
|
|
+ '--primary-500': '--primary',
|
|
|
+ '--red-500': '--destructive',
|
|
|
+ '--yellow-500': '--warning',
|
|
|
+ }
|
|
|
+
|
|
|
+ // 统一处理颜色变量的更新
|
|
|
+ Object.entries(colorMappings).forEach(([sourceVar, targetVar]) => {
|
|
|
+ const colorValue = colorVariables[sourceVar]
|
|
|
+ if (colorValue) {
|
|
|
+ document.documentElement.style.setProperty(targetVar, colorValue)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ setCSSVariables(colorVariables)
|
|
|
+}
|
