项目简介
这个网站是一个文档网站，用于展示和分享各种主题和技术的知识。用户可以根据自己的喜好选择黑暗模式或者明亮模式来浏览内容。为了实现这个功能，我们需要在页面加载时设置相应的CSS类，以便对不同模式下的内容进行样式化处理。
逻辑简述
- 首先，我们需要定义一些常量，包括存储主题偏好的本地存储键、黑暗模式和明亮模式的CSS类名等。
- 然后，从本地存储中获取当前用户的主题偏好设置，如果没有设置过，则默认为自动模式(‘auto’)。
- 最后，根据用户的偏好设置和当前系统的色深设置，动态地为文档节点添加相应的CSS类。
const THEME_PREFERENCE_LOCAL_STORAGE_KEY = 'themePreference';
const DARK_MODE_CLASS_NAME = 'docs-dark-mode';
const LIGHT_MODE_CLASS_NAME = 'docs-light-mode';
const PREFERS_COLOR_SCHEME_DARK = '(prefers-color-scheme: dark)';
const theme = localStorage.getItem(THEME_PREFERENCE_LOCAL_STORAGE_KEY) ?? 'auto';
const prefersDark = window.matchMedia(PREFERS_COLOR_SCHEME_DARK);
通过以上代码，我们可以确保在页面加载时就为用户设置了合适的CSS类，避免了未经过样式化处理的内容出现在页面上。
