diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index f91606d7cf..ab0bca72bc 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -8,7 +8,8 @@ --#{$prefix}breadcrumb-color: #{$breadcrumb-color}; // Boosted mod --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg}; --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius}; - --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color}; + // Boosted mod: no --#{$prefix}breadcrumb-divider-color + --#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter}; // Boosted mod --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x}; --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color}; // scss-docs-end breadcrumb-css-vars @@ -33,13 +34,14 @@ &::before { float: left; // Suppress inline spacings and underlining of the separator padding-right: var(--#{$prefix}breadcrumb-item-padding-x) #{"/* rtl:ignore */"}; // Boosted mod - color: var(--#{$prefix}breadcrumb-divider-color); + // Boosted mod: no color content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"}; // Boosted mod /* rtl:raw: transform: scaleX(-1); */ + filter: var(--#{$prefix}breadcrumb-divider-filter); // End mod } } diff --git a/scss/_root.scss b/scss/_root.scss index f7506fd87b..ec0d18cfcd 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -146,6 +146,7 @@ --#{$prefix}placeholder-color: #{$gray-700}; --#{$prefix}gray-tweak: #{$gray-900}; --#{$prefix}input-filter: #{$invert-filter}; + --#{$prefix}icon-filter: none; // ******* End additions for dark-mode } @@ -224,6 +225,7 @@ --#{$prefix}placeholder-color: #{$gray-600}; --#{$prefix}gray-tweak: #{$gray-700}; --#{$prefix}input-filter: #{none}; + --#{$prefix}icon-filter: #{$invert-filter}; // ******* End additions for dark-mode // scss-docs-end root-dark-mode-vars } diff --git a/scss/_variables.scss b/scss/_variables.scss index de5e0f2b72..896a612f7f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2043,7 +2043,10 @@ $breadcrumb-item-padding-x: $spacer * .5 !default; $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-color: var(--#{$prefix}emphasis-color) !default; // Boosted mod $breadcrumb-bg: null !default; +// fusv-disable $breadcrumb-divider-color: null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` +// fusv-enable +$breadcrumb-divider-filter: var(--#{$prefix}icon-filter) !default; // Boosted mod $breadcrumb-active-color: null !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` $breadcrumb-divider: url("data:image/svg+xml,") !default; $breadcrumb-divider-flipped: $breadcrumb-divider !default; diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 442cde9b33..6daf9ba55e 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -2111,3 +2111,85 @@ sitemap_exclude: true + +### Breadcrumb + +

No theme

+ +
+ +
+ +

Dark theme on container

+ +
+ +
+ +

Light theme on container

+ +
+ +
+ +

Dark theme on component

+ +
+ +
+ +

Light theme on component

+ +
+ +