Add dark mode

Closes wasi-master#20
construct0-forks · Aug 14, 2024 · 8c65983 · 8c65983
1 parent d7260eb
commit 8c65983
Showing 1 changed file with 92 additions and 0 deletions.
diff --git a/app/index.html b/app/index.html
@@ -17,6 +17,7 @@
             justify-content: center;
             align-items: center;
             height: 90vh;
+            transition: background-color 0.3s, color 0.3s;
         }
 
         h1 {
@@ -59,6 +60,49 @@
             background-color: #4e0875;
         }
 
+        /* Toggle switch styles */
+        .dark-mode-toggle {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+        }
+
+        .dark-mode-toggle input {
+            display: none;
+        }
+
+        .dark-mode-toggle label {
+            cursor: pointer;
+            text-indent: -9999px;
+            width: 52px;
+            height: 27px;
+            background: grey;
+            display: block;
+            border-radius: 100px;
+            position: relative;
+        }
+
+        .dark-mode-toggle label:after {
+            content: '';
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 23px;
+            height: 23px;
+            background: #fff;
+            border-radius: 90px;
+            transition: 0.3s;
+        }
+
+        .dark-mode-toggle input:checked+label {
+            background: #6a0dad;
+        }
+
+        .dark-mode-toggle input:checked+label:after {
+            left: calc(100% - 2px);
+            transform: translateX(-100%);
+        }
+
         /* Responsive adjustments */
         @media only screen and (max-width: 600px) {
             form {
@@ -69,16 +113,64 @@
                 font-size: 1.2rem;
             }
         }
+
+        /* Dark mode styles */
+        body.dark-mode {
+            background-color: #333;
+            color: #FFF;
+        }
+
+        body.dark-mode h1 {
+            color: #FFF;
+        }
+
+        body.dark-mode input[type=text] {
+            background-color: #555;
+            border: 1px solid #777;
+            color: #FFF;
+        }
+
+        body.dark-mode input[type="submit"] {
+            background-color: #9b30ff;
+        }
+
+        body.dark-mode input[type="submit"]:hover {
+            background-color: #7a1bb5;
+        }
     </style>
 </head>
 
 <body>
+    <div class="dark-mode-toggle">
+        <input type="checkbox" id="dark-mode-toggle">
+        <label for="dark-mode-toggle" title="Toggle Dark Mode"></label>
+    </div>
     <form action="/article" method="post">
         <h1>Enter Website Link</h1>
         <label for="link">Link of the website you want to remove paywall for:</label>
         <input type="text" id="link" name="link" required>
         <input type="submit" value="Submit">
     </form>
+
+    <script>
+        const toggleSwitch = document.getElementById('dark-mode-toggle');
+        const currentTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+
+        if (currentTheme === "dark") {
+            document.body.classList.add("dark-mode");
+            toggleSwitch.checked = true;
+        }
+
+        toggleSwitch.addEventListener('change', function () {
+            if (this.checked) {
+                document.body.classList.add("dark-mode");
+                localStorage.setItem('theme', 'dark');
+            } else {
+                document.body.classList.remove("dark-mode");
+                localStorage.setItem('theme', 'light');
+            }
+        });
+    </script>
 </body>
 
 </html>