Add dark mode support (#35857)

* Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
2025-08-30 08:39:56 +02:00 · 2022-11-28 22:30:26 -08:00
parent a1a9895aac
commit fc3f4b67d6
91 changed files with 1974 additions and 422 deletions
--- a/site/assets/js/color-modes/index.js
+++ b/site/assets/js/color-modes/index.js
@@ -0,0 +1,62 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const storedTheme = localStorage.getItem('theme')
+
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = theme => {
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+    })
+
+    btnToActive.classList.add('active')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('load', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()
--- a/site/assets/scss/_ads.scss
+++ b/site/assets/scss/_ads.scss
@@ -14,10 +14,10 @@
  @include font-size(.8125rem);
  line-height: 1.4;
  text-align: left;
-  background-color: $gray-100;
+  background-color: var(--bs-tertiary-bg);

  a {
-    color: $gray-800;
+    color: var(--bs-body-color);
    text-decoration: none;
  }

@@ -34,5 +34,5 @@
 .carbon-poweredby {
  display: block;
  margin-top: .75rem;
-  color: $gray-700 !important;
+  color: var(--bs-body-color) !important;
 }
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -15,13 +15,13 @@
 // Individual items
 .bd-brand-item {
  + .bd-brand-item {
-    border-top: 1px solid $white;
+    border-top: 1px solid var(--#{$prefix}border-color);
  }

  @include media-breakpoint-up(md) {
    + .bd-brand-item {
      border-top: 0;
-      border-left: 1px solid $white;
+      border-left: 1px solid var(--#{$prefix}border-color);
    }
  }
 }
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -33,13 +33,15 @@
 }

 .btn-bd-light {
+  --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+
  --bs-btn-color: var(--bs-gray-600);
-  --bs-btn-border-color: var(--bs-gray-400);
-  --bs-btn-hover-color: var(--bd-violet);
-  --bs-btn-hover-border-color: var(--bd-violet);
-  --bs-btn-active-color: var(--bd-violet);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--btn-custom-color);
+  --bs-btn-hover-border-color: var(--btn-custom-color);
+  --bs-btn-active-color: var(--btn-custom-color);
  --bs-btn-active-bg: var(--bs-white);
-  --bs-btn-active-border-color: var(--bd-violet);
-  --bs-btn-focus-border-color: var(--bd-violet);
+  --bs-btn-active-border-color: var(--btn-custom-color);
+  --bs-btn-focus-border-color: var(--btn-custom-color);
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -6,6 +6,7 @@
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
+  color: var(--bd-callout-color, inherit);
  background-color: var(--bd-callout-bg, var(--bs-gray-100));
  border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));

@@ -29,7 +30,8 @@
 // Variations
@each $variant in $bd-callout-variants {
  .bd-callout-#{$variant} {
-    --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
-    --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
+    --bd-callout-color: var(--bs-#{$variant}-text);
+    --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
+    --bd-callout-border: var(--bs-#{$variant}-border-subtle);
  }
 }
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -22,13 +22,13 @@
  display: block;
  padding: .5em;
  line-height: 1;
-  color: $gray-900;
-  background-color: $gray-100;
+  color: var(--bs-body-color);
+  background-color: var(--bs-tertiary-bg);
  border: 0;
  @include border-radius(.25rem);

  &:hover {
-    color: $primary;
+    color: var(--bs-link-color);
  }

  &:focus {
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -3,7 +3,7 @@
 //

 .bd-example-snippet {
-  border: solid $border-color;
+  border: solid var(--bs-border-color);
  border-width: 1px 0;

  @include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
  position: relative;
  padding: var(--bd-example-padding);
  margin: 0 ($bd-gutter-x * -.5);
-  border: solid $border-color;
+  border: solid var(--bs-border-color);
  border-width: 1px 0;
  @include clearfix();

@@ -32,7 +32,7 @@

  + .bd-code-snippet {
    @include border-top-radius(0);
-    border: solid $border-color;
+    border: solid var(--bs-border-color);
    border-width: 0 1px 1px;
  }

@@ -58,7 +58,8 @@
    display: block;
  }

-  > :last-child {
+  > :last-child,
+  > nav:last-child .breadcrumb {
    margin-bottom: 0;
  }

@@ -115,11 +116,12 @@
 //

 .bd-example-row [class^="col"],
-.bd-example-cssgrid .grid > * {
+.bd-example-cols [class^="col"] > *,
+.bd-example-cssgrid [class*="grid"] > * {
  padding-top: .75rem;
  padding-bottom: .75rem;
-  background-color: rgba(var(--bd-violet-rgb), .1);
-  border: 1px solid rgba(var(--bd-violet-rgb), .25);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }

 .bd-example-row .row + .row,
@@ -129,12 +131,12 @@

 .bd-example-row-flex-cols .row {
  min-height: 10rem;
-  background-color: rgba(255, 0, 0, .1);
+  background-color: rgba(var(--bd-violet-rgb), .15);
 }

 .bd-example-flex div {
-  background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }

 // Grid mixins
@@ -176,8 +178,8 @@
  .ratio {
    display: inline-block;
    width: 10rem;
-    color: $gray-600;
-    background-color: $gray-100;
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);

    > div {
@@ -259,7 +261,7 @@
    width: 5rem;
    height: 5rem;
    margin: .25rem;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
  }
 }

@@ -275,13 +277,13 @@

  .position-relative {
    height: 200px;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
  }

  .position-absolute {
    width: 2rem;
    height: 2rem;
-    background-color: $dark;
+    background-color: var(--bs-body-color);
    @include border-radius();
  }
 }
@@ -342,7 +344,7 @@
  position: relative;
  padding: .75rem ($bd-gutter-x * .5);
  margin-bottom: 1rem;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-tertiary-bg);

  @include media-breakpoint-up(md) {
    padding: .75rem 1.25rem;
@@ -361,7 +363,7 @@

  pre code {
    @include font-size(inherit);
-    color: $gray-900; // Effectively the base text color
+    color: var(--bs-body-color); // Effectively the base text color
    word-wrap: normal;
  }
 }
@@ -386,6 +388,12 @@
 }

 .highlight-toolbar {
-  border: solid $border-color;
+  background-color: var(--bs-tertiary-bg);
+  border: solid var(--bs-border-color);
  border-width: 1px 0;
+
+  .btn-clipboard {
+    margin-top: 0;
+    margin-right: 0;
+  }
 }
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -32,6 +32,9 @@
  // Override Bootstrap defaults
  > .table,
  > .table-responsive .table {
+    --bs-table-border-color: var(--bs-border-color);
+
+    max-width: 100%;
    margin-bottom: 1.5rem;
    @include font-size(.875rem);

@@ -60,6 +63,14 @@
      }
    }

+    th {
+      color: var(--bs-emphasis-color);
+    }
+
+    strong {
+      color: var(--bs-emphasis-color);
+    }
+
    // Prevent breaking of code
    // stylelint-disable-next-line selector-max-compound-selectors
    th,
@@ -80,6 +91,16 @@
  min-width: 280px;
 }

+.table-swatches {
+  th {
+    color: var(--bs-emphasis-color);
+  }
+
+  td code {
+    white-space: nowrap;
+  }
+}
+
 .bd-title {
  @include font-size(3rem);
 }
@@ -89,13 +110,10 @@
  font-weight: 300;
 }

-.bd-bg-violet {
-  background-color: $bd-violet;
-}
-
 .bi {
  width: 1em;
  height: 1em;
+  vertical-align: -.125em;
  fill: currentcolor;
 }

@@ -121,6 +139,43 @@

 .border-lg-start {
  @include media-breakpoint-up(lg) {
-    border-left: $border-width solid $border-color;
+    border-left: var(--bs-border-width) solid var(--bs-border-color);
  }
 }
+
+// stylelint-disable selector-no-qualifying-type
+.bd-summary-link {
+  color: var(--bs-link-color);
+
+  &:hover,
+  details[open] > & {
+    color: var(--bs-link-hover-color);
+  }
+}
+// stylelint-enable selector-no-qualifying-type
+
+// scss-docs-start custom-color-mode
+[data-bs-theme="blue"] {
+  --bs-body-color: var(--bs-white);
+  --bs-body-color-rgb: #{to-rgb($white)};
+  --bs-body-bg: var(--bs-blue);
+  --bs-body-bg-rgb: #{to-rgb($blue)};
+  --bs-tertiary-bg: #{$blue-600};
+
+  .dropdown-menu {
+    --bs-dropdown-bg: #{mix($blue-500, $blue-600)};
+    --bs-dropdown-link-active-bg: #{$blue-700};
+  }
+
+  .btn-secondary {
+    --bs-btn-bg: #{mix($gray-600, $blue-400, .5)};
+    --bs-btn-border-color: #{rgba($white, .25)};
+    --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)};
+    --bs-btn-hover-border-color: #{rgba($white, .25)};
+    --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)};
+    --bs-btn-active-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-border-color: #{rgba($white, .5)};
+    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2);
+  }
+}
+// scss-docs-end custom-color-mode
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -4,12 +4,12 @@

 .bd-footer {
  a {
-    color: $gray-700;
+    color: var(--bs-body-color);
    text-decoration: none;

    &:hover,
    &:focus {
-      color: $link-color;
+      color: var(--bs-link-hover-color);
      text-decoration: underline;
    }
  }
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -11,13 +11,12 @@

  h1 {
    @include font-size(4rem);
-    line-height: 1;
  }

  .lead {
    @include font-size(1rem);
    font-weight: 400;
-    color: $gray-700;
+    color: var(--bs-secondary-color);
  }

  .bd-code-snippet {
@@ -46,8 +45,7 @@
  }

  #carbonads { // stylelint-disable-line selector-max-id
-    margin-right: auto;
-    margin-left: auto;
+    margin-inline: auto;
  }

  @include media-breakpoint-up(md) {
@@ -86,7 +84,7 @@
  mix-blend-mode: darken;

  svg {
-    filter: drop-shadow(0 1px 1px #fff);
+    filter: drop-shadow(0 1px 1px var(--bs-body-bg));
  }
 }

@@ -104,3 +102,11 @@
    transform: scale(1.1);
  }
 }
+
+@if $enable-dark-mode {
+  [data-bs-theme="dark"] {
+    .masthead-followup-icon {
+      mix-blend-mode: lighten;
+    }
+  }
+}
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -1,8 +1,16 @@
 .bd-navbar {
  padding: .75rem 0;
  background-color: transparent;
-  background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
-  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
+  box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+
+  &::after {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    display: block;
+    content: "";
+    background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+  }

  .bd-navbar-toggle {
    @include media-breakpoint-down(lg) {
@@ -30,6 +38,7 @@
  }

  .navbar-brand {
+    color: $white;
    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list

    &:hover {
@@ -60,7 +69,7 @@
  }

  .offcanvas-lg {
-    background-color: var(--bd-violet);
+    background-color: var(--bd-violet-bg);
    border-left: 0;

    @include media-breakpoint-down(lg) {
@@ -75,17 +84,42 @@
  }

  .dropdown-menu {
-    --#{$prefix}dropdown-min-width: 12rem;
-    --#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
-    @include rfs(.875rem, --#{$prefix}dropdown-font-size);
+    --bs-dropdown-min-width: 12rem;
+    --bs-dropdown-padding-x: .25rem;
+    --bs-dropdown-padding-y: .25rem;
+    --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+    --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+    @include rfs(.875rem, --bs-dropdown-font-size);
+    @include font-size(.875rem);
+    @include border-radius(.5rem);
    box-shadow: $dropdown-box-shadow;
-  }

-  .dropdown-item.current {
-    font-weight: 600;
-    background-image: escape-svg($dropdown-active-icon);
-    background-repeat: no-repeat;
-    background-position: right $dropdown-item-padding-x top .6rem;
-    background-size: .75rem .75rem;
+    li + li {
+      margin-top: .125rem;
+    }
+
+    .dropdown-item {
+      @include border-radius(.25rem);
+
+      &:active {
+        .bi {
+          color: inherit !important; // stylelint-disable-line declaration-no-important
+        }
+      }
+    }
+
+    .active {
+      font-weight: 600;
+
+      .bi {
+        display: block !important; // stylelint-disable-line declaration-no-important
+      }
+    }
+  }
+}
+
+@include color-mode(dark) {
+  .bd-navbar {
+    box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
  }
 }
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -11,6 +11,17 @@
    margin-left: -.25rem;
    overflow-y: auto;
  }
+
+  @include media-breakpoint-down(lg) {
+    .offcanvas-lg {
+      border-right-color: var(--bs-border-color);
+      box-shadow: $box-shadow-lg;
+    }
+  }
+}
+
+.bd-links-heading {
+  color: var(--bs-emphasis-color);
 }

 .bd-links-nav {
@@ -35,16 +46,16 @@
 .bd-links-link {
  padding: .1875rem .5rem;
  margin-top: .125rem;
-  margin-left: 1rem;
-  color: rgba($black, .65);
+  margin-left: 1.125rem;
+  color: var(--bs-body-color);
  text-decoration: if($link-decoration == none, null, none);

  &:hover,
  &:focus,
  &.active {
-    color: rgba($black, .85);
+    color: var(--bs-emphasis-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: rgba(var(--bd-violet-rgb), .1);
+    background-color: var(--bd-sidebar-link-bg);
  }

  &.active {
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -1,4 +1,5 @@
-:root {
+:root,
+[data-bs-theme="light"] {
  --base00: #fff;
  --base01: #f5f5f5;
  --base02: #c8c8fa;
@@ -17,6 +18,25 @@
  --base0F: #333;
 }

+[data-bs-theme="dark"] {
+  --base00: #282c34;
+  --base01: #353b45;
+  --base02: #3e4451;
+  --base03: #868e96;
+  --base04: #565c64;
+  --base05: #abb2bf;
+  --base06: #b6bdca;
+  --base07: #d19a66;
+  --base08: #e06c75;
+  --base09: #d19a66;
+  --base0A: #e5c07b;
+  --base0B: #98c379;
+  --base0C: #56b6c2;
+  --base0D: #61afef;
+  --base0E: #c678dd;
+  --base0F: #be5046;
+}
+
 .hl { background-color: var(--base02); }
 .c { color: var(--base03); }
 .err { color: var(--base08); }
@@ -101,14 +121,14 @@
  .language-bash,
  .language-sh {
    .line::before {
-      color: #777;
+      color: var(--base03);
      content: "$ ";
      user-select: none;
    }
  }

  .language-powershell::before {
-    color: #009;
+    color: var(--base0C);
    content: "PM> ";
    user-select: none;
  }
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -52,15 +52,16 @@
  }

  @include media-breakpoint-down(md) {
-    border: 1px solid $border-color;
-    @include border-radius(.4rem);
+    color: var(--bs-body-color);
+    border: 1px solid var(--bs-border-color);
+    @include border-radius(var(--bs-border-radius));

    &:hover,
    &:focus,
    &:active,
    &[aria-expanded="true"] {
      color: var(--bd-violet);
-      background-color: $white;
+      background-color: var(--bs-body-bg);
      border-color: var(--bd-violet);
    }

@@ -75,9 +76,9 @@
  @include media-breakpoint-down(md) {
    nav {
      padding: 1.25rem;
-      background-color: var(--bs-gray-100);
-      border: 1px solid $border-color;
-      @include border-radius(.25rem);
+      background-color: var(--bs-tertiary-bg);
+      border: 1px solid var(--bs-border-color);
+      @include border-radius(var(--bs-border-radius));
    }
  }

--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -5,12 +5,12 @@ $bd-purple:        #4c0bce;
 $bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
 $bd-accent:       #ffe484;
-$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");

 $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;

-:root {
+:root,
+[data-bs-theme="light"] {
  --bd-purple: #{$bd-purple};
  --bd-violet: #{$bd-violet};
  --bd-accent: #{$bd-accent};
@@ -20,4 +20,13 @@ $bd-callout-variants: info, warning, danger !default;
  --bd-teal-rgb: #{to-rgb($teal-500)};
  --docsearch-primary-color: var(--bd-violet);
  --docsearch-logo-color: var(--bd-violet);
+
+  --bd-violet-bg: var(--bd-violet);
+  --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
+}
+
+[data-bs-theme="dark"] {
+  --bd-violet: #{mix($bd-violet, $white, 75%)};
+  --bd-violet-bg: #{$bd-violet};
+  --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
 }