patek/patek.cz
9
0
Fork 0
Code Issues 4 Pull Requests 2 Packages Projects Releases Wiki Activity

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

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

Closes #14 and #3

See merge request patek-devs/patek.cz!38
This commit is contained in:
Vojtěch Káně 2020-10-07 14:28:04 +00:00
commit edf81d21bb
4 changed files with 43 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
themes/patek/assets/css/main.scss
View File

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

34
themes/patek/assets/js/dark-mode.js
View File

@ -1,13 +1,27 @@
document.addEventListener("DOMContentLoaded", () => { function restoreDarkmode() {
if (window.location.search.indexOf("darkmode=false") > -1) { const elem = document.getElementById("content");
document.cookie = "darkmode=false; path=/"; if (elem && document.cookie.includes("dark-mode=true")) {
if (document.getElementById("content") !== null) { elem.classList.add("dark-mode");
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=/"; function toggleDarkmode() {
if (document.getElementById("content") !== null) { const elem = document.getElementById("content");
document.getElementById("content").classList.add("dark-mode"); 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);
}
}); });

3
themes/patek/layouts/partials/menu.html
View File

@ -37,6 +37,9 @@
{{ end }} {{ end }}
</div> </div>
<div class="navbar-end"> <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"> <div class="navbar-item has-dropdown is-hoverable">
<span class="navbar-link">{{ .Site.Language.LanguageName }}</span> <span class="navbar-link">{{ .Site.Language.LanguageName }}</span>
<div class="navbar-dropdown"> <div class="navbar-dropdown">

2
themes/patek/layouts/partials/talksPageHeader.html
View File

@ -1,6 +1,6 @@
<div class="pageHeader"> <div class="pageHeader">
<h2 class="title pageTitle"><a href="{{ .Permalink }}">{{ .Title }}</a></h2> <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 "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=""> <p class="">
{{- T "presenter" -}}: {{ range .Params.authors }}{{ with $.Site.GetPage (printf "authors/%s" .) }}<a class="separateWithCommas" href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}{{ end }} {{- T "presenter" -}}: {{ range .Params.authors }}{{ with $.Site.GetPage (printf "authors/%s" .) }}<a class="separateWithCommas" href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}{{ end }}