commit 60e6fa8b3c5d8607795ed1047854c57ab199ac28
parent 718ebf4a13e1b4d92a3984668594e392bc297922
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Sun, 2 Jun 2024 14:27:27 +0200
Toggle Theme
Diffstat:
| M | template.html | | | 69 | ++++++++++++++++++++++++++++++++++++++++++++------------------------- |
1 file changed, 44 insertions(+), 25 deletions(-)
diff --git a/template.html b/template.html
@@ -19,38 +19,48 @@
<link crossorigin="use-credentials" rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
+ /* Always scroll smoothly */
* { scroll-behavior: smooth; }
- img { display: none; }
- br { display: none; }
+ /* Hide linebreaks inside articles */
+ article > p > br { display: none; }
+ /* Mark headline anchors as external links */
h2 > a[href^="https"]::after {
content: " \2197";
}
- @media(prefers-color-scheme:dark){
- :root{
- --theme: rgb(29, 30, 32);
- --entry: rgb(46, 46, 51);
- --primary: rgb(218, 218, 219);
- --secondary: rgb(155, 156, 157);
- --tertiary: rgb(65, 66, 68);
- --content: rgb(196, 196, 197);
- --hljs-bg: rgb(46, 46, 51);
- --code-bg: rgb(55, 56, 62);
- --border: rgb(51, 51, 51)
- }
- .list{
- background:var(--theme)
- }
- .list:not(.dark)::-webkit-scrollbar-track{
- background:0 0
- }
- .list:not(.dark)::-webkit-scrollbar-thumb{
- border-color:var(--theme)
+ </style>
+ <script>
+ // Toggle Theme function
+ function toggleTheme(set_mode = null) {
+ // Get current dark-mode status if not given explicitely
+ if (set_mode === null) {
+ set_mode = 1 - sessionStorage.getItem("dark-mode");
+ }
+ // 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);
+ }
+ // On Load: set dark mode if necessary
+ function initialTheme() {
+ if (
+ // Case 1: Dark Mode is preferred and has not been toggled before
+ (window.matchMedia('(prefers-color-scheme: dark)').matches &&
+ sessionStorage.getItem("dark-mode") === null) ||
+ // Case 2: Dark Mode has been choosen before
+ sessionStorage.getItem("dark-mode") == 1
+ ) {
+ toggleTheme(set_mode = 1);
+ } else {
+ toggleTheme(set_mode = 0);
}
}
- </style>
+ </script>
</head>
- <body class="list dark">
+ <body class="list dark" onload="initialTheme();">
<main class="main">
<h1>[% feed.title | html %] <a href="./atom.xml">
@@ -62,7 +72,16 @@
<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>
+ <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>
</h1>
<!-- This is updated by find-and-replace -->
