动态修改css中:root定义的变量-换肤、主题色

html-css011

动态修改css中:root定义的变量-换肤、主题色,第1张

前端中有用到需要设置主题颜色,根据用户喜欢实现换肤的可以使用css中:root定义变量的方式,或者使用动态切换引入的外部css样式表实现,这里着重记录下动态修改css中:root定义的变量实现换肤:

这里定义变量必须是以'--'开头,然后其他页面的样式表就可以直接引用这个变量了

至此就完成了动态修改:root变量实现换肤了,具体的应用场景中我们应该是在页面上操作,选中需要的肤色然后修改:root定义的变量值,考虑到浏览器刷新会重置原始状态的值,这里要结合本地存储方式记住选中的肤色,具体的实现参考:

我们在写样式的时候,可能一个app内的颜色,比如#00ff00,假设这个颜色我用了100次,穿插写在不同的页面里。当需要修改这个主题的时候,会让人抓狂。

所以我们可以使用变量来优化。

在html, css里面,它原始的定义方式及使用方法是这样的

其中,:root是根元素选择器,也就是<html>元素。在这里面定义的变量,可以在整个页面进行使用。

使用的时候,用var()函数进行调用。

注意:约定变量名须以两个连字符'--'开头

小程序中,用法基本也是一样的:

我们在wxss页面中进行定义

注意,page选择器是选中整个页面,前面是没有'.'号的。这是wxss系统自带的选择器。可以看到,用法和css原始用法差别不大。

你也可以在wxml里面直接使用!

这个wxss变量,既可以在每个页面mypage.wxss里面的page里声明,

,就能在所有页面里使用。

Element Plus 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。 但是如果需要大规模替换样式,例如: 将主题颜色从蓝色改为橙色或绿色,也许一个个将其覆盖起来不是一个好主意。

如果您的项目也使用了 SCSS,可以直接修改 Element Plus 的样式变量。 新建一个样式文件,例如 styles/element/index.scss:

您应该使用 @use ‘xxx.scss’ as *代替 @import ‘xxx.scss’。