网站介绍
这个网站是一个响应式主题，它可以根据用户的系统颜色模式进行调整。用户可以通过浏览器的设置来改变其颜色偏好，而网站会自动适应这些变化。
特点
- 响应式设计:该网站采用响应式设计，能够根据屏幕的大小自适应地调整布局和样式。
- 支持系统颜色模式:网站能够识别用户的系统颜色模式，并根据此进行相应的样式调整。
- 可定制的主题:用户可以选择不同的主题，以改变网站的整体颜色和风格。
CSS代码块
以下是一些用于构建该网站的关键CSS代码段：
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html, body {
background-color: var(--c-bg);
}
这些CSS规则定义了两种可能的颜色背景：--c-bg,一种默认的浅色，以及另一种在暗色模式下使用的颜色。它们被应用于整个页面的背景。
还有一些用于处理用户偏好设置和媒体查询的JavaScript代码：
const userMode = localStorage.getItem('vuepress-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
这段JavaScript代码检查了用户的本地存储设置或系统颜色模式是否为暗色。如果是，那么它会为页面添加一个名为.dark的类，从而应用暗色主题的样式。
