HTML 多套主题（夜间，白天等）的探索 2

除了上一篇博客https://www.cnblogs.com/adamr/p/17753396.html，利用js 移除和添加css资源文件，还有一个更为简单的做法，那就是css的属性选择器

<head>
    <style>
        [theme="dark"]{
            --status-colors-error: #C72929;
            --input-label-color: #8E8F90;
            --input-border-color-focus: #075FDB;
            --input-background-color: white;
            --input-border-color: #DBDEEA;
            --input-disabled: #DBDEEA;
        }
        [theme="light"]{
            ...
        }
        .label{
            color: var(--input-label-color);
        }
    </style>
</head>
<body id="theme" theme="dark" >
    <p class="label">label</p>
</body>

通过js修改主题

<script>
     document.getElementById('theme').setAttribute('theme', 'light')
</script>

属性选择器是一个很好用的选择器，vue的<style scope> 原理用的也是这个，<style scope>原理会在下一篇博客介绍

posted @ 2023-10-14 00:42  探索星空  阅读(13)  评论(0)  编辑  收藏  举报