From cd13a711fa44c7ff7c8a29f3ee4895c3a26da915 Mon Sep 17 00:00:00 2001
From: Varun A P <varunlakshmananap@gmail.com>
Date: Wed, 14 Jul 2021 20:11:08 +0200
Subject: Add darkmode toggle

---
 exampleSite/config.toml      | 3 +++
 layouts/partials/footer.html | 3 ++-
 layouts/partials/header.html | 4 +++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 3228fd1..9ed6a89 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -19,6 +19,9 @@ pluralizelisttitles = false
   paginate = 3
   multipage = true
 
+  # Dark mode
+  darkMode = true
+
 [[menu.main]]
   name = "External"
   url = "https://example.com"
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index cb6e472..d7820be 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -142,7 +142,7 @@
     showAllButton.addEventListener("click", showAll);
   }
 
-
+  {{ if .Site.Params.darkMode }}
   const darkmode = document.querySelector('.toggle-dark-mode');
   function toggleDarkMode() {
     if (document.documentElement.classList.contains('dark')) {
@@ -161,4 +161,5 @@
   if(isDark && isDark === 'dark') {
     toggleDarkMode();
   }
+  {{ end }}
 </script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 6841b0a..3a425cb 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -31,8 +31,9 @@
       class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
       >{{ .Name }}</a>
       {{ end }}
+      {{ if .Site.Params.darkMode }}
       <div
-        class="toggle-dark-mode p-2 rounded-full transition-colors duration-300 cursor-pointer hover:bg-gray-200 dark:hover:text-gray-900"
+        class="toggle-dark-mode select-none p-2 rounded-full transition-colors duration-300 cursor-pointer hover:bg-gray-200 dark:hover:text-gray-900"
       >
         <svg xmlns="http://www.w3.org/2000/svg"
         width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -41,6 +42,7 @@
           <path d="M6 6h3.5l2.5 -2.5l2.5 2.5h3.5v3.5l2.5 2.5l-2.5 2.5v3.5h-3.5l-2.5 2.5l-2.5 -2.5h-3.5v-3.5l-2.5 -2.5l2.5 -2.5z" />
         </svg>
       </div>
+      {{ end }}
     </nav>
   </div>
 </header>
-- 
cgit v1.2.3