diff --git a/site/assets/js/application.js b/site/assets/js/application.js
index 6ee5a6579..836c0973d 100644
--- a/site/assets/js/application.js
+++ b/site/assets/js/application.js
@@ -134,55 +134,58 @@
// Toggle color modes
- var currentTheme = localStorage.getItem('theme')
- var currentThemeIcon = document.querySelector('#bd-theme > .bi use')
+ var root = document.documentElement
+ var activeTheme = localStorage.getItem('theme')
+ var activeThemeIcon = document.querySelector('.theme-icon-active use')
- function checkMatchMedia() {
- if (window.matchMedia('(prefers-color-scheme: dark)').matches && !currentTheme) {
+ var checkSystemTheme = function () {
+ // if OS dark mode is set, and there's no stored theme, set the theme to dark (but don't store it)
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches && !activeTheme) {
document.documentElement.setAttribute('data-theme', 'dark')
} else {
+ // otherwise, set the theme to the default (light)
document.documentElement.removeAttribute('data-theme')
}
}
- document.querySelectorAll('.bd-theme-toggles .dropdown-item')
+ var setTheme = function (theme) {
+ document.querySelectorAll('[data-theme-value]').forEach(function (el) {
+ el.classList.remove('active')
+ })
+
+ var btnToActive = document.querySelector('[data-theme-value="' + theme + '"]')
+ var svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+ btnToActive.classList.add('active')
+ activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+ }
+
+ document.querySelectorAll('[data-theme-value]')
.forEach(function (toggle) {
toggle.addEventListener('click', function () {
var theme = this.getAttribute('data-theme-value')
- document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
- toggle.parentElement.setAttribute('class', 'current')
-
- var svg = toggle.querySelector('.theme-icon use').getAttribute('href')
- currentThemeIcon.setAttribute('href', svg)
-
- console.log(theme)
-
- // in OS darkmode, going from light to auto doesn't make it dark
+ setTheme(theme)
if (theme === 'auto') {
- document.documentElement.removeAttribute('data-theme')
+ root.removeAttribute('data-theme')
localStorage.removeItem('theme')
- checkMatchMedia()
+ checkSystemTheme()
} else {
- document.documentElement.setAttribute('data-theme', theme)
+ root.setAttribute('data-theme', theme)
localStorage.setItem('theme', theme)
}
})
})
- if (currentTheme) {
- var currentThemeButton = document.querySelector('.dropdown-item[data-theme-value="' + currentTheme + '"]')
- document.documentElement.setAttribute('data-theme', currentTheme)
- document.querySelector('.bd-theme-toggles .current').removeAttribute('class')
- currentThemeButton.parentElement.setAttribute('class', 'current')
- var svg = currentThemeButton.querySelector('.theme-icon use').getAttribute('href')
- currentThemeIcon.setAttribute('href', svg)
+ if (activeTheme) {
+ root.setAttribute('data-theme', activeTheme)
+ setTheme(activeTheme)
} else {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
- checkMatchMedia()
+ checkSystemTheme()
})
- checkMatchMedia()
+ checkSystemTheme()
}
// Insert copy to clipboard button before .highlight
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index 1a570d60d..1b94f28ff 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -74,27 +74,31 @@
--bs-dropdown-padding: .25rem;
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
- @include rfs(.875rem, --bs-dropdown-font-size);
+ @include font-size(.875rem);
@include border-radius(.5rem);
box-shadow: $dropdown-box-shadow;
- .current {
- font-weight: 600;
-
- .bi {
- display: block !important; // stylelint-disable-line declaration-no-important
- }
- }
-
.dropdown-item {
@include border-radius(.25rem);
+ + .dropdown-item {
+ margin-top: .125rem;
+ }
+
&:active {
.bi {
color: inherit !important; // stylelint-disable-line declaration-no-important
}
}
}
+
+ .active {
+ font-weight: 600;
+
+ .bi {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
+ }
}
}
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 757ea788c..e33ad6093 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -94,7 +94,7 @@
-
+
Toggle theme
-
-