diff options
| author | Varun A P <varunlakshmananap@gmail.com> | 2021-07-14 21:11:08 +0300 |
|---|---|---|
| committer | Varun A P <varunlakshmananap@gmail.com> | 2021-07-14 21:11:08 +0300 |
| commit | cd13a711fa44c7ff7c8a29f3ee4895c3a26da915 (patch) | |
| tree | 220eb170a2cc676068387ebf054d6b19a752f63b | |
| parent | 6364699b9c0b456f546537f2ba7a59d5a9b46f5d (diff) | |
Add darkmode toggle
| -rw-r--r-- | exampleSite/config.toml | 3 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 3 | ||||
| -rw-r--r-- | 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> |