在 bootstrap sass 中为暗光模式创建新配色方案

Question

我想为使用 bootstrap 的网站创建深色模式。我必须添加新的根 class，其中包括所有 boostrap 颜色。这是我的 colors.scss:

$primary:#065FC6;
$secondary:#263C5C;
$success:#49C96D;
$danger:#FD7972;
$warning:#FF965D;
$light:#F8F8F8;
$body-color: #263C5C;

$custom-colors: (
  "brd-default": $body-color
  );

我想像这样创建新的 class：

:root.dark{
    // override colors and classes for dark mode
    $primary:#012345;
    $secondary:#111111;
    $success:#222222;
}

那么我如何复制并粘贴所有 bootstrap 颜色以用于新配色方案？

如果我可以添加颜色，我会更改 HTML class 所以我的根（配色方案）将是：

在我的 styles.scss:

@import "./colors";// custom colors
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

Answer 1

作为 explained here，无法将 class 附加到 :root。然而，你不需要这个来实现你想要的。

只需创建一个 dark class，然后您可以根据需要将其添加到 html 或正文标签中。

将所有需要的主题颜色更改放在.dark{}中，然后@import“bootstrap”。当正文中不存在 .dark 时，主题颜色将 return 到 Bootstrap 默认值。

@import "functions";
@import "variables";
@import "mixins";


.dark {

    /* redefine theme colors for dark theme */
    $primary: #012345;
    $secondary: #111111;
    $success: #222222;
    $dark: #000;
    
    $theme-colors: (
        "primary": $primary,
        "secondary": $secondary,
        "success": $success,
        "danger": $danger,
        "info": $indigo,
        "dark": $dark,
        "light": $light,
    );

    /* redefine theme color variables */
    @each $color, $value in $theme-colors {
        --#{$variable-prefix}#{$color}: #{$value};
    }

    /* redefine theme color rgb vars (used for bg- colors) */
    $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
    @each $color, $value in $theme-colors-rgb {
        --#{$variable-prefix}#{$color}-rgb: #{$value};
    }

    $body-color: #eeeeee;
    $body-bg: #263C5C;
    
    --#{$variable-prefix}body-color: #{$body-color};
    --#{$variable-prefix}body-bg: #{$body-bg};
      
    @import "bootstrap";
}

Bootstrap 5 Dark Theme

在 bootstrap sass 中为暗光模式创建新配色方案

Create new color scheme for dark-light mode in bootstrap sass

sass

twitter-bootstrap

scss-mixins

bootstrap-5