夜间模式

比较常见的方法就是将颜色变量同时绑定到 :root 和某个公共元素容器上，通过切换容器的属性来切换变量对应的色值

// 正常展示的样式
:root {
  --theme-color: #416eff; // 按钮颜色以及单选多选等主体色
  --theme-text-color: #373a44; // 文字颜色
  --theme-bk: #f4f9fe; // 主题背景颜色
  --theme-icon: inherit; // 大部分icon颜色
  --theme-arrow-icon: #373a44; // sidebar三角箭头icon
  --theme-input-arrow-icon: #bfbfbf; // 下拉和select 三角箭头icon
  --theme-page-header-1: rgba(0, 0, 0, 0.45); // 头部导航文字1
  --theme-page-header-2: #373a44; // 头部导航文字2
  --theme-input-bk: #ffffff; // input的背景色
}
// 黑夜模式下展示的样式
html[darkreader-scheme="one"] {
  --theme-color: #416eff;
  --theme-text-color: #ffffff;
  --theme-bk: #1a1c31;
  --theme-icon: #ffffff; // icon颜色
  --theme-arrow-icon: rgba(255, 255, 255, 0.5); // 三角箭头icon
  --theme-input-arrow-icon: rgba(
    255,
    255,
    255,
    0.5
  ); // 下拉和select 三角箭头icon
  --theme-page-header-1: rgba(255, 255, 255, 0.5); // 头部导航文字1
  --theme-page-header-2: #ffffff; // 头部导航文字2
  --theme-input-bk: none; // input的背景色
}