Merge branch 'vojta001/darkmode-toggle-button' into 'master'

Add a button to toggle dark mode and polish darkmode in general.

Closes #14 and #3

See merge request patek-devs/patek.cz!38

themes/patek/assets/css/main.scss

@@ -1,6 +1,7 @@
 // Bulma customization
 
 $primary: #0b2a37;
+$link-light: #2EA1FF;
 
 // /Bulma customization
 
@@ -116,7 +117,7 @@ a {
     color: $primary-invert;
   }
   a {
-    color: #73A0E7;
+    color: $link-light;
     &:hover {
       color: white;
     }
@@ -125,7 +126,7 @@ a {
     a {
       color: white;
       &:hover {
-        color: #73A0E7;
+        color: $link-light;
       }
     }
   }
@@ -185,9 +186,9 @@ h2 a {
     background-color: $black-ter;
     color: white;
     a {
-      color: $link;
+      color: $link-light;
       &:hover {
-        color: lighten($link, 30) !important;
+        color: white !important;
       }
     }
   }
@@ -200,6 +201,16 @@ h2 a {
   button svg path {
     fill: white;
   }
+  .pagination-link {
+    color: white;
+    &.is-current {
+      color: black;
+      background-color: $link-light;
+    }
+  }
+  .has-text-grey {
+    color: $grey-light !important;
+  }
 
 }
 #content {

themes/patek/assets/js/dark-mode.js

@@ -1,13 +1,27 @@
-document.addEventListener("DOMContentLoaded", () => {
-	if (window.location.search.indexOf("darkmode=false") > -1) {
-		document.cookie = "darkmode=false; path=/";
-		if (document.getElementById("content") !== null) {
-			document.getElementById("content").classList.remove("dark-mode");
-		}
-	} else if (window.location.search.indexOf("darkmode=true") > -1 || document.cookie.indexOf("darkmode=true") > -1) {
-		document.cookie = "darkmode=true; path=/";
-		if (document.getElementById("content") !== null) {
-			document.getElementById("content").classList.add("dark-mode");
+function restoreDarkmode() {
+	const elem = document.getElementById("content");
+	if (elem && document.cookie.includes("dark-mode=true")) {
+		elem.classList.add("dark-mode");
+	}
+}
+
+function toggleDarkmode() {
+	const elem = document.getElementById("content");
+	if (elem) {
+		const state = elem.classList.toggle("dark-mode");
+		if (state) {
+			// 31536000 = 1 year; not setting max-age would make it session bound
+			document.cookie = "dark-mode=true; path=/; max-age=31536000; secure; samesite=strict";
+		} else {
+			// Delete the cookie by immediately expiring it
+			document.cookie = "dark-mode=; path=/; max-age=0; secure; samesite=strict";
 		}
 	}
+}
+
+document.addEventListener("DOMContentLoaded", restoreDarkmode);
+document.addEventListener("DOMContentLoaded", () => {
+	for (const toggler of document.getElementsByClassName("dark-mode-toggler")) {
+		toggler.addEventListener("click", toggleDarkmode);
+	}
 });

themes/patek/layouts/partials/menu.html

@@ -37,6 +37,9 @@
                 {{ end }}
             </div>
             <div class="navbar-end">
+                <a href="#" class="navbar-item dark-mode-toggler" role="button" aria-label="Toggle dark mode">
+                    <i class="fas fa-moon" aria-hidden="true" title="Toggle dark mode"></i>
+                </a>
                 <div class="navbar-item has-dropdown is-hoverable">
                     <span class="navbar-link">{{ .Site.Language.LanguageName }}</span>
                     <div class="navbar-dropdown">

themes/patek/layouts/partials/talksPageHeader.html

@@ -1,6 +1,6 @@
 <div class="pageHeader">
     <h2 class="title pageTitle"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
-    <p class="has-text-grey-light">{{- T "published" -}}:&nbsp;<time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05.000-0700" }}">{{ .PublishDate.Format "02.01.2006 15:04" }}</time></p>
+    <p class="has-text-grey">{{- T "published" -}}:&nbsp;<time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05.000-0700" }}">{{ .PublishDate.Format "02.01.2006 15:04" }}</time></p>
     <p class="">{{- T "talks-when" -}}:&nbsp;<time datetime="{{ dateFormat "2006-01-02T15:04:05.000-0700" .Params.when }}">{{ dateFormat "02.01.2006 15:04" .Params.when }}</time></p>
     <p class="">
         {{- T "presenter" -}}: {{ range .Params.authors }}{{ with $.Site.GetPage (printf "authors/%s" .) }}<a class="separateWithCommas" href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}{{ end }}