为BootstrapSass创建新的深色-浅色模式颜色方案。

1. 在Sass文件中创建两个颜色变量：$light-color和$dark-color。

$light-color: #fff; $dark-color: #222;

2. 使用Bootstrap的mixin来定义颜色方案，这些mixin包括：$theme-colors、$alert-colors和$state-colors。将这些mixin复制到自己的Sass文件中，并根据需要修改它们。例如，将$theme-colors mixin修改为以下内容：

$theme-colors: ( primary: $light-color, secondary: #6c757d, success: #28a745, danger: #dc3545, warning: #ffc107, info: #17a2b8, light: #f8f9fa, dark: $dark-color );

3. 创建深色模式的变量，例如$dark-mode，它将覆盖$dark-color变量。使用@mixin注入$dark-mode样式。

$dark-mode: true;

@mixin dark-mode { $light-color: #222; $dark-color: #fff;

// Additional dark mode styles here }

4. 在需要使用颜色方案的地方，使用Bootstrap的mixin，例如text-color()和bg-color()。这些mixin会根据$theme-colors mixin自动生成所需的CSS代码。例如，将文本颜色设置为主题色的方法如下：

.color-prim { color: text-color(primary); }

5. 对于需要响应深色模式的元素，使用@media查询来应用样式。例如，将背景颜色设置为主题颜色的方法如下：

.custom-bg { background-color: bg-color(primary);

@media (prefers-color-scheme: dark) { @include dark-mode { background-color: bg-color(primary); } } }

此方法可创建一个在浅色和深色主题模式下工作的颜色方案，让您的站点更