pub / tw2html

Checks online status of streams on twitch.tv and lets you watch them
git clone https://src.jayvii.de/pub/tw2html.git
Home | Log | Files | Exports | Refs | README | RSS
commit 502b99114418823ed7ae0978d89a662623ea1e5a
parent 0900bf10f09361311ae96e5d1520525995b0ea98
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Mon,  3 Jun 2024 12:27:47 +0200

Enable Dark mode toggle

Diffstat:

Aassets/js/darkmode.js | 29+++++++++++++++++++++++++++++


Mindex.php | 11+++++++++--


2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
@@ -0,0 +1,29 @@
+// Toggle Theme function
+function toggleTheme(set_mode = null) {
+    // Set Mode and switch toggle icon
+    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;";
+    }
+    // Mark mode in session storage
+    sessionStorage.setItem("dark-mode", set_mode);
+}
+// On Load: set dark mode if necessary
+function initialTheme() {
+  if (
+      // Case 1: Dark Mode is preferred and no cookie is set
+      (window.matchMedia('(prefers-color-scheme: dark)').matches &&
+      sessionStorage.getItem("dark-mode") === null) ||
+      // Case 2: Dark Mode is set via session Storage
+      sessionStorage.getItem("dark-mode") == 1
+  ) {
+      toggleTheme(set_mode = 1);
+  } else {
+      toggleTheme(set_mode = 0);
+  }
+}
diff --git a/index.php b/index.php
@@ -55,14 +55,21 @@ if (!$loading_screen) {
     <link rel="stylesheet" href="assets/css/loading.css" />
     <link rel="stylesheet" href="assets/css/custom.css" />
     <script async src="assets/js/twitch.js"></script>
+    <script async src="assets/js/darkmode.js"></script>
     <link crossorigin="use-credentials" rel="manifest" href="manifest.json">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
 
-  <body class="list dark">
+  <body class="list dark" onload="initialTheme();">
     <main class="main">
 
-        <h1>Streams</h1>
+        <h1>
+          Streams
+          <a title="Toggle Dark Mode" href="javascript:toggleTheme(set_mode = 1 - sessionStorage.getItem('dark-mode'));">
+            <stretch id="darkmodetoggle">&#127761;</stretch>
+            <stretch id="lightmodetoggle">&#127765;</stretch>
+          </a>
+        </h1>
 
         <!-- Save Button -->
         <button class="button" onclick="<?php echo "document.cookie='streams=" . implode(",", $streams["stream"]) . ";path=/;max-age=31536000;';" ?>" style="<?php echo "color:" . $save_col; ?>">