GitHub 夜间模式实现原理拆解

最新推荐文章于 2024-05-28 12:36:33 发布

lefex

最新推荐文章于 2024-05-28 12:36:33 发布

阅读量1.2k

点赞数 3

文章标签： css html css3 js vue

本文链接：https://blog.csdn.net/lefex/article/details/111503368

版权

GitHub 目前已经支持夜间模式，周末分析了它的实现思路，先来看下它的两种模式效果：

它的实现思路其实核心有 4 点：

1、在 html 元素中不同模式中添加不同的属性选择器 data-color-mode='dark' 和 data-color-mode='light'，比如夜间模式：

2、在不同属性选择器下把所有颜色值定义成变量，变量名相同，但值不同：

[data-color-mode=dark] {
    --color-suyan-black: #010409;
    --color-suyan-bg: #0d1117;
    --color-text-primary: #c9d1d9;
}
[data-color-mode=light] {
    --color-suyan-black: #010409;
    --color-suyan-bg: #fff;
    --color-text-primary: #24292e;
}

3、使用 var 来使用颜色值

body {
    background-color: var(--color-suyan-bg);
}
.book-name, .author, .des {
    color: var(--color-text-primary);
}

但是这个有个坑，发现在 IE 下 CSS 并不支持 var，估计 GitHub 已经放弃了 IE 用户，我也没有 IE 浏览器，有 IE 的朋友可以帮忙看看 IE 下是否有夜间模式。

4、当用户点击切换按钮时，直接修改 html 属性的值即可：

const ele = document.getElementsByTagName('html')[0];
const orgMode = ele.getAttribute('data-color-mode');
const targetMode = orgMode === 'dark' ? 'light' : 'dark';
ele.setAttribute('data-color-mode', targetMode);

我实现了一个 demo，可以体验下：

<!DOCTYPE html>
<html lang="en" data-color-mode="light"">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub中的夜间模式实现预览探索</title>
    <style>
[data-color-mode=dark] {
    --color-suyan-black: #010409;
    --color-suyan-bg: #0d1117;
    --color-text-primary: #c9d1d9;
}
[data-color-mode=light] {
    --color-suyan-black: #010409;
    --color-suyan-bg: #fff;
    --color-text-primary: #24292e;
}
body {
    background-color: var(--color-suyan-bg);
}
.book-name, .author, .des {
    color: var(--color-text-primary);
}
</style>
</head>
<body>
    <h1 class="book-name">《读懂Vue编程思想》</h1>
    <p class="author">作者：素燕</p>
    <div class="des">帮助10W人入门并进阶前端</div>
    <button onclick="changeMode()">切换</button>
    <script>
        window.changeMode = function (){
            const ele = document.getElementsByTagName('html')[0];
            const orgMode = ele.getAttribute('data-color-mode');
            const targetMode = orgMode === 'dark' ? 'light' : 'dark';
            ele.setAttribute('data-color-mode', targetMode);
            console.log('change mode to ', targetMode);
        };
</script>
</body>
</html>

关于属性选择器，其实在 vue-loader 中的 scoped 实现思路也利用了，可以看 scoped 减少了我对 CSS 样式冲突的焦虑。还有一点需要大家对 CSS 的权重要重点掌握，这两篇文章聚齐了这3张宝图，搞懂CSS权重、第18天：CSS中的权重。大家加油。

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/

lefex

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
GitHub 夜间模式实现原理拆解

GitHub 目前已经支持夜间模式，周末分析了它的实现思路，先来看下它的两种模式效果：它的实现思路其实核心有 4点：1、在html 元素中不同模式中添加不同的属性选择器 data-c...
复制链接

扫一扫