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

Posted

技术标签:

【中文标题】在 bootstrap sass 中为暗光模式创建新的配色方案【英文标题】:Create new color scheme for dark-light mode in bootstrap sass 【发布时间】:2021-10-10 12:18:57 【问题描述】:

我想为使用引导程序的网站创建暗模式。我必须添加包含所有 boostrap 颜色的新根类。这是我的colors.scss:

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

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

我想创建这样的新类:

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

那么我如何复制和粘贴新配色方案的所有引导颜色?

如果我可以添加颜色,我将更改 html 类,因此我的根(配色方案)将是:

在我的 style.scss 中:

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

【问题讨论】:

@Zim 我改变了问题。请你看看好吗? 【参考方案1】:

作为explained here,无法将类附加到:root。但是,您不需要它来实现您想要的。

只需创建一个dark 类,然后您就可以根据需要将其添加到 html 或 body 标记中。

内部 .dark进行所有需要的主题颜色更改,然后@import "bootstrap"。当 .dark 在 body 上不存在时,主题颜色将返回 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-prefixbody-color: #$body-color;
    --#$variable-prefixbody-bg: #$body-bg;
      
    @import "bootstrap";


Bootstrap 5 Dark Theme

【讨论】:

谢谢,但我无法覆盖“.bg-light”类。 我无法覆盖它。我做不到。 我更新了答案.. 你也需要用新的主题颜色重置$theme-colors-rgb github.com/vinorodrigues/bootstrap-dark-5 概念验证项目展示了如何使用 Bootstrap 使用 6 种不同的变体实现暗模式。 bootstrap-nightshade 变体展示了如何使用 .dark 类集实现暗模式。 只有当我将@import "bootstrap"; 放在最后,.dark 之外,这对我才有效【参考方案2】:

https://***.com/a/70733538/11716408

/* Enable darkmode in a Bootstrap Page */
@media (prefers-color-scheme: dark) 
    body 
        background-color: var(--bs-dark);
        color: var(--bs-light);
    

【讨论】:

以上是关于在 bootstrap sass 中为暗光模式创建新的配色方案的主要内容,如果未能解决你的问题,请参考以下文章

iOS暗光模式不更新UIViewController

在 Sass 中为数字添加单位

一旦出现,如何在 Bootstrap 模式中为特定字段设置焦点

如何在css或sass中为类名起别名

如何在 Angular 中使用带有 SASS 的 Bootstrap 4

预编译时的 Rails 生产 bootstrap-sass 错误