+
95
-

css如何实现动态更换皮肤主题?

请问css如何实现动态更换皮肤主题?

网友回复

+
15
-

通过css变量来控制,再结合localstorage来实现主题刷新留存效果,代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

  
    <style>
        :root {
        --background-color: #fff;
        --text-color: #121416d8;
        --link-color: #543fd7;
    }
    
    html[data-theme='light'] {
        --background-color: #fff;
        --text-color: #121416d8;
        --link-color: #543fd7;
    }
    
    html[data-theme='dark'] {
        --background-color: #212a2e;
        --text-color: #F7F8F8;
        --link-color: #828fff;
    }...

点击查看剩余70%

我知道答案,我要回答