首页 > 其他分享 >前端换肤,聊一聊主题切换那些事

前端换肤,聊一聊主题切换那些事

时间:2023-05-18 18:23:41浏览次数:48  
标签:换肤 变量 -- 前端 colors theme 聊一聊 切换 html

一些网站通常会提供白天、夜间模式,以及自定义主题等等,这种主题切换也就是本文说的前端换肤。
这次案例用的是白天和夜间模式的切换,在做换肤之前,得先知道一件事情:css的变量定义,对变量定义不熟悉的同学请看MDN文档:自定义属性(--*):CSS 变量

主题切换也就是样式的切换,白天和黑夜的模式切换需要准备两套样式,我们通过css的变量定义,全局访问这些公共变量就可以实现主题切换。
此处我已经准备好了样式:

/*style.css*/
/* 基本样式 */
:root {
  --theme-background: #ecf5ff; /*背景色*/
  --theme-menuBackground : #fff; /*菜单颜色*/
  --theme-menuIcon : #303133; /*菜单icon*/
}

/* 黑夜模式 */
html[theme-colors='dark'] {
  --theme-background: #1b1b1b;  /*背景色*/
  --theme-menuBackground : #343434; /*菜单颜色*/
  --theme-menuIcon : #cdcdcd; /*菜单icon*/
  --theme-activeColor : #97a1fe;
}
/* 白天 */
html[theme-colors='white'] {
  --theme-background: #ecf5ff; /*背景色*/
  --theme-menuBackground : #fff; /*菜单颜色*/
  --theme-menuIcon : #303133; /*菜单icon*/
  --theme-activeColor : #97a1fe;
}

默认情况用:root定义的样式,黑夜模式用dark,白天用white

公共样变量定义后,我们就可以到页面使用了,例如设置卡片的背景色:

.card {
  background: var(--theme-background); 
}

此时访问的是:root中的默认变量,我们需要做到根据按钮切换,访问不同主题下的变量

<!-- 换肤 -->
<el-switch
    v-model="theme"
    inline-prompt
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #97a0ff"
    :active-icon="Sunny"
    :inactive-icon="Moon"
    @change="themeChange"
/>
// 主题切换
const theme = ref<boolean>(true);
const themeChange = (val : boolean) => {
  // true白天 false夜晚
   if(val){
    document.querySelectorAll('html')[0].setAttribute('theme-colors','white')
   } else {
    document.querySelectorAll('html')[0].setAttribute('theme-colors','dark')
   }
}

setAttribute()设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性。如果要切换夜间模式,我们可以给html设置一个属性为theme-colors = dark,此时我们就可以访问html[theme-colors='dark']下的css变量了
,白天模式切换theme-colors = white即可。
在这里插入图片描述
在做项目之前我们可以考虑到这一点,否则后期页面都写好了再改会比较麻烦。如果用了前端框架的话,我们需要覆盖框架自带的样式,我们可以将覆盖的样式写成公共文件,全局引入或者在对应页面引入即可。


如果觉得这篇文章对你有帮助,欢迎点赞

标签:换肤,变量,--,前端,colors,theme,聊一聊,切换,html
From: https://www.cnblogs.com/wang-fan-w/p/17412963.html

相关文章

  • “前端”工匠系列(二):合格的工匠,怎么做好价值落地
    一、"技术鄙视链?"如果你是一个技术人,相信都知道技术圈有个相互的鄙视链,这个链条从技术人自己认知的角度在以业务价值为中心嵌套的一层一层的环,就像洋葱,具体的描述这里不赘述了。出门左拐随便抓住一个人问一下。这种偏自嘲类的观点,有点类似"程序员的穿着必须是格子衫"、"你们只会......
  • 微前端中路由的跳转
    微前端中路由的跳转针对基座与子应用都是Angular的场景,实现应用间的路由跳转基座往子应用的跳转首先在路由中要定义一个空组件来承接子路由,可以在基座路由表中添加如下路由{path:'subapp',children:[{path:'**',component:EmptyComponent}]}@C......
  • 前端规范文档( 摘自阿里研发中心 )
     前端代码规范规范的目的是为了编写高质量的代码,让你的团队成员每天得心情都是愉悦的,大家在一起是快乐的。引自《阿里规约》的开头片段:----现代软件架构的复杂性需要协同开发完成,如何高效地协同呢?无规矩不成方圆,无规范难以协同,比如,制订交通法规表面上是要限制行车权,实际上......
  • 前端工作小结1-拦截器的使用
    1.拦截器综述拦截器的功能是定义在Java拦截器规范。拦截器规范定义了三种拦截点:业务方法拦截,生命周期回调侦听,超时拦截(EJB)方法。在容器的生命周期中进行拦截   publicclassDependencyInjectionInterceptor{      @PostConstruct      publicvoidi......
  • flask_前端继承
      外部引入一段代码,include    ......
  • 前端-Vue语法使用
    ES6做为动态语言,感觉底层开始-基本类型就全引用。做为实例化的变量,也变得像指向指针的指针,可以随时切换指针,从而最终的数据类型也更着切换总的来说概念上会比较别扭。以及灵活导致的不确定性。底层都是对象,从对象的类型来搭建。基本类型\ PrimitivevalueUndefined,Null,Boo......
  • 最近遇到的一个问题 后端写好的接口,前端怎么获取数据
    这是我后端的接口:GET接口这是我前端运行的项目地址:简单使用:咱门前端使用颇受好评的axios来发起请求这是它的官网:https://www.axios-http.cn/不过要在vue中使用它,就需要先安装打开终端输入一下命令 npminstallaxios然后在需要使用的页面<script>中标签引入a......
  • Nginx 常用的基础配置(web前端相关方面)
    基础配置userroot;worker_processes1;events{worker_connections10240;}http{log_format'$remote_addr-$remote_user[$time_local]''"$request"$st......
  • 前端-VUE
    工程化这里要从node.js开始。node.js要弄一个基于事件驱动、非阻塞I/O的的web服务,发现V8引擎+JavaScript很合适。这样Js就能直接写后端应用。然后发展成作为本地的运行容器(类似jdk),将js导入到了本地运行领域。以此位基础,发展出了生态环境,里面关系挺绕的,各种轮子,互相占位。......
  • VUE前端随笔计2
    又是小白记录问题的一次,老规矩,还是抄别人的代码来改。 在表标签中找到了一个点击事件定位代码,对比别人的,发现自己的删多了,把这个补充回去就行了,具体意思不太明白,大概是给这个模型里面填充这行数据。 ......