pub / yt2html

commit 6c588cef0b7117b210dd3f04124bae100956c7b8
parent 732c0971b11163e022a957a62fa44e3bae213da2
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Mon,  3 Jun 2024 12:41:15 +0200

Implement dark mode toggle

Diffstat:
M
template.html
 | 
62
+++++++++++++++++++++++++++++++++++++++-----------------------

1 file changed, 39 insertions(+), 23 deletions(-)
diff --git a/template.html b/template.html
@@ -35,30 +35,9 @@
         border-width: 1px;
         padding: 0.25em;
       }
-      @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>
+      // Embed Youtube Video
       function embed_yt(oid, vid) {
         window.location = "#entry_" + oid;
         var img = document.querySelector("#thumbnail_" + oid);
@@ -74,6 +53,30 @@
             vid;
         img.replaceWith(player);
       }
+      // 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);
+      }
+      // 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);
+        }
+      }
     </script>
 
   </head>
@@ -82,8 +85,21 @@
     <main class="main">
 
         <h1>Videos</h1>
-        <button class="button"><a href="/">&#8962; All Videos</a></button>
+
+        <a href="/"><button class="button">&#8962; All Videos</button></a>
+        <a href="javascript:toggleTheme(set_mode = 1 - sessionStorage.getItem('dark-mode'));">
+          <button class="button" title="Toggle 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">
+              <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>
+        </a>
         <a href="reload.php"><button class="button">&#10227; Refresh</button></a><br>
+
         <form action="https://www.youtube.com/results" method="GET" style="width:100%;">
             <input id="searchbar" type="text" id="searchInput" name="search_query" placeholder="&#128269; Search...">
         </form><br>