diff options
| author | Varun A P <varunlakshmananap@gmail.com> | 2021-07-13 17:11:26 +0300 |
|---|---|---|
| committer | Varun A P <varunlakshmananap@gmail.com> | 2021-07-13 17:11:26 +0300 |
| commit | 6364699b9c0b456f546537f2ba7a59d5a9b46f5d (patch) | |
| tree | 998a57d55a48b183c5679bd729d02e82bdd8fa79 | |
| parent | 4c9b30fcfcb61986fde68d0cfd1359f6b7d0f4c0 (diff) | |
Update darkmode styles
| -rw-r--r-- | layouts/_default/baseof.html | 4 | ||||
| -rw-r--r-- | layouts/_default/single.html | 2 | ||||
| -rw-r--r-- | layouts/partials/custom-message.html | 2 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 28 | ||||
| -rw-r--r-- | layouts/partials/header.html | 14 | ||||
| -rw-r--r-- | layouts/partials/pagination.html | 6 |
6 files changed, 33 insertions, 23 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5f8e2ec..b8d887e 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,7 +1,7 @@ <!DOCTYPE html> -<html> +<html class="dark:bg-gray-900"> {{- partial "head.html" . -}} - <body> + <body class="dark:bg-gray-900 min-h-screen"> {{- partial "header.html" . -}} <div id="content"> {{- block "main" . }}{{- end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 31e4967..a23f18d 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,6 +1,6 @@ {{ define "main" }} -<section class="text-gray-700 body-font"> +<section class="text-gray-700 body-font dark:text-white"> <div class="container px-5 py-8 mx-auto"> <h1 class="text-2xl font-bold my-4">{{ .Title }}</h1> <div> diff --git a/layouts/partials/custom-message.html b/layouts/partials/custom-message.html index 0a1e16f..e63c3bb 100644 --- a/layouts/partials/custom-message.html +++ b/layouts/partials/custom-message.html @@ -1,6 +1,6 @@ <div class="flex flex-wrap sm:flex-row flex-col py-6 mb-12"> {{ if .Site.Params.Message }} - <h1 class="text-gray-900 font-medium title-font text-2xl mb-2 sm:mb-0 text-center w-full"> + <h1 class="text-gray-900 dark:text-white font-medium title-font text-2xl mb-2 sm:mb-0 text-center w-full"> {{ .Site.Params.Message }} </h1> {{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index b922ac3..cb6e472 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -138,17 +138,27 @@ }); const showAllButton = document.querySelector(`.show-all`) - if(showAllButton) showAllButton.addEventListener("click", showAll); + if(showAllButton) { + showAllButton.addEventListener("click", showAll); + } const darkmode = document.querySelector('.toggle-dark-mode'); - if(darkmode){ - darkmode.addEventListener('click', ()=>{ - if(document.body.classList.contains('dark')){ - document.body.classList.remove('dark') - } else { - document.body.classList.add('dark') - } - }); + function toggleDarkMode() { + if (document.documentElement.classList.contains('dark')) { + document.documentElement.classList.remove('dark') + localStorage.setItem('darkmode', 'light') + } else { + document.documentElement.classList.add('dark') + localStorage.setItem('darkmode', 'dark') + } + } + if (darkmode) { + darkmode.addEventListener('click', toggleDarkMode); + } + + const isDark = localStorage.getItem('darkmode'); + if(isDark && isDark === 'dark') { + toggleDarkMode(); } </script> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 9078be9..6841b0a 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,25 +1,25 @@ -<header class="text-gray-700 body-font sticky top-0 bg-white z-10 dark:bg-gray-900"> +<header class="text-gray-700 body-font sticky top-0 z-10 dark:text-white"> <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center" > <a - class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" + class="flex title-font font-medium items-center text-gray-900 dark:text-white mb-4 md:mb-0" href="{{ .Site.BaseURL }}" > {{- partial "logo.html" . -}} </a> <nav - class="md:ml-auto flex flex-wrap items-center text-base justify-center {{ if .Site.Params.multipage }} multipage {{ end }}" + class="md:ml-auto flex flex-wrap items-center text-base justify-center dark:text-white {{ if .Site.Params.multipage }} multipage {{ end }}" > {{ if and (eq .Site.Params.hideAutoMenu false) (eq $.IsNode true ) }} <a - class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 show-all" + class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 show-all" href="{{ if .Site.Params.multipage }}/{{ else }}#{{ end }}" >All</a > {{ range where .Site.Sections ".Params.private" "!=" true }} <a - class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 filter-{{lower .Title}}" + class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 filter-{{lower .Title}}" href="{{ if .Site.Params.multipage }}{{ .Permalink }}{{ else }}#{{ end }}" >{{.Title}}</a > @@ -28,11 +28,11 @@ {{ range .Site.Menus.main }} <a href="{{ .URL }}" - class="mr-2 px-2 rounded cursor-pointer select-none hover:text-gray-900" + 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 }} <div - class="toggle-dark-mode p-2 rounded-full transition-colors duration-300 cursor-pointer hover:bg-gray-200" + class="toggle-dark-mode 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"> diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html index 5575f13..da50947 100644 --- a/layouts/partials/pagination.html +++ b/layouts/partials/pagination.html @@ -33,7 +33,7 @@ <nav aria-label="Page navigation"> <ul class="flex gap-2 justify-center mt-2"> {{ if $paginator.HasPrev }} - <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" + <li class="cursor-pointer rounded dark:text-gray-400 hover:bg-blue-400 hover:text-white dark:hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Prev.URL }}" rel="prev" class="page-link">« Prev</a></li> {{ end }} {{ range $paginator.Pagers }} @@ -41,13 +41,13 @@ <li class="cursor-pointer rounded bg-blue-500 text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li> {{ else }} - <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" href="{{ .URL }}" + <li class="cursor-pointer rounded dark:text-gray-400 hover:bg-blue-400 hover:text-white dark:hover:text-white"><a class="px-3 py-1" href="{{ .URL }}" class="page-link">{{ .PageNumber }}</a></li> {{ end }} {{ end }} {{ if $paginator.HasNext }} - <li class="cursor-pointer rounded hover:bg-blue-400 hover:text-white"><a class="px-3 py-1" + <li class="cursor-pointer rounded dark:text-gray-400 hover:bg-blue-400 hover:text-white dark:hover:text-white"><a class="px-3 py-1" href="{{ $paginator.Next.URL }}" rel="next" class="page-link">Next »</a></li> {{ end }} </ul> |