From 7946fdea0110c04abd8114f468545651130a796f Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 17 Oct 2023 12:32:44 +0200
Subject: [PATCH] Add color mode on Breadcrumb

---
 scss/_breadcrumb.scss              |  1 +
 scss/_root.scss                    |  2 +
 site/content/docs/5.3/dark-mode.md | 62 ++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+)

diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index f91606d7cf..f8a1a210fc 100644
--- 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
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/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 442cde9b33..fdd5d1a29b 100644
--- 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>