Merge pull request #1101 from gethinode/develop

Fix rendering of theme toggle button
gethinode · Aug 14, 2024 · 70583bd · 70583bd
2 parents e77671f + 8e1a299
commit 70583bd
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 78 deletions.
diff --git 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
@@ -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 {
@@ -49,9 +113,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 {
@@ -245,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}secondary-bg);
-	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
@@ -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
@@ -64,7 +64,6 @@
       "display-1",
       "display-4",
       "emphasis",
-      "emphasis-dark",
       "end-0",
       "fa",
       "fa-10x",