From ce89e36d11e81cada6616fdbea86b959e1262bc2 Mon Sep 17 00:00:00 2001
From: Sankhadeep Dutta <dutta.shankhadeep@gmail.com>
Date: Sun, 11 Aug 2024 20:11:25 +0530
Subject: [PATCH] feat: add light/dark mode toggle button

---
 pkgdown/_pkgdown.yml |  3 ++-
 pkgdown/extra.css    | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/pkgdown/_pkgdown.yml b/pkgdown/_pkgdown.yml
index 1623bb05..7932398c 100644
--- 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
index c9de13d9..c8ba8489 100644
--- 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;