Add color mode on Breadcrumb

Orange-OpenSource · Oct 17, 2023 · 7946fde · 7946fde
1 parent f2fb33a
commit 7946fde
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 0 deletions.
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
@@ -41,6 +41,7 @@
       transform: scaleX(-1);
       */
       // End mod
+      filter: var(--#{$prefix}icon-filter);
     }
   }
 

diff --git 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/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -2111,3 +2111,65 @@ sitemap_exclude: true
     <label for="excellent51" title="Excellent"><span class="visually-hidden">Excellent</span></label>
   </fieldset></form>
 </div>
+
+### Breadcrumb
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="border border-tertiary p-3">
+  <nav aria-label="breadcrumb1">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav aria-label="breadcrumb2">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav aria-label="breadcrumb3">
+    <ol class="breadcrumb mb-0">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #282d55;">
+  <nav aria-label="breadcrumb4">
+    <ol class="breadcrumb mb-0" data-bs-theme="dark">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav aria-label="breadcrumb5">
+    <ol class="breadcrumb mb-0" data-bs-theme="light">
+      <li class="breadcrumb-item"><a href="#">Home</a></li>
+      <li class="breadcrumb-item"><a href="#">Library</a></li>
+      <li class="breadcrumb-item active" aria-current="page">Data</li>
+    </ol>
+  </nav>
+</div>