动态一键换肤实现思路和demo

前言

浏览器切换样式无非是通过css，总共有以下三种方法。

内联style
注入style
注入link

那么我们想要实现一键换肤，那么我们为了剥离干净dom和css。我们只能选择style和link这两种方法。

核心思路

在html的head内部插入（更新）style 和 link 实现。

因为link有不局限跨域的优势，我们先以 link 为例子。

通过link实现动态换肤

首先创建一个link元素，并且设置样式相关属性。

   const linkDom = document.createElement('link')linkDom.href = hreflinkDom.rel = "stylesheet"linkDom.type = "text/css"

但是我们如果直接使用 document.head.appendChild(linkDom)来切换布局,那切换几次就会导致head里多很多不必要的link标签。为了解决这个，我们需要声明id，通过替换来实现单例模式。

        function writeLink(id = 'linkCss', href) {const oldStyleDom = document.getElementById(id)const linkDom = document.createElement('link')linkDom.href = hreflinkDom.rel = "stylesheet"linkDom.type = "text/css"linkDom.id = idoldStyleDom ? document.head.replaceChild(linkDom, oldStyleDom) : document.head.appendChild(linkDom)}

完整的代码如下


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head>
<style></style><body><div><button id="theme-toggle">Now light, Click switch to dark mode</button><p>白天红色，晚上黑色</p></div><script>function writeLink(id = 'linkCss', href) {const oldStyleDom = document.getElementById(id)const linkDom = document.createElement('link')linkDom.href = hreflinkDom.rel = "stylesheet"linkDom.type = "text/css"linkDom.id = idoldStyleDom ? document.head.replaceChild(linkDom, oldStyleDom) : document.head.appendChild(linkDom)}window.onload = function () {const themeToggle = document.getElementById('theme-toggle');console.log('themeToggle', themeToggle)writeLink('linkCss', 'https://pangyiming.github.io/light.css')themeToggle.addEventListener('click', () => {// if it's light -> go darkif (themeToggle.innerText.includes('Now light')) {writeLink('linkCss', 'https://pangyiming.github.io/dark.css')themeToggle.innerText = 'Now dark, Click switch to light mode';} else {// if it's dark -> go lightwriteLink('linkCss', 'https://pangyiming.github.io/light.css')themeToggle.innerText = 'Now light, Click switch to dark mode';}})}</script>
</body></html>

效果如下(如果没有效果，大家可以复制代码本地运行，我确保他是可运行的，至于 码上掘金 为什么失灵时不灵。。。@掘金)：

值得一说的是github pages太方便了。简直是一个免费的静态资源服务。我们代码中的css文件便是从github pages中来的。大家可以参考我的另一篇文章# 2022 如何在 GitHub 上搭建个人网站（github.io）

通过style实现动态换肤

function writeStyle(id = 'styleCss', originStyle) {const oldStyleDom = document.getElementById(id)const cssText = originStyle.replace(/[\n\t\r]/ig, '')const styleDom = document.createElement('style')styleDom.innerText = cssTextstyleDom.id = idoldStyleDom ? document.head.replaceChild(styleDom, oldStyleDom) : document.head.appendChild(styleDom)}

动态一键换肤实现思路和demo相关推荐

Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
一.前言其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...
opengl源码实现无缝切换图片过场_手把手讲解 Android hook技术实现一键换肤
前言产品大佬又提需求啦,要求app里面的图表要实现白天黑夜模式的切换,以满足不同光线下都能保证足够的图表清晰度. 怎么办?可能解决的办法很多,你可以给图表view增加一个toggle方法,参数Str ...
wegame一键蹲替换文件_手把手讲解 Android hook技术实现一键换肤
前言产品大佬又提需求啦,要求app里面的图表要实现白天黑夜模式的切换,以满足不同光线下都能保证足够的图表清晰度. 怎么办?可能解决的办法很多,你可以给图表view增加一个toggle方法,参数Str ...
[CSS] 自定义变量带你随心所欲，一键换肤
认识CSS自定义变量 CSS自定义属性?听着怎么那么神奇呢,属性还可以自定义,那不是可以放肆地玩耍?我自己定义的属性浏览器都能认识? 一.基础 (一)名字和用途其实CSS自定义属性还有很多小名,比如 ...
如何利用 SCSS 实现一键换肤
本文首发于政采云前端团队博客:如何利用 SCSS 实现一键换肤 https://www.zoo.team/article/theme-scss 前言在项目开发过程中,我们有时候遇到需要更换站点主题色 ...
Android hook技术实现一键换肤，移动应用开发项目案例
3. 利用HOOK技术实现优雅的"一键换肤" 什么是hook **如题,我是用hook实现一键换肤.那么什么是hook? hook,钩子. 安卓中的hook技术,其实是一个抽象概念 ...
Android通过Hook技术实现一键换肤
目录 1.什么是一键换肤 2.界面上那些东西可以换肤 3.利用Hook实现一键换肤 4.Android创建视图源码分析 4.1.自定义Activity设置要显示的布局文件xml 4.2.调用兼容App ...
Android插件化的思考——仿QQ一键换肤,思考比实现更重要！
Android插件化的思考--仿QQ一键换肤,思考比实现更重要! 今天群友希望写一个关于插件的Blog,思来想去,插件也不是很懂,只是用大致的思路看看能不能模拟一个,思路还是比较重要的,如果你有兴趣的 ...
Spring Boot一键换肤，so easy！
SpringMVC 源码分析系列最后一篇,和大家聊一聊 Theme. Theme,就是主题,点一下就给网站更换一个主题,相信大家都用过类似功能,这个其实和前面所说的国际化功能很像,代码其实也很像,今天 ...

动态一键换肤实现思路和demo

前言

核心思路

通过link实现动态换肤

通过style实现动态换肤

动态一键换肤实现思路和demo相关推荐

最新文章

热门文章