1、使用伪元素实现
使用css3中的:root伪类选择器和var变量
在全局css文件中定义主题变量
/* 白天颜色 */
:root {
--comment-color: #f1f2f3;
--grey-0: #fff;
--grey-1: #fdfdfd;
--grey-2: #f7f7f7;
--grey-3: #eff2f3;
--grey-4: #ccc;
--grey-5: #999;
--grey-6: #666;
--grey-7: #333;
--grey-8: #222;
--grey-9: #000;
--grey-1-a0: rgba(253, 253, 253, 0);
--grey-1-a7: rgba(253, 253, 253, 0.7);
--grey-1-a5: rgba(253, 253, 253, 0.5);
--grey-1-a3: rgba(253, 253, 253, 0.3);
--grey-9-a1: rgba(0, 0, 0, 0.1);
--grey-9-a5: rgba(0, 0, 0, 0.5);
--grey-2-a0: rgba(247, 247, 247, 0);
--color-pink-light: #ffe6fa;
--color-cyan-light: #e3fdf5;
--color-red: #e9546b;
--color-pink: #ed6ea0;
--color-orange: #ec8c69;
--color-yellow: #eab700;
--color-green: #0a7426;
--color-aqua: #3e999f;
--color-blue: #49b1f5;
--color-purple: #9d5b8b;
--color-grey: #869194;
--color-red-a1: rgba(233, 84, 107, 0.1);
--color-red-a3: rgba(233, 84, 107, 0.3);
--color-pink-a3: rgba(237, 110, 160, 0.3);
--color-pink-light-a3: rgba(255, 230, 250, 0.3);
--color-pink-light-a5: rgba(255, 230, 250, 0.5);
--color-pink-light-a7: rgba(255, 230, 250, 0.7);
--body-bg-shadow: var(--grey-2);
--box-bg-shadow: var(--grey-9-a1);
--text-color: var(--grey-7);
--header-text-color: var(--grey-0);
--primary-color: var(--color-red);
--nav-bg: linear-gradient(-225deg, var(--color-cyan-light) 0, var(--color-pink-light) 100%);
--footer-bg: linear-gradient(-45deg, #ec8c69, #e9546b, #38a1db, #23d5ab);
--note-border: #cda0c7;
--note-bg: #fdf8ff;
--note-text: #8a51c0;
--note-hover: #f14668;
--comment-btn: #ed9abb;
}
/* 黑夜颜色 */
[theme="dark"]:root {
--comment-color: var(--grey-1);
--grey-0: #222;
--grey-1: #21252b;
--grey-2: #363636;
--grey-3: #444;
--grey-4: #666;
--grey-5: #aaa;
--grey-6: #ccc;
--grey-7: #ddd;
--grey-8: #eee;
--grey-9: #f7f7f7;
--grey-1-a7: rgba(34, 34, 34, 0.7);
--grey-1-a5: rgba(34, 34, 34, 0.5);
--grey-1-a3: rgba(34, 34, 34, 0.3);
--grey-1-a0: rgba(34, 34, 34, 0);
--grey-9-a1: rgba(51, 51, 51, 0.1);
--grey-2-a0: rgba(54, 54, 54, 0);
--color-pink-light: #322d31;
--color-cyan-light: #2d3230;
--color-red: rgba(237, 118, 137, 0.9);
--color-pink: rgba(241, 139, 179, 0.8);
--color-orange: rgba(240, 163, 135, 0.8);
--color-yellow: #ffe175;
--color-green: #86c59d;
--color-aqua: #97d3d6;
--color-blue: #9cd0ed;
--color-purple: #cfacc5;
--color-grey: #c3c8ca;
--body-bg-shadow: #000;
--box-bg-shadow: #000;
--text-color: var(--grey-5);
--header-text-color: var(--grey-9);
--note-bg: rgba(48, 49, 50, 0.8);
--note-text: rgba(109, 164, 219, 0.8);
--note-hover: rgba(168, 49, 72, 0.8);
img {
filter: brightness(0.8);
}
}
在组件中使用主题颜色
如下
body {
background-color: var(--theme-color);
color: var(--theme-text-color);
}
通过js事件动态改变主题变量，使用css变量替换
let isDark = false;
/*根据 isDark 值， 使用给html标签绑定 theme 进行切换 白天黑夜模式*/
listener() {
// 获取html根元素标签
let html = document.documentElement;
if (!isDark) {
// html添加theme 属性值
html.setAttribute("theme","")
} else {
// html添加theme 属性值
html.setAttribute("theme","dark")
}
}
还可以将每次切换以后将当前主题名称保存至本地 避免下次打开页面主题丢失,初次加载的时候设置一个默认主题。
2、使用filter
html[theme='dark-mode'] {
filter: invert(1) hue-rotate(180deg);
}
CSS filter 属性将模糊或颜色转移等图形效果应用到元素上。滤镜通常用于调整图像、背景和边框的渲染。
对于这种黑暗模式，我们将使用两个滤镜，即 invert 和 hue-rotate
invert滤镜可以帮助反转应用程序的颜色方案，因此，黑色变成了白色，白色变成了黑色，所有颜色也是如此。因此，黑变白，白变黑，所有颜色也是如此。
hue-rotate滤镜可以帮助我们处理所有其他非黑白的颜色。将色调旋转180度，我们确保应用程序的颜色主题不会改变，而只是减弱它的颜色。
！！！这个方法唯一的问题是，它也会反转你应用程序中的所有图像。因此，我们将对所有图像添加相同的规则来反转效果。
比如给图片，视频或者一些特定的类名加上相同的规则，
html[theme='dark-mode'] img,video,.image{
filter: invert(1) hue-rotate(180deg);
}
给HTML元素添加一个过渡，确保过渡更丝滑
html {
transition: color 300ms, background-color 300ms;
}