前端如何实现一键换肤

在前端项目中，有很多项目都存在一键换肤的功能，有很多现存的UI框架也存在相同的功能，但其实他们实现换肤的本质其实都是一样的。都是在顶部的DOM节点中插入对应的class属性或者attribute属性，通过分别设置不同的属性值，然后在这些不同的属性值下设置不同的子节点样式，从而实现不一样的主题样式。而在换肤的时候只需要改变顶部的DOM节点中的这个属性值，就可以展示对应属性的主题样式。

而更多的时候利用attribute属性更加适合实现这个操作，利用class属性可能存在出现同命名的风险。

了解CSS中“[]”的使用

而说到利用attribute属性去实现，那就首先得了解CSS中的"[]“符号，在CSS中括号”[]""是一个重要的符号，它可用于选择器中的属性选择器、伪类的参数、变量定义等方面。

"[]"用作属性选择器时选择元素的指定属性:

[attribute] {
/* 匹配具有 attribute 属性的元素 */
}

"[]"用作属性选择器时通过属性值来选择特定元素：

[attribute=value] {
/* 匹配 attribute 属性为 "value" 的元素 */
}

"[]"用作属性选择器时通过不同的匹配符，例如 ~ （属性值中包含匹配的值）、^（属性值以给定的字符串开头）等：

[attribute~=value] {
/* 匹配 attribute 属性值中包含 "value" 的元素 */
}
[attribute^=value] {
/* 匹配 attribute 属性值以 "value" 开头的元素 */
}

当然更多时候可以选择配合scss或者less去使用会更加的方便简洁。

加载默认样式和修改默认样式

由上面我们可以理解到，其实前端的换肤是通过修改class属性或者attribute属性进行调整全局样式，下面我们通过直接的案例去了解如何实现这个过程。

首先我们先需要定制两套不同的样式，当然如果存在多主题的话，可以设置不同的几套样式。

当属性值data-theme="blue"时的样式。

[data-theme="blue"] {
	.app {
		background: blue;
	}
}

当属性值data-theme="green"时的样式。

[data-theme="green"] {
	.app {
		background: green;
	}
}

然后我们需要一个给顶部节点加入属性值data-theme的操作，下面是对应写法。

// 设置主题色
const themeList = ["blue", "green"];
// 项目初始化需要加载的主题
function startTheme() {
  // 默认样式
  const defaultTheme ="blue";
  // 从本地缓存中获取使用的样式主题
  const curTheme = localStorage.getItem("now_theme");
  // 判断本地缓存中是否存在样式主题数据，有且符合则给顶部节点添加对应属性值，没有则给默认属性值并添加本地缓存
  if (curTheme && themeList.includes(curTheme)) {
    document.documentElement.dataset.theme = curTheme;
  } else {
    document.documentElement.dataset.theme = defaultTheme;
    localStorage.setItem("now_theme", defaultTheme);
  }
}

而当需要切换，我们就要修改顶部节点的属性值data-theme，下面是对应写法。

function switchTheme(theme) {
  // 定义新主题变量
  let nextTheme;
  // 判断值是否正确
  if (theme && typeof theme == "string") {
    nextTheme = theme;
  } else {
    nextTheme = localStorage.getItem("now_theme") || 'blue';
  }
  // 修改顶部节点属性值，并保存到本地数据
  document.documentElement.dataset.theme = nextTheme;
  localStorage.setItem("now_theme", nextTheme);
}

以上就是关于前端实现一键换肤的本质实现方式。