Merge pull request #17 from apvarun/dark-mode

Dark mode
apvarun · Jul 14, 2021 · 9220490 · 9220490
2 parents 96e72f9 + e66cd60
commit 9220490
Show file tree

Hide file tree

Showing 16 changed files with 1,377 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 exampleSite/resources
-exampleSite/public
+exampleSite/public
+node_modules
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,25 @@
 
 All the changes made to Showcase theme for Hugo.
 
+## v1.3.0 - 2021-07-14
+
+### Added
+
+- Support for dark mode toggle
+
+## v1.2.1 - 2021-07-12
+
+### Fixed
+
+- "multipage = false" is not working properly
+
+## v1.2.0 - 2021-06-19
+
+### Added
+
+- Add support for pagination by setting the following properties: paginate, multipage
+- Support for private sections
+
 ## 2020-09-25
 
 ### Added
@@ -12,12 +31,12 @@ All the changes made to Showcase theme for Hugo.
 
 - Fix issue with showing homepage filters in other custom pages
 
-## 2020-06-24
+## v1.1.0 - 2020-06-24
 
 ### Added
 
 - Add support for custom menu option
 
-## 2020-06-10
+## v1.0.0 - 2020-06-10
 
 - Initial Release
diff --git a/README.md b/README.md
@@ -15,6 +15,7 @@ Features:
 - Filtering content
 - Social links
 - Custom menu
+- Darkmode
 
 ## Get the theme
 
@@ -72,6 +73,10 @@ It is possible to exclude sections from the auto-generated list. In order to exc
 
 You can also add a custom menu item using the `config.toml` and disable auto-generated sections if not required. Refer config in [exampleSite](https://github.com/apvarun/showcase-hugo-theme/blob/master/exampleSite/config.toml)
 
+## Dark mode
+
+In order to enable darkmode toggle in your side, set the `params.darkMode` property to `true` in your `config.toml`.
+
 ## Google Analytics
 
 Set `googleAnalytics` in `config.toml` to activate Hugo's [internal Google Analytics template](https://gohugo.io/templates/internal/#google-analytics).

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git 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/_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
@@ -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
@@ -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
@@ -138,5 +138,28 @@
   });
 
   const showAllButton = document.querySelector(`.show-all`)
-  if(showAllButton) showAllButton.addEventListener("click", showAll);
+  if(showAllButton) {
+    showAllButton.addEventListener("click", showAll);
+  }
+
+  {{ if .Site.Params.darkMode }}
+  const darkmode = document.querySelector('.toggle-dark-mode');
+  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();
+  }
+  {{ end }}
 </script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -11,8 +11,15 @@
   />
   {{ end }}
   <title>{{ .Site.Title }}</title>
-  <!-- Tailwind CSS JIT CDN -->
-  <script src="https://unpkg.com/[email protected]/dist/tailwindcss-jit-cdn.umd.min.js"></script>
+
+  {{ $styles := resources.Get "css/main.css" | postCSS (dict "config" "./postcss.config.js") }}
+
+  {{ if .Site.IsServer }}
+    <link rel="stylesheet" href="{{ $styles.RelPermalink }}"/>
+  {{ else }}
+    {{ $styles := $styles | minify | fingerprint | resources.PostProcess }}
+    <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}"/>
+  {{ end }}
 
   <style>
     @font-face {

diff --git 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">
+<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,9 +28,21 @@
       {{ 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 }}
+      {{ if .Site.Params.darkMode }}
+      <div
+        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">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+          <path d="M12 9a3 3 0 0 0 0 6v-6z" />
+          <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>
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
@@ -33,21 +33,21 @@
   <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">&laquo; Prev</a></li>
       {{ end }}
       {{ range $paginator.Pagers }}
       {{ if eq . $paginator }}
       <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 &raquo;</a></li>
       {{ end }}
     </ul>