feat: add light/dark mode toggle button

Appsilon · Aug 11, 2024 · ce89e36 · ce89e36
1 parent 5f54d0c
commit ce89e36
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/pkgdown/_pkgdown.yml b/pkgdown/_pkgdown.yml
@@ -1,5 +1,6 @@
 template:
   bootstrap: 5
+  light-switch: true
   bootswatch: pulse
   bslib:
     pkgdown-nav-height: 100px
@@ -31,7 +32,7 @@ navbar:
   type: light
   structure:
     left: [tutorials, explanation, how-to-guides, reference, news, faq]
-    right: [search, github, twitter, mastodon]
+    right: [search, github, twitter, mastodon, lightswitch]
   components:
     tutorials:
       text: Tutorials

diff --git a/pkgdown/extra.css b/pkgdown/extra.css
@@ -3,10 +3,10 @@
 }
 
 .navbar {
-  --bs-primary-rgb: 123, 124, 210;
+  background: var(--primary-color);
 }
 
-.navbar a.dropdown-item:hover {
+.navbar a.dropdown-item:hover { 
   background-color: var(--primary-color);
 }
 
@@ -17,7 +17,18 @@
 
 .navbar .navbar-nav .nav-item > .nav-link {
   color: rgba(255, 255, 255, 0.8);
+
+  &:hover {
+    background-color: var(--primary-color);
+    color: #fff;
+  }
+}
 
+.navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item {
+  &.active {
+    background-color: var(--primary-color);
+    color: #fff;
+  }
   &:hover {
     background-color: var(--primary-color);
     color: #fff;