换肤

作者: 易路先登 | 来源:发表于2021-09-17 14:56 被阅读0次

手写动态换肤
字节头条部Android二面：说说Android动态换肤实现原理
字节跳动头条部Android二面：说说Android动态换肤实现
字节头条部Android二面：说一说Android动态换肤实现原
js换肤、js可控制换肤
初步了解安卓的主题更换
再谈 Swift 换肤功能
iOS app换肤
Android 换肤的思路
【靶点突破】网易云换肤方案探讨

静态页换肤

红背景

黄背景

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            --background-color:red;
        }
        html,body{
            width:100%;
            height:100%;
            padding:0;
            margin:0;
        }
        body{
            background-color: var(--background-color);
        }
        .switch-input{
            display:none;
        }
        .switch-label{
            display:inline-block;
            width:50px;
            height:24px;
            border:1px solid grey;
            border-radius:24px;
            position:relative;
            padding:1px;
            box-sizing: border-box;
        }
        .switch-label::after{
            display: inline-block;
            content:'';
            width:50%;
            height:20px;
            background-color: blue;
            position:absolute;
            left:0;
            border-radius:20px;
            transition: all .2s ease-in;
        }
        .switch-input:checked + .switch-label::after{
            left:50%;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <input type="checkbox" id="switch-box" class="switch-input" />
    <label for="switch-box" class="switch-label"></label>
    <script>
        document.querySelector('#switch-box').addEventListener('click',()=>{
            document.documentElement.style.setProperty('--background-color','yellow')
        })
    </script>
</body>
</html>

换肤组件
ToggleFace

import react,{useEffect} from 'react'
import './toggleFace.css'
//初始化变量名和值
// {
//     '--bgcolor':'red'
// }
/*
<style>
:root{
    '--bgcolor':'red'
}
</style>
*/
//切换颜色的方法

interface ToggleFaceFC{
    initColorKey:object;
    changeVar:(key:string,value:string)=>void
}
export default function ToggleFace(props:ToggleFaceFC){
    useEffect(()=>{
        let styleStr = `:root{`
        for(let key in props.initColorKey){
            styleStr+=key+':'+props.initColorKey[key]+';\n'
        }
        styleStr+='}'
        let styleDom = document.createElement('style')
        styleDom.innerHTML=styleStr
        document.head.appendChild(styleDom)
    },[])
    return <>
        <input type="checkbox" id="switch-box" className="switch-input" onClick={props.changeVar} />
        <label for="switch-box" className="switch-label"></label>
    </>
}

toggleFace.css

.switch-input{
    display:none;
}
.switch-label{
    display:inline-block;
    width:50px;
    height:24px;
    border:1px solid grey;
    border-radius:24px;
    position:relative;
    padding:1px;
    box-sizing: border-box;
}
.switch-label::after{
    display: inline-block;
    content:'';
    width:50%;
    height:20px;
    background-color: blue;
    position:absolute;
    left:0;
    border-radius:20px;
    transition: all .2s ease-in;
}
.switch-input:checked + .switch-label::after{
    left:50%;
    transform: rotate(360deg);
}