现在要实现网页主题的切换成本较小的一种方案就是使用css的变量来实现

HTML

在HTML的body标签上先定义一个id元素属性

<body id="sm-theme">

	<sj-root></sj-root>

</body>

CSS

css定义css变量,变量的定义必须要以 -- 开头

#sm-theme {

	--smTheme: #2A2A2A;

	--smSettingRight: #484848;

	--smSettingRightBox: #2A2A2A;

}

js

在任何地方使用js/ts来获取body上定义的sm-theme属性名从而操作定义在里面的css样式变量

 changeTheme(colorName) {

    const theamEle = document.getElementById('sm-theme'); // 获取id为sm-theme的元素

    theamEle.style.setProperty('--smTheme', colorName); // 设置--smTheme变量为我们想要的颜色

    const theamColor = getComputedStyle(theamEle).getPropertyValue('--smTheme'); // 获取--smTheme变量的颜色

    if (theamColor === '#2A2A2A') {

      theamEle.style.setProperty('--smSettingRight', '#484848');

      theamEle.style.setProperty('--smSettingRightBox', '#2A2A2A');

    } else {

      theamEle.style.setProperty('--smSettingRight', 'rgba(180,180,180,0.4)');

      theamEle.style.setProperty('--smSettingRightBox', '#5C5C5C');

    }

关于使用css变量实现主题的切换效果的更多相关文章

  1. Vue项目使用CSS变量实现主题化

    主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件.现在大部分浏览器都能很好的兼容CSS变量,主题化样式更容易管理了.最近,使用C ...

  2. 教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜

    因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大 ...

  3. 初次接触CSS变量

    本文的目的主要是展示CSS变量是如何工作的.随着Web应用程序变得越来越大,CSS变得越来越大,越来越多,而且很多时候都很乱,在良好的上下文中使用CSS变量,为您提供重用和轻松更改重复出现的CSS属性 ...

  4. CSS动画实例：图文切换

    先准备好一张图片,在页面中放置一个类名为container的层作为图文容器,在该层中再定义两个层:一个类名为image-box的层放置图片,一个类名为text-desc的层放置文本描述,HTML代码描 ...

  5. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

  6. 原生CSS设置网站主题色—CSS变量赋值

    定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...

  7. 自定义视图引擎，实现MVC主题快速切换

    一个网站的主题包括布局,色调,内容展示等,每种主题在某些方面应该或多或少不一样的,否则就不能称之为不同的主题了.每一个网站至少都有一个主题,我这里称之为默认主题,也就是我们平常开发设计网站时的一个固定 ...

  8. CSS实现页面背景自动切换功能

    From here:http://xiaomiya.iteye.com/blog/2047728 请看效果图: 完整代码如下: <!DOCTYPE HTML> <html> & ...

  9. CSS变量（CSS variable）

    使用 CSS 变量编写你的样式代码 基本使用: 1. --variable: <declaration-value> 2. <css-attribute>: var(--var ...

随机推荐

  1. springboot +Thymeleaf+UEditor整合记录

    1,ueditor官网下载:https://ueditor.baidu.com/website/download.html  下载相应的工具包和源码,ps:源码放到工程中 2,解压放到放到项目中,sp ...

  2. java.sql.BatchUpdateException: ORA-01691: Lob 段 CSASSSMBI.SYS_LOB0000076987C00003$$ 无法通过 128 (在表空间 HRDL_CSASS 中) 扩展

    问题: 在tomcat日志信息中出现:java.sql.BatchUpdateException: ORA-01691: Lob 段 CSASSSMBI.SYS_LOB0000076987C00003 ...

  3. 吴裕雄--天生自然 JAVA开发学习：方法

    /** 返回两个整型变量数据的较大值 */ public static int max(int num1, int num2) { int result; if (num1 > num2) re ...

  4. 01 语言基础+高级：1-4 接口与多态_day09【继承、super、this、抽象类】

    day09[继承.super.this.抽象类] 三大特性——继承方法重写super关键字this关键字抽象类 教学目标能够解释类名作为参数和返回值类型能够写出类的继承格式能够说出继承的特点能够说出子 ...

  5. [Scoi2016]背单词（trie+贪心）

    题意:重新解释一下题意吧(题意晦涩难懂) 给定n个单词,你可以按照顺序学习,当学习这一单词时,这个单词是第x个要学习的单词,需要的代价分三类: 1.若存在其他单词是其后缀没被学习,则代价为n2 2.若 ...

  6. LAMP环境搭建，防火墙开启，数据库挂载在逻辑卷

    具体要求: 1. 源码部署 LAMP 环境, 和生产保持一致 2. 静态资源文件同步生产环境 3. 需要同时部署 2 个 web 网站 步骤: 一. 需要的安装包. 提前准备好. apr-util-1 ...

  7. PyTorch基础——机器翻译的神经网络实现

    一.介绍 内容 "基于神经网络的机器翻译"出现了"编码器+解码器+注意力"的构架,让机器翻译的准确度达到了一个新的高度.所以本次主题就是"基于深度神经 ...

  8. 使用sshfs

    寻找winscp在mac下的代替品, 没有找到. 但找到一个更好用的方法: 通过sshfs挂载文件目录,当作普通文件夹使用. 使用方法 sshfs -o defer_permissions -o no ...

  9. c语言中continue的运用，同时学习接收字符，打印字符，遍历字符

    /************************************************************************* > File Name: continue. ...

  10. py学习笔记1.13、1.14

    1.name.title() 首字母大写 name.upper() 全部大写 name.lower() 全部小写 2.+ 合并字符串 3.单引号.双引号都可以表示字符串 4.# 注释 5.索引制定为- ...