【前端换肤】前端换肤方案

提前引入所有主题样式，做类名切换

  <div class="box"><p>hello</p></div><p>选择样式：<button onclick="change('day')">day</button><button onclick="change('dark')">dark</button></p><script>
function change(theme) {document.body.className = theme;
}
</script>   <style>
/* day样式主题 */
body.day .box {color: #f90;background: #fff;
}
/* dark样式主题 */
body.dark .box {color: #eee;background: #333;
}.box {width: 100px;height: 100px;border: 1px solid #000;
}
</style>

CSS变量+类名切换（推荐）

  <div class="box"><p>hello</p></div><p>选择样式：<button onclick="change('day')">day</button><button onclick="change('dark')">dark</button></p><script>
function change(theme) {document.body.className = theme;
}
</script>   <style>
/* 定义根作用域下的变量 */
:root {--theme-color: #333;--theme-background: #eee;
}
/* 更改dark类名下变量的取值 */
.dark{--theme-color: #eee;--theme-background: #333;
}
/* 更改pink类名下变量的取值 */
.pink{--theme-color: #fff;--theme-background: pink;
}.box {transition: all .2s;width: 100px;height: 100px;border: 1px solid #000;/* 使用变量 */color: var(--theme-color);background: var(--theme-background);
}
</style>

其他见原文

【前端换肤】前端换肤方案相关推荐

前端 “一键换肤“ 的几种方案
作者:熊的猫原文:https://juejin.cn/post/7063010855167721486 前端 "一键换肤" 的几种方案前言现在越来越多的网站都提供了拥有换肤( ...
qiankun 微前端_微前端方案 qiankun（实践及总结）
❝ 作者:沉末_ 链接:https://juejin.im/post/5ed73b73e51d4578724e3fa4 ❞ 什么是微前端? 我们先来看两个实际的场景: 1. 复用别的的项目页面通常, ...
【前端大屏可视化项目适配方案】
引自 https://juejin.cn/post/7009081081760579591#heading-27 感谢!!! 前端大屏可视化项目适配方案 1. 全局适配 1.1 css scale 适 ...
016基于pinia完成Vue3的前端数据持久化储存storage的方案落地
016基于pinia完成Vue3的前端数据持久化储存storage的方案落地支持自定义前缀支持localStorage和sessionStorage 支持自定义某一些key进入缓存模式采用中间件 ...
前端方案（时间/图片/PWA/微信公众号/图片前端压缩/动画与过渡/新兴方案/屏幕适配）
时间时间戳(毫秒数)不分时区,即UTC时间所累积的毫秒数,UI必须获得时间戳或者UTC时间的字符串才能正确显示浏览器本地时间. 方案1.后台数据库存放本地时间,返回时间戳给UI. 后台数据库存放本地 ...
前端网页背景与文字配色方案
前端网页背景与文字配色方案几种比较和谐的文字背景颜色搭配 - GlGh的日子 - CSDN博客 https://blog.csdn.net/leniz/article/details/579494 ...
前端 “一键换肤“ 的 N 种方案
前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群前言现在越来越多的网站都提供了拥有换肤(切换主题)功能,如 ElementUI[2],既是为了迎合用户需求,或是为了凸显自己特点,因 ...
前端监控与前端埋点方案
前端监控与前端埋点方案 https://blog.csdn.net/sinat_36521655/article/details/114650138 用户行为数据可以通过前端数据监控的方式获得,除 ...
2022深圳杯C题自动驾驶电动物料车换电站选址及调度方案
2022深圳杯C自动驾驶电动物料车换电站选址及调度方案为了实现我国在 2030 年前"碳达峰".在 2060 年前"碳中和"的目标,在物料运输中使用环保的 ...
前端一键换肤的几种方案
现在越来越多的网站都提供了拥有换肤(切换主题)功能,如 ElementUI,既是为了迎合用户需求,或是为了凸显自己特点,因此提供了个性化定制的功能. 其实之前就想了解和实现 "一键换肤&qu ...

【前端换肤】前端换肤方案

提前引入所有主题样式，做类名切换

CSS变量+类名切换（推荐）

【前端换肤】前端换肤方案相关推荐

最新文章

热门文章