文章封面

使用 CSS 变量实现暗黑模式

发布于 2020-04-06 16:10:29阅读量 373

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;
    }

    img:hover {
        opacity: 1;
    }
}

暗黑模式的媒体查询

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

PS: 兼容性不是很好。

JavaScript 判断当前系统主题

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

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

CSS 变量兼容性

发布时间:2020-04-06 16:10:29

版权信息:非商用-署名-自由转载

推荐阅读

暂无推荐

    评论

    编辑器努力加载中...