commit c9a123c937b169165b34a0f889f5689d9b4fe9e8
parent da7f670999098eb69faa8404512cc1509515ced4
Author: Michael Neuper <michael@michaelneuper.com>
Date: Sun, 5 Nov 2023 15:00:45 +0200
Add toggle for dark mode
Diffstat:
10 files changed, 95 insertions(+), 48 deletions(-)
diff --git a/assets/sass/layouts/common.scss b/assets/sass/layouts/common.scss
@@ -180,6 +180,29 @@ main {
flex-wrap: wrap;
}
+.dark-mode-toggle {
+ background-color: var(--background-secondary);
+ color: var(--text);
+ position: absolute;
+ top: calc(((4px + $margin) / 2) + 12.55px);
+ right: $padding;
+ border: none;
+ padding: 0.5rem;
+ border-radius: $radius;
+ cursor: pointer;
+ transition: opacity 0.3s;
+
+ &:hover {
+ color: var(--text-emphasized);
+ }
+
+ @media screen {
+ @media screen and (max-width: $mobile-breakpoint) {
+ right: calc((4px + $margin) / 2);
+ }
+ }
+}
+
.icon {
padding-right: 0.1em;
padding-left: 0.1em;
diff --git a/assets/sass/vars.scss b/assets/sass/vars.scss
@@ -14,24 +14,20 @@ $padding: math.div(100vw - $max-width, 2);
$border: 2px;
$mobile-breakpoint: 768px;
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #002b36;
- --background-secondary: #073642;
- --text: #839496;
- --text-secondary: #586e75;
- --text-emphasized: #93a1a1;
- }
+:root {
+ --background: #fdf6e3;
+ --background-secondary: #eee8d5;
+ --text: #657b83;
+ --text-secondary: #93a1a1;
+ --text-emphasized: #586e75;
}
-@media (prefers-color-scheme: light) {
- :root {
- --background: #fdf6e3;
- --background-secondary: #eee8d5;
- --text: #657b83;
- --text-secondary: #93a1a1;
- --text-emphasized: #586e75;
- }
+.darkmode {
+ --background: #002b36;
+ --background-secondary: #073642;
+ --text: #839496;
+ --text-secondary: #586e75;
+ --text-emphasized: #93a1a1;
}
:root {
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -4,6 +4,11 @@
<header id="header">
<h1>
<a href="{{ .Site.BaseURL }}">{{ .Site.Params.title | default .Site.Title }}</a>
+ <button id="dark-mode-toggle" class="dark-mode-toggle" aria-label="Toggle theme">
+ <svg width="2rem" height="2rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496">
+ <path fill="currentColor" d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z" transform="translate(-8 -8)"/>
+ </svg>
+ </button>
</h1>
<nav>
diff --git a/static/images/icons/blog.svg b/static/images/icons/blog.svg
@@ -1,15 +1,14 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<style>
- @media (prefers-color-scheme: dark) {
+ .darkmode {
svg {
fill: #93a1a1;
}
}
- @media (prefers-color-scheme: light) {
- svg {
- fill: #586e75;
- }
+
+ svg {
+ fill: #586e75;
}
</style>
<path d="M17,11H16a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm0,4H16a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2ZM11,9h6a1,1,0,0,0,0-2H11a1,1,0,0,0,0,2ZM21,3H7A1,1,0,0,0,6,4V7H3A1,1,0,0,0,2,8V18a3,3,0,0,0,3,3H18a4,4,0,0,0,4-4V4A1,1,0,0,0,21,3ZM6,18a1,1,0,0,1-2,0V9H6Zm14-1a2,2,0,0,1-2,2H7.82A3,3,0,0,0,8,18V5H20Zm-9-4h1a1,1,0,0,0,0-2H11a1,1,0,0,0,0,2Zm0,4h1a1,1,0,0,0,0-2H11a1,1,0,0,0,0,2Z"/></svg>
\ No newline at end of file
diff --git a/static/images/icons/categories.svg b/static/images/icons/categories.svg
@@ -1,15 +1,14 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<style>
- @media (prefers-color-scheme: dark) {
+ .darkmode {
svg {
- fill: #839496;
+ fill: #93a1a1;
}
}
- @media (prefers-color-scheme: light) {
- svg {
- fill: #657b83;
- }
+
+ svg {
+ fill: #586e75;
}
</style>
<path d="M3.71,16.29a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21,1,1,0,0,0-.21.33,1,1,0,0,0,.21,1.09,1.15,1.15,0,0,0,.33.21.94.94,0,0,0,.76,0,1.15,1.15,0,0,0,.33-.21,1,1,0,0,0,.21-1.09A1,1,0,0,0,3.71,16.29ZM7,8H21a1,1,0,0,0,0-2H7A1,1,0,0,0,7,8ZM3.71,11.29a1,1,0,0,0-1.09-.21,1.15,1.15,0,0,0-.33.21,1,1,0,0,0-.21.33.94.94,0,0,0,0,.76,1.15,1.15,0,0,0,.21.33,1.15,1.15,0,0,0,.33.21.94.94,0,0,0,.76,0,1.15,1.15,0,0,0,.33-.21,1.15,1.15,0,0,0,.21-.33.94.94,0,0,0,0-.76A1,1,0,0,0,3.71,11.29ZM21,11H7a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2ZM3.71,6.29a1,1,0,0,0-.33-.21,1,1,0,0,0-1.09.21,1.15,1.15,0,0,0-.21.33.94.94,0,0,0,0,.76,1.15,1.15,0,0,0,.21.33,1.15,1.15,0,0,0,.33.21,1,1,0,0,0,1.09-.21,1.15,1.15,0,0,0,.21-.33.94.94,0,0,0,0-.76A1.15,1.15,0,0,0,3.71,6.29ZM21,16H7a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"/></svg>
\ No newline at end of file
diff --git a/static/images/icons/contact.svg b/static/images/icons/contact.svg
@@ -1,15 +1,14 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
<style>
- @media (prefers-color-scheme: dark) {
+ .darkmode {
svg {
fill: #93a1a1;
}
}
- @media (prefers-color-scheme: light) {
- svg {
- fill: #586e75;
- }
+
+ svg {
+ fill: #586e75;
}
</style>
<path d="M17,21.63H5a3,3,0,0,1-3-3v-8a1,1,0,0,0-2,0v8a5,5,0,0,0,5,5H17a1,1,0,0,0,0-2Zm4-18H7a3,3,0,0,0-3,3v10a3,3,0,0,0,3,3H21a3,3,0,0,0,3-3v-10A3,3,0,0,0,21,3.63Zm-.41,2-5.88,5.88a1,1,0,0,1-1.42,0L7.41,5.63Zm1.41,11a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V7l5.88,5.88a3,3,0,0,0,4.24,0L22,7Z"/></svg>
\ No newline at end of file
diff --git a/static/images/icons/github.svg b/static/images/icons/github.svg
@@ -1,15 +1,14 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
<style>
- @media (prefers-color-scheme: dark) {
+ .darkmode {
svg {
fill: #93a1a1;
}
}
- @media (prefers-color-scheme: light) {
- svg {
- fill: #586e75;
- }
+
+ svg {
+ fill: #586e75;
}
</style>
<path d="M10.07031,20.50291a1.00008,1.00008,0,0,0-1.18115-.9834c-1.30908.24024-2.96191.27637-3.40137-.958a5.70754,5.70754,0,0,0-1.83691-2.415,1.20073,1.20073,0,0,1-.1665-.10938,1,1,0,0,0-.93067-.64551H2.54883a.99965.99965,0,0,0-1,.99512c-.00391.81543.811,1.33789,1.1416,1.51465a4.4408,4.4408,0,0,1,.92383,1.35937c.36426,1.02344,1.42285,2.57617,4.46582,2.376.001.03516.00195.06836.00244.09863l.00439.26758a1,1,0,0,0,2,0l-.00488-.31836C10.07715,21.4951,10.07031,21.22068,10.07031,20.50291Zm10.667-15.126c.03174-.125.063-.26367.09034-.41992a6.27792,6.27792,0,0,0-.40821-3.293,1.002,1.002,0,0,0-.61572-.58007c-.356-.12012-1.67041-.35645-4.18408,1.25a13.86918,13.86918,0,0,0-6.354,0C6.76221.751,5.45459.9658,5.10205,1.07908a.99744.99744,0,0,0-.63135.584,6.3003,6.3003,0,0,0-.40332,3.35644c.02442.12793.05078.2461.07813.35449A6.26928,6.26928,0,0,0,2.89014,9.20311a8.42168,8.42168,0,0,0,.04248.92187c.334,4.60254,3.334,5.98438,5.42431,6.459-.04345.125-.083.25878-.11816.40039a1.00023,1.00023,0,0,0,1.94238.47851,1.6784,1.6784,0,0,1,.46778-.87793.99947.99947,0,0,0-.5459-1.74512c-3.4541-.39453-4.95362-1.80175-5.1792-4.89843a6.61076,6.61076,0,0,1-.03369-.73828,4.25769,4.25769,0,0,1,.91943-2.71289,3.022,3.022,0,0,1,.1958-.23145.99988.99988,0,0,0,.188-1.02441,3.3876,3.3876,0,0,1-.15527-.55567A4.09356,4.09356,0,0,1,6.1167,3.06346a7.54263,7.54263,0,0,1,2.415,1.17968,1.00877,1.00877,0,0,0,.82764.13282,11.77716,11.77716,0,0,1,6.17285.001,1.00549,1.00549,0,0,0,.83056-.13769,7.572,7.572,0,0,1,2.40528-1.19043,4.03977,4.03977,0,0,1,.0874,1.57812,3.205,3.205,0,0,1-.16895.60743.9999.9999,0,0,0,.188,1.02441c.07715.08691.1543.18066.22363.26855A4.12186,4.12186,0,0,1,20,9.20311a7.03888,7.03888,0,0,1-.0376.77734c-.22021,3.05566-1.72558,4.46387-5.1958,4.85937a1,1,0,0,0-.54541,1.7461,1.63079,1.63079,0,0,1,.46631.9082,3.06079,3.06079,0,0,1,.09229.81934v2.334C14.77,21.2949,14.77,21.78025,14.77,22.00291a1,1,0,1,0,2,0c0-.2168,0-.69238.00977-1.33984V18.31346a4.8815,4.8815,0,0,0-.15479-1.31153,4.25638,4.25638,0,0,0-.11621-.416,6.51258,6.51258,0,0,0,5.44531-6.42383A8.69677,8.69677,0,0,0,22,9.20311,6.13062,6.13062,0,0,0,20.7373,5.37693Z"/></svg>
\ No newline at end of file
diff --git a/static/images/icons/rss.svg b/static/images/icons/rss.svg
@@ -1,15 +1,14 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<style>
- @media (prefers-color-scheme: dark) {
+ .darkmode {
svg {
fill: #93a1a1;
}
}
- @media (prefers-color-scheme: light) {
- svg {
- fill: #586e75;
- }
+
+ svg {
+ fill: #586e75;
}
</style>
<path d="M2.88,16.88a3,3,0,0,0,0,4.24,3,3,0,0,0,4.24,0,3,3,0,0,0-4.24-4.24Zm2.83,2.83a1,1,0,0,1-1.42-1.42,1,1,0,0,1,1.42,0A1,1,0,0,1,5.71,19.71ZM5,12a1,1,0,0,0,0,2,5,5,0,0,1,5,5,1,1,0,0,0,2,0,7,7,0,0,0-7-7ZM5,8a1,1,0,0,0,0,2,9,9,0,0,1,9,9,1,1,0,0,0,2,0,11.08,11.08,0,0,0-3.22-7.78A11.08,11.08,0,0,0,5,8Zm10.61.39A15.11,15.11,0,0,0,5,4,1,1,0,0,0,5,6,13,13,0,0,1,18,19a1,1,0,0,0,2,0A15.11,15.11,0,0,0,15.61,8.39Z"/></svg>
\ No newline at end of file
diff --git a/static/images/icons/tags.svg b/static/images/icons/tags.svg
@@ -1,15 +1,14 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<style>
- @media (prefers-color-scheme: dark) {
+ .darkmode {
svg {
- fill: #839496;
+ fill: #93a1a1;
}
}
- @media (prefers-color-scheme: light) {
- svg {
- fill: #657b83;
- }
+
+ svg {
+ fill: #586e75;
}
</style>
<path d="M7.5,6A1.5,1.5,0,1,0,9,7.5,1.5,1.5,0,0,0,7.5,6Zm13.62,4.71L12.71,2.29A1,1,0,0,0,12,2H3A1,1,0,0,0,2,3v9a1,1,0,0,0,.29.71l8.42,8.41a3,3,0,0,0,4.24,0L21.12,15a3,3,0,0,0,0-4.24Zm-1.41,2.82h0l-6.18,6.17a1,1,0,0,1-1.41,0L4,11.59V4h7.59l8.12,8.12a1,1,0,0,1,.29.71A1,1,0,0,1,19.71,13.53Z"/></svg>
\ No newline at end of file
diff --git a/static/js/script.js b/static/js/script.js
@@ -39,3 +39,32 @@ document.addEventListener("DOMContentLoaded", function () {
block.appendChild(copyButton);
});
});
+
+// Dark mode toggle
+let darkMode = localStorage.getItem("darkMode");
+const darkModeToggle = document.querySelectorAll("#dark-mode-toggle");
+
+const enableDarkMode = () => {
+ document.body.classList.add("darkmode");
+ localStorage.setItem("darkMode", "enabled");
+};
+
+const disableDarkMode = () => {
+ document.body.classList.remove("darkmode");
+ localStorage.setItem("darkMode", null);
+};
+
+if (darkMode === 'enabled') {
+ enableDarkMode();
+}
+
+darkModeToggle.forEach((toggle) => {
+ toggle.addEventListener("click", () => {
+ darkMode = localStorage.getItem('darkMode');
+ if (darkMode !== 'enabled') {
+ enableDarkMode();
+ } else {
+ disableDarkMode();
+ }
+ });
+});
