Add color mode on back to top

Orange-OpenSource · Oct 25, 2023 · 0ae0f6f · 0ae0f6f
1 parent b5f692e
commit 0ae0f6f
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 3 deletions.
diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss
@@ -14,12 +14,13 @@
   --#{$prefix}back-to-top-zindex: #{$zindex-back-to-top};
   --#{$prefix}back-to-top-link-offset-top: #{$back-to-top-link-offset-top};
   --#{$prefix}back-to-top-link-icon: #{$back-to-top-icon};
-  --#{$prefix}back-to-top-link-icon-margin-left: #{$spacer * .5};
+  --#{$prefix}back-to-top-link-icon-margin-left: #{$back-to-top-icon-margin-left};
   --#{$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
@@ -44,6 +45,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
@@ -2244,8 +2244,11 @@ $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-margin-left:   $spacer * .5 !default;
 $back-to-top-icon-width:         add(.5rem, 1px) !default;
 $back-to-top-icon-height:        subtract(1rem, 1px) !default;
 // scss-docs-end back-to-top

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -3038,3 +3038,80 @@ sitemap_exclude: true
     <input class="form-check-input" type="checkbox" role="switch" checked disabled>
   </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>