diff --git a/scss/_sticker.scss b/scss/_sticker.scss
index 704c34bf1a..2b6362520d 100644
--- a/scss/_sticker.scss
+++ b/scss/_sticker.scss
@@ -2,6 +2,7 @@
   // scss-docs-start sticker-css-vars
   --#{$prefix}sticker-size: #{$sticker-size-md};
   --#{$prefix}sticker-font-weight: #{$font-weight-bold};
+  --#{$prefix}sticker-color: #{$black};
   --#{$prefix}sticker-background-color: #{$brand-orange};
   --#{$prefix}sticker-content-max-width: #{$sticker-content-max-width-md};
   // scss-docs-end sticker-css-vars
@@ -13,6 +14,7 @@
   width: var(--#{$prefix}sticker-size);
   height: var(--#{$prefix}sticker-size);
   font-weight: var(--#{$prefix}sticker-font-weight);
+  color: var(--#{$prefix}sticker-color);
   text-align: center;
   word-wrap: break-word;
   background-color: var(--#{$prefix}sticker-background-color);
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index 88c65a61f9..cb9b36d4e7 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -712,7 +712,7 @@ Additional variables for dark-mode (temporary)
 <h4 class="mt-3">Dark theme on component</h4>
 
 <div class="border border-tertiary p-3 d-flex" style="background-color: #282d55;">
-  <div class="sticker sticker-sm">
+  <div class="sticker sticker-sm" data-bs-theme="dark">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
       <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
@@ -720,7 +720,7 @@ Additional variables for dark-mode (temporary)
       <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
     </p>
   </div>
-  <div class="sticker sticker-sm">
+  <div class="sticker sticker-sm" data-bs-theme="dark">
     <svg width="35" height="35" aria-hidden="true" focusable="false">
       <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
     </svg>
@@ -733,7 +733,7 @@ Additional variables for dark-mode (temporary)
 <h4 class="mt-3">Light theme on component</h4>
 
 <div class="border border-tertiary p-3 d-flex" style="background-color: #b5e8f7">
-  <div class="sticker sticker-sm">
+  <div class="sticker sticker-sm" data-bs-theme="light">
     <p class="mb-0">
       <span class="sticker-fs-s mb-0 d-block text-decoration-line-through" aria-hidden="true">69.99 €</span>
       <span class="sticker-fs-xl mb-0 d-block" aria-hidden="true">39.99 €</span>
@@ -741,7 +741,7 @@ Additional variables for dark-mode (temporary)
       <span class="visually-hidden">39.99 € per month instead of 69.99 €</span>
     </p>
   </div>
-  <div class="sticker sticker-sm">
+  <div class="sticker sticker-sm" data-bs-theme="light">
     <svg width="35" height="35" aria-hidden="true" focusable="false">
       <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
     </svg>