From 1aedf22923ea839fba799bb8bc10fed7d4b444e8 Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Wed, 14 Aug 2024 14:47:10 +0200 Subject: [PATCH 1/2] Fix toggle button color in high-contrast mode --- assets/scss/components/_navbar.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss index 38376eb5e..a88f6e118 100644 --- a/assets/scss/components/_navbar.scss +++ b/assets/scss/components/_navbar.scss @@ -49,9 +49,15 @@ --bs-navbar-active-color: white !important; --bs-navbar-toggler-color: white; - .navbar-title { + .navbar-title, .mode-switch { + --#{$prefix}border-color: white; + color: white !important; } + + .mode-switch .fa-moon { + color: $white; + } } .navbar-expanded { @@ -279,7 +285,7 @@ } .mode-switch .label .ball { - background-color: var(--#{$prefix}secondary-bg); + background-color: var(--#{$prefix}border-color); border-radius: 50%; position: absolute; top: 2px; From e20aba490714ed63ac35eeebb58e0a0a13950ad5 Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Wed, 14 Aug 2024 16:33:04 +0200 Subject: [PATCH 2/2] Improve initial state of theme toggle button --- assets/js/critical/color.js | 19 ----- assets/scss/components/_navbar.scss | 121 +++++++++++++++------------- exampleSite/hugo_stats.json | 2 + hugo_stats.json | 1 - 4 files changed, 66 insertions(+), 77 deletions(-) diff --git a/assets/js/critical/color.js b/assets/js/critical/color.js index 6121e209d..3649dc734 100644 --- a/assets/js/critical/color.js +++ b/assets/js/critical/color.js @@ -61,33 +61,14 @@ }) window.addEventListener('DOMContentLoaded', () => { - const light = (document.documentElement.getAttribute('data-bs-theme') === 'light') - - document.querySelectorAll('.ball').forEach(ball => { - ball.classList.add('notransition'); - }) - document.querySelectorAll('.navbar-mode-selector').forEach(chk => { - chk.checked = light chk.addEventListener('change', function () { document.documentElement.setAttribute('data-bs-theme-animate', 'true') toggleTheme() }) }) - - document.querySelectorAll('.ball').forEach(ball => { - ball.offsetHeight; // flush css changes - ball.classList.remove('notransition'); - }) }) - window.addEventListener('load', () => { - const light = (document.documentElement.getAttribute('data-bs-theme') === 'light') - document.querySelectorAll('.navbar-mode-selector').forEach(chk => { - chk.checked = light - }) - }); - // initialize theme directly when script is invoked setTheme(getTheme()) })() diff --git a/assets/scss/components/_navbar.scss b/assets/scss/components/_navbar.scss index a88f6e118..0a97da520 100644 --- a/assets/scss/components/_navbar.scss +++ b/assets/scss/components/_navbar.scss @@ -1,5 +1,69 @@ // stylelint-disable annotation-no-unknown +// adapted from https://www.codeply.com/p/UsTEwDkzNp# +.checkbox { + opacity: 0; + position: absolute; +} + +.mode-switch { + --#{$prefix}mode-switch-width: 50px; +} + +.mode-switch .label { + border-color: var(--#{$prefix}border-color); + border-style: solid; + border-width: 1px; + border-radius: var(--#{$prefix}mode-switch-width); + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + padding: 5px; + position: relative; + height: calc(1px + var(--#{$prefix}mode-switch-width) / 2); + width: var(--#{$prefix}mode-switch-width); + transform: scale(0.9); +} + +.notransition { + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; + transition: none !important; +} + +.mode-switch .label .ball { + background-color: var(--#{$prefix}border-color); + border-radius: 50%; + position: absolute; + top: 2px; + left: 2px; + height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px); + width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px); + transition: transform 0.2s linear; +} + +.mode-switch .checkbox:checked + .label .ball { + transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px)); +} + +@if $enable-dark-mode { + [data-bs-theme="light"] .mode-switch .ball { + transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px)); + } +} + +.mode-switch .fa-moon { + color: $yellow; + transform: scale(0.8); +} + +.mode-switch .fa-sun { + color: var(--#{$prefix}bs-body-color); + transform: scale(0.8); +} + // Source: https://jsfiddle.net/njhgr40m/ @if $enable-dark-mode { @@ -251,60 +315,3 @@ } } -// adapted from https://www.codeply.com/p/UsTEwDkzNp# -.checkbox { - opacity: 0; - position: absolute; -} - -.mode-switch { - --#{$prefix}mode-switch-width: 50px; -} - -.mode-switch .label { - border-color: var(--#{$prefix}border-color); - border-style: solid; - border-width: 1px; - border-radius: var(--#{$prefix}mode-switch-width); - cursor: pointer; - display: flex; - align-items: center; - justify-content: space-between; - padding: 5px; - position: relative; - height: calc(1px + var(--#{$prefix}mode-switch-width) / 2); - width: var(--#{$prefix}mode-switch-width); - transform: scale(0.9); -} - -.notransition { - -webkit-transition: none !important; - -moz-transition: none !important; - -o-transition: none !important; - transition: none !important; -} - -.mode-switch .label .ball { - background-color: var(--#{$prefix}border-color); - border-radius: 50%; - position: absolute; - top: 2px; - left: 2px; - height: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px); - width: calc((var(--#{$prefix}mode-switch-width) / 2) - 5px); - transition: transform 0.2s linear; -} - -.mode-switch .checkbox:checked + .label .ball { - transform: translateX(calc((var(--#{$prefix}mode-switch-width) / 2) - 1px)); -} - -.mode-switch .fa-moon { - color: $yellow; - transform: scale(0.8); -} - -.mode-switch .fa-sun { - color: var(--#{$prefix}bs-body-color); - transform: scale(0.8); -} diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index bdaeb3bf9..0405f9c3e 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -547,6 +547,8 @@ "navbar-0-collapse", "navbar-mode", "navbar-mode-checkbox", + "navbar-sample", + "navbar-sample-checkbox", "navbar-sample-collapse", "navigation", "notification", diff --git a/hugo_stats.json b/hugo_stats.json index 38d2251f9..ec2d2414a 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -64,7 +64,6 @@ "display-1", "display-4", "emphasis", - "emphasis-dark", "end-0", "fa", "fa-10x",