Add dark mode to portable.py

wasi-master · Aug 14, 2024 · d89e451 · d89e451
1 parent 8c65983
commit d89e451
Showing 1 changed file with 101 additions and 1 deletion.
diff --git a/app/portable.py b/app/portable.py
@@ -9,6 +9,7 @@
 html = """
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -25,19 +26,22 @@
             justify-content: center;
             align-items: center;
             height: 90vh;
+            transition: background-color 0.3s, color 0.3s;
         }
-        
+
         h1 {
             font-size: 1.5rem;
             margin-bottom: 20px;
             text-align: center;
             color: #333;
         }
+
         label {
             display: block;
             margin-bottom: 10px;
             font-weight: bold;
         }
+
         input[type=text] {
             padding: 10px;
             margin-bottom: 10px;
@@ -47,6 +51,7 @@
             font-size: 1rem;
             box-sizing: border-box;
         }
+
         input[type="submit"] {
             padding: 10px;
             background-color: #6a0dad;
@@ -59,29 +64,124 @@
             cursor: pointer;
             transition: background-color 0.3s ease;
         }
+
         input[type="submit"]:hover {
             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 {
                 padding: 10px;
             }
+
             h1 {
                 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>
 """