Personalice el tema en la página vue3, la razón subyacente del scss de element-puls

 El principio de color de element-puls, porque primero necesitamos definir diferentes colores de tema para nosotros, por lo que definitivamente es imposible ser exactamente lo mismo, pero el proceso general es así,

Pero déjame explicarte primero que no hay una buena manera de modificar el color del tema. El método final es usar js para cubrir el color del tema más importante (serie  primart)  de la biblioteca de componentes ui para lograr el efecto del color del tema dinámico.

También pensé en usar js para modificar las variables de scss, pero esto no funciona en absoluto, porque las funciones y los métodos de scss solo pueden usar variables de scss, y para modificar las variables de scss se requiere una capa de variables de css, como:

$aaa:var(--my-color,red)
//然后
 document.documentElement.style.setProperty("--my-color", '#626aef');

Pero de esta manera, la función y el método de scss no se pueden reconocer ,

Debido a que var() está en css , scss no se compilará en absoluto y tratará a var(--my-color,red) como un valor

Entonces solo puede usar js para sobrescribir la variable anterior con la nueva variable.

Por supuesto, si tiene una mejor manera (con el menor código js) para lograr cambios dinámicos en el color del tema, puede dejar un mensaje

 Si desea usarlo para crear su propio tema personalizado, se pueden modificar los primeros con parámetros !default , el más importante de los cuales es la variable $default-theme-arr,

Si tiene una comprensión más profunda, también puede modificar los parámetros internos para lograr más colores.

 Escriba lo siguiente en el archivo scss y luego impórtelo en main.ts

@use "sass:math";
@use "sass:map";
// 你要的颜色(key值不能为颜色,英文表示的颜色也不行,但是可以isviolet)
$default-theme-arr: (
	isviolet: #626aef,
	iscolour: #41b584,
	isblue:#409eff,
	isred:#f34d37,
) !default;
// 你的空间命名(前缀)
$namespace: "my" !default;
// 你的混入白  (会影响到light系列相关的颜色)
$mix-white-color: #ffffff !default;
// 你的混入黑 (会影响到dark系列相关的颜色)
$mix-black-color: #141414 !default;
//最终的light层级,element默认为 3, 5, 7, 8, 9(需要整数)
$light-tier: (3, 5, 7, 8, 9) !default;


// keys和values
$default-theme-keys: map.keys($default-theme-arr);
$default-theme-values: map.values($default-theme-arr);

// 自定义scss变量
$default-theme: () !default;
@each $type in $default-theme-keys {
	$default-theme: map.deep-merge(
		(
			$type: (
				"base": map.get($default-theme-arr, $type),
			),
		),
		$default-theme
	) !global;
}
// https://sass-lang.com/documentation/values/maps#immutability
//用白/黑混合颜色来产生亮/暗的层次
@mixin set-color-mix-level($type, $mode, $number, $mix-color) {
	$default-theme: map.deep-merge(
		(
			$type: (
				// light-$i:混合(混合的颜色,被混合的颜色,混合多少)
				// mix($color1, $color2, $weight) 表示$color1的比例为$weight，$color2的比例为1-$weight
				// math.转百分比(math.转分数(分子,分母)) 
				// 		如 math.percentage(math.div(2, 10)) => math.percentage(0.2) => 20%
				// 最终混合出的颜色为:白或黑为20%,传进来的颜色为剩余的80%
				"#{$mode}-#{$number}":
					mix(
						$mix-color,
						map.get($default-theme, $type, "base"),
						math.percentage(math.div($number, 10))
					),
			),
		),
		$default-theme
	) !global;
}

// css变量名
@function joinVarName($list) {
	$name: "--" + $namespace; //前缀
	// 遍历变量名 并返回
	@each $item in $list {
		@if $item != "" {
			$name: $name + "-" + $item;
		}
	}
	@return $name;
}
//设置CSS var值，因为我们需要将value转换为字符串
//例如:@include set-css-var-value(('color'， 'primary')， red);
// --el-color-primary:红色;
@mixin set-css-var-value($name, $value) {
	#{joinVarName($name)}: #{$value};
}

// 添加不同的变量颜色
// light 系列     $colors.primary.light-i
@each $type in $default-theme-keys {
	@for $i from 1 through 9 {
		@include set-color-mix-level($type, "light", $i, $mix-white-color);
	}
}
// dark 系列      $colors.primary.light-i
@each $type in $default-theme-keys {
	@for $i from 1 through 9 {
		@include set-color-mix-level($type, "dark", $i, $mix-black-color);
	}
}
// 自定义颜色
:root {
	@for $ii from 1 through length($default-theme-arr) {
		$this-key: nth($default-theme-keys, $ii);
		$this-value: nth($default-theme-values, $ii);

		@include set-css-var-value(
			($this-key, "rgb"),
			(red($this-value), green($this-value), blue($this-value))
		);
		@include set-css-var-value($this-key, $this-value);
		@each $i in $light-tier {
			@include set-css-var-value(
				($this-key, "light", $i),
				map.get($default-theme, $this-key, "light-#{$i}")
			);
		}
		@include set-css-var-value(
			($this-key, "dark-2"),
			map.get($default-theme, $this-key, "dark-2")
		);
	}
}
// 黑暗模式
html.dark {
	@for $ii from 1 through length($default-theme-arr) {
		$this-key: nth($default-theme-keys, $ii);
		$this-value: nth($default-theme-values, $ii);

		@include set-css-var-value(
			($this-key, "rgb"),
			(red($this-value), green($this-value), blue($this-value))
		);
		@include set-css-var-value($this-key, $this-value);
		@each $i in $light-tier {
			@include set-css-var-value(
				($this-key, "light", $i),
				map.get($default-theme, $this-key, "dark-#{$i}")
			);
		}
		@include set-css-var-value(
			($this-key, "dark-2"),
			map.get($default-theme, $this-key, "dark-2")
		);
	}
}

Efectos de color variables:

 Modificar los colores del tema

<template>
<el-select v-model="TopicAcitve">
	<el-option
		class="option"
		v-for="item in Topic"
		:key="item.value"
		:label="item.label"
		:value="item.value" />
    </el-select>
</template>
<script setup lang="ts">
// 主题色(参数只能是 scss文件你写的 $default-theme-arr里面的key值)
let Topic: ref([
    { label: '主题蓝', value: 'isblue' },
    { label: '主题绿', value: 'iscolour' },
    { label: '主题红', value: 'isred' },
    { label: '主题紫', value: 'isviolet' }
]),
let TopicAcitve = ref('isblue')


const style = document.documentElement.style;
//监听用户有没有修改主题色
watch(() => TopicAcitve.value,(newVal) => {
		style.setProperty("--el-color-primary-rgb", `var(--my-${themeColor}-rgb)`);
		style.setProperty("--el-color-primary", `var(--my-${themeColor})`);
		style.setProperty("--el-color-primary-light-3", `var(--my-${themeColor}-light-3)`);
		style.setProperty("--el-color-primary-light-5", `var(--my-${themeColor}-light-5)`);
		style.setProperty("--el-color-primary-light-7", `var(--my-${themeColor}-light-7)`);
		style.setProperty("--el-color-primary-light-8", `var(--my-${themeColor}-light-8)`);
		style.setProperty("--el-color-primary-light-9", `var(--my-${themeColor}-light-9)`);
		style.setProperty("--el-color-primary-dark-2", `var(--my-${themeColor}-dark-2)`);
});
</script>

representaciones

El contenido es diferente, el código utilizado es el mismo

20230222_112753