定义一个适用于类和媒体查询的暗色模式，避免重复CSS自定义属性声明，并允许用户在不同的颜色模式之间切换。

为了定义一个避免重复声明的暗色模式，我们可以使用CSS自定义属性。在根选择器中，定义我们要使用的颜色变量，如下所示：

:root {
  --bg-color: #e9e9e9; /*默认背景颜色*/
  --text-color: #333; /*默认文本颜色*/
  --bg-color-dark: #222; /*暗色模式下的背景颜色*/
  --text-color-dark: #fff; /*暗色模式下的文本颜色*/
}

我们可以在元素中使用这些变量，如下所示：

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.card {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
}

在使用媒体查询定义暗色模式时，可以选择要使用的颜色变量，如下所示：

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: var(--bg-color-dark);
    --text-color: var(--text-color-dark);
  }
}

这样，当媒体查询匹配到“暗色模式”时，文本、背景和边框的颜色都会自动更改到--bg-color-dark和--text-color-dark对应的颜色。

最后，我们可以使用JavaScript来切换颜色模式。首先，创建一个切换按钮，当被点击时执行toggleColorScheme()函数。然后，我们在JavaScript中定义这个函数，它用于根据当前的颜色模式和用户所在的操作系统来切换到正确的颜色方