commit 55396570afadc18587faa26351a1291cc4d5d696
parent ad50a5e79fb5ef7d588f977f4e6d5572fbb2a74c
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Mon, 3 Jun 2024 12:57:19 +0200
Move rss and darkmode to designated buttons
Diffstat:
| M | template.html | | | 53 | ++++++++++++++++++++++++++--------------------------- |
1 file changed, 26 insertions(+), 27 deletions(-)
diff --git a/template.html b/template.html
@@ -32,13 +32,17 @@
<script>
// Toggle Theme function
function toggleTheme(set_mode = null) {
- // Set Mode and mark in session storage
- if (set_mode === 0) {
- document.querySelector("body").classList = ["list"];
- } else {
- document.querySelector("body").classList = ["list dark"];
- }
- sessionStorage.setItem("dark-mode", set_mode);
+ // Set Mode and mark in session storage
+ if (set_mode === 0) {
+ document.querySelector("body").classList = ["list"];
+ document.querySelector("#darkmodetoggle").style="display:inherit;";
+ document.querySelector("#lightmodetoggle").style="display:none;";
+ } else {
+ document.querySelector("body").classList = ["list dark"];
+ document.querySelector("#darkmodetoggle").style="display:none;";
+ document.querySelector("#lightmodetoggle").style="display:inherit;";
+ }
+ sessionStorage.setItem("dark-mode", set_mode);
}
// On Load: set dark mode if necessary
function initialTheme() {
@@ -60,28 +64,23 @@
<body class="list dark" onload="initialTheme();">
<main class="main">
- <h1>[% feed.title | html %]
+ <h1>[% feed.title | html %]</h1>
+
+ <!-- Dark Mode Toggle -->
+ <a href="javascript:toggleTheme(set_mode = 1 - sessionStorage.getItem('dark-mode'));">
+ <button class="button" title="Toggle Dark Mode">
+ <stretch id="darkmodetoggle" style="display:none;">🌑</stretch>
+ <stretch id="lightmodetoggle" style="display:inherit;">🌕</stretch>
+ Dark Mode
+ </button>
+ </a>
+
+ <!-- RSS Button -->
<a href="./rss.xml">
- <!-- Copyright: 2023, Pictogrammers
- License: Apache-2.0 <https://www.apache.org/licenses/LICENSE-2.0>
- Info: https://pictogrammers.com/docs/general/license/
- -->
- <svg style="height:1em;width:auto;fill:var(--primary);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
- <title>RSS Feed</title>
- <path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z" />
- </svg>
- </a>
- <a href="#" onclick="toggleTheme(set_mode = 1 - sessionStorage.getItem('dark-mode'));">
- <!-- Copyright: 2023, Pictogrammers
- License: Apache-2.0 <https://www.apache.org/licenses/LICENSE-2.0>
- Info: https://pictogrammers.com/docs/general/license/
- -->
- <svg style="height:1em;width:auto;fill:var(--primary);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
- <title>Toggle Dark Mode</title>
- <path d="M7.5,2C5.71,3.15 4.5,5.18 4.5,7.5C4.5,9.82 5.71,11.85 7.53,13C4.46,13 2,10.54 2,7.5A5.5,5.5 0 0,1 7.5,2M19.07,3.5L20.5,4.93L4.93,20.5L3.5,19.07L19.07,3.5M12.89,5.93L11.41,5L9.97,6L10.39,4.3L9,3.24L10.75,3.12L11.33,1.47L12,3.1L13.73,3.13L12.38,4.26L12.89,5.93M9.59,9.54L8.43,8.81L7.31,9.59L7.65,8.27L6.56,7.44L7.92,7.35L8.37,6.06L8.88,7.33L10.24,7.36L9.19,8.23L9.59,9.54M19,13.5A5.5,5.5 0 0,1 13.5,19C12.28,19 11.15,18.6 10.24,17.93L17.93,10.24C18.6,11.15 19,12.28 19,13.5M14.6,20.08L17.37,18.93L17.13,22.28L14.6,20.08M18.93,17.38L20.08,14.61L22.28,17.15L18.93,17.38M20.08,12.42L18.94,9.64L22.28,9.88L20.08,12.42M9.63,18.93L12.4,20.08L9.87,22.27L9.63,18.93Z" />
- </svg>
+ <button class="button" title="RSS Feed">
+ 📡 RSS Feed
+ </button>
</a>
- </h1>
<!-- This is updated by find-and-replace -->
<p><!--UPDATED--></p>
