Add color mode on back to top

Orange-OpenSource · Oct 27, 2023 · c898416 · c898416
1 parent 74dcca2
commit c898416
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 3 deletions.
diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss
@@ -16,9 +16,10 @@
   --#{$prefix}back-to-top-link-icon: #{$back-to-top-icon};
   --#{$prefix}back-to-top-link-width: #{$back-to-top-icon-width};
   --#{$prefix}back-to-top-link-height: #{$back-to-top-icon-height};
+  --#{$prefix}back-to-top-link-bg: #{$back-to-top-bg};
   --#{$prefix}back-to-top-title-offset-right: #{$back-to-top-title-offset-right};
   --#{$prefix}back-to-top-title-padding: #{$back-to-top-title-padding};
-  --#{$prefix}back-to-top-title-color: #{color-contrast($back-to-top-title-bg-color)};
+  --#{$prefix}back-to-top-title-color: #{$back-to-top-title-color};
   --#{$prefix}back-to-top-title-bg-color: #{$back-to-top-title-bg-color};
   --#{$prefix}back-to-top-title-active-decoration: #{$link-decoration};
   // scss-docs-end back-to-top-css-vars
@@ -43,6 +44,7 @@
   position: sticky;
   top: var(--#{$prefix}back-to-top-link-offset-top);
   pointer-events: all;
+  background-color: var(--#{$prefix}back-to-top-link-bg);
   @include button-icon(var(--#{$prefix}back-to-top-link-icon), $size: var(--#{$prefix}back-to-top-link-width) var(--#{$prefix}back-to-top-link-height), $pseudo: "after", $position: calc(50% - 1px));
 
   &::after {

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -2245,7 +2245,9 @@ $back-to-top-link-offset-top:    subtract(100vh, $back-to-top-offset * 4) !defau
 $back-to-top-link-offset-top-xl: subtract(100vh, $spacer * 5) !default;
 $back-to-top-title-offset-right: add(100%, var(--#{$prefix}border-width)) !default;
 $back-to-top-title-padding:      subtract($btn-padding-y, 1px) $btn-padding-x add($btn-padding-y, 1px) !default;
-$back-to-top-title-bg-color:     $white !default;
+$back-to-top-title-color:        var(--#{$prefix}body-color) !default;
+$back-to-top-title-bg-color:     var(--#{$prefix}body-bg) !default;
+$back-to-top-bg:                 var(--#{$prefix}highlight-color) !default;
 $back-to-top-icon:               var(--#{$prefix}chevron-icon) !default;
 $back-to-top-icon-width:         add(.5rem, 1px) !default;
 $back-to-top-icon-height:        subtract(1rem, 1px) !default;

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -444,6 +444,83 @@ sitemap_exclude: true
   </div>
 </div>
 
+### Back to top
+
+<h4 class="mt-3">No theme</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3">
+  <nav aria-label="Standard back to top example" class="back-to-top position-static ps-5 ms-5">
+    <a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example" class="back-to-top position-static">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="dark">
+  <nav aria-label="Standard back to top example2" class="back-to-top position-static ps-5 ms-5">
+    <a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example2" class="back-to-top position-static">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on container</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="light">
+  <nav aria-label="Standard back to top example3" class="back-to-top position-static ps-5 ms-5">
+    <a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example3" class="back-to-top position-static">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
+<h4 class="mt-3">Dark theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #282d55;">
+  <nav aria-label="Standard back to top example4" class="back-to-top position-static ps-5 ms-5" data-bs-theme="dark">
+    <a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example4" class="back-to-top position-static" data-bs-theme="dark">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
+<h4 class="mt-3">Light theme on component</h4>
+
+<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #b5e8f7">
+  <nav aria-label="Standard back to top example5" class="back-to-top position-static ps-5 ms-5" data-bs-theme="light">
+    <a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+  <nav aria-label="Icon only back to top example5" class="back-to-top position-static" data-bs-theme="light">
+    <a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
+      <span class="visually-hidden">Back to top</span>
+    </a>
+  </nav>
+</div>
+
 ### Breadcrumb
 
 <h4 class="mt-3">No theme</h4>
@@ -3273,7 +3350,7 @@ sitemap_exclude: true
   </div>
 </div>
 
-### Form validation
+### Validation
 
 <h4 class="mt-3">No theme</h4>