如何让首选颜色方案灯光使用默认颜色值？

Question

如何才能使其自动应用所有默认引导颜色值，而不是单独定义

prefers-color-scheme: light

上的所有更改？

Answer 1

要在“prefers-color-scheme: light”条件下自动应用所有默认的 bootstrap 颜色值而不单独设置每个属性，您可以利用 bootstrap 提供的 CSS 自定义属性。

您可以为“prefers-color-scheme: light”指定一个块来覆盖必要的属性。不要更改单个属性，而是将自定义属性重置为其初始状态。

下面是您可以编写的代码。

@media (prefers-color-scheme: light) {
  :root {
    --bs-primary: #0d6efd;  /* Primary color */
    --bs-secondary: #6c757d; /* Secondary color */
    --bs-success: #198754;  /* Success color */
    --bs-info: #0dcaf0;    /* Info color */
    --bs-warning: #ffc107; /* Warning color */
    --bs-danger: #dc3545;  /* Danger color */
    --bs-light: #f8f9fa;   /* Light color */
    --bs-dark: #212529;    /* Dark color */
    --bs-body-bg: #fff;    /* Background color */
    --bs-body-color: #212529; /* Body text color */
  }
}

在上面的代码中，我将颜色重置为通常 Bootstrap 的默认值。您应该将它们替换为默认的 Bootstrap 值，该值可能会根据您所做的主题而有所不同。