在 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 中为暗光模式创建新的配色方案的主要内容,如果未能解决你的问题,请参考以下文章
一旦出现,如何在 Bootstrap 模式中为特定字段设置焦点