theme switcher

5mdt · Dec 8, 2023 · cdaef27 · cdaef27
1 parent edc7aff
commit cdaef27
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -11,12 +11,18 @@
 </head>
 
 <body>
+    <div class="toggle">
+        <input onclick="handleToggle()" class="checkbox" type="checkbox" id="toggle">
+        <label for="toggle" class="label">
+            <span class="ball"></span>
+        </label>
+    </div>
     <div class="container">
         <header>
             <h1>5mdt <br />Noise Generator</h1>
         </header>
         <main>
-            <label for="#timer">Timer (mm:ss):</label>
+            <label for="timer">Timer (mm:ss):</label>
             <input type="time" id="timer" value="00:00:00">
             <button onclick="handleStartNoise(types.brown)" id="brown">▶ Brown Noise</button>
             <button onclick="handleStartNoise(types.pink)" id="pink">▶ Pink Noise</button>

diff --git a/scripts.js b/scripts.js
@@ -87,3 +87,22 @@ function getDurationInSeconds(timeValue) {
 function padZero(number) {
     return number < 10 ? `0${number}` : number;
 }
+
+const theme = localStorage.getItem('theme')
+const toggle = document.getElementById('toggle')
+const setTheme = (theme) => {
+    if (!theme) {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
+        toggle.checked = prefersDark.matches
+    } else {
+        toggle.checked = theme === 'dark'
+    }
+}
+setTheme(theme)
+const handleToggle = () => {
+    if (toggle.checked) {
+        localStorage.setItem('theme', 'dark')
+    } else {
+        localStorage.setItem('theme', 'light')
+    }
+}
diff --git a/style.css b/style.css
@@ -1,29 +1,91 @@
+:root {
+    --white: #f0f0f0;
+    --light-grey: #e4e4e4;
+    --black: #111111;
+    --dark-grey: #272727;
+    --bg: var(--white);
+    --txt: var(--black);
+    --dark-opacity: 0;
+    --light-opacity: 1;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+/*@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {*/
+/*    body {*/
+/*        --bg: var(--white);*/
+/*        --txt: var(--black);*/
+/*    }*/
+/*}*/
+/*@media (prefers-color-scheme: dark) {*/
+/*    body {*/
+/*        --bg: var(--black);*/
+/*        --txt: var(--white);*/
+/*    }*/
+/*}*/
+
 body {
     font-family: sans-serif;
     text-align: center;
     transition: background-color 0.3s, color 0.3s;
-    /* Add transition for smooth theme change */
+    background-color: var(--bg);
+    color: var(--txt);
 }
 
-.container {
-    max-width: 620px;
-    margin: 0 auto;
+body:has(.checkbox:checked) {
+    --bg: var(--black);
+    --txt: var(--white);
+    --dark-opacity: 1;
+    --light-opacity: 0;
 }
 
-/* Light mode */
-@media (prefers-color-scheme: light) {
-    body {
-        background-color: white;
-        color: black;
-    }
+.toggle {
+    margin-top: 1rem;
+    margin-left: 1rem;
 }
 
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: black;
-        color: white;
-    }
+.checkbox:checked + .label .ball {
+    transform: translateX(1.5rem);
+}
+
+.checkbox {
+    display: none;
+}
+
+.label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--txt);
+    border-radius: 5rem;
+    padding: 0.25rem;
+    height: 1.5rem;
+    width: 3rem;
+    font-size: 1.5rem;
+    cursor: pointer;
+    z-index: 1;
+    transition: background 0.5s ease;
+    position: relative;
+}
+
+.label .ball {
+    position: absolute;
+    top: 0.25rem;
+    left: 0.25rem;
+    height: 1rem;
+    width: 1rem;
+    background: var(--bg);
+    border-radius: 50%;
+    transform: translateX(0);
+    transition: transform 0.3s ease, background 0.5s ease;
+}
+
+.container {
+    max-width: 620px;
+    margin: 0 auto;
 }
 
 h1 {