Dark mode: Back to top (#2329)

Orange-OpenSource · Nov 27, 2023 · 0c29a77 · 0c29a77
1 parent 51aaa94
commit 0c29a77
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
@@ -2262,7 +2262,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>