Wisdoms

CSS 自定义属性基本使用方法

自定义属性声明使用两个连词线 -- 表示（$color 是属于Sass的语法，@color 是属于Less的语法，为避免冲突，css自定义属性使用 -- ）。

使用 CSS 自定义属性切换主题

通过改变自定义属性值即可达到切换主题的效果。

<body>
    <main>
        <h2>标题</h2>
        <p>描述描述</p>
        <button>切换主题</button>
    </main>
</body>

body {
    --bg: #f4f4f4;
    --text-color: rgba(0, 0, 0, .85);
}

body.dark {
    --bg: #282c35;
    --text-color: rgba(255, 255, 255, .85);
}

* {
    margin: 0;
    padding: 0;
}

main {
    height: 100vh;
    text-align: center;
    background: var(--bg);
    color: var(--text-color);
}

button {
    padding: 4px 8px;
    margin: 20px;
}

const btn = document.querySelector('button')

btn.onclick = () => {
    if (document.body.classList.contains('dark')) {
        document.body.classList.remove('dark')
    } else {
        document.body.classList.add('dark')
    }
}

效果：

实现暗黑主题

图片处理

为了使图片不至于太过明亮，可以在暗黑主题里降低图片的透明度。

@media (prefers-color-scheme: dark) {
    img {
        opacity: .75;
        transition: opacity .5s ease-in-out;
        &:hover {
            opacity: 1
        }
    }
}

也可以通过控制图片的亮度来展示

@media (prefers-color-scheme: dark) {
    img{
        filter: brightness(.6) contrast(1.2);
        &:hover{
            filter: brightness(1) contrast(1);
        }
    }
}

暗黑模式的媒体查询

@media (prefers-color-scheme: dark) {
}

PS: 兼容性不是很好。

JavaScript 判断当前系统主题

MacOS、iOS，以及一些较新的安卓手机等都支持了暗黑（深色）模式。可以使用 JS 进行判断。

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark
}

CSS 自定义属性兼容性

image.png

评 论

0/500
评论列表
湘ICP备18002581号