src/routes/Switcher.svelte

@@ -21,36 +21,55 @@
   });
 </script>
 
-<button class:dark={isDarkMode} class="switcher" on:click={toggleDarkMode}>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<label class:dark={isDarkMode} class="switcher" on:click={toggleDarkMode}>
+  <input class="input" checked="checked" type="button">
   {#if isDarkMode}
     <img src="/assets/icons/sun.svg" class="icon" alt="Light Mode" />
   {:else}
     <img src="/assets/icons/moon.svg" class="icon" alt="Dark Mode" />
   {/if}
-</button>
+</label>
 
 <style>
   .switcher {
-    padding: 0.5rem;
+    --bg-color: #ffffff00;
-    background-color: transparent;
+    --main-color: #0b0d0c;
-    border: none;
+    position: relative;
-    cursor: pointer;
+    display: flex;
-    color: var(--text-color); /* Set the color for the button icon */
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: var(--bg-color);
+    border-radius: 100%;
+    border: 2px solid var(--main-color);
+    box-shadow: 4px 4px var(--main-color);
   }
 
-  .icon {
+  :global(.dark) {
-    width: 1.5em;
-    height: 1.5em;
-  }
-
-  /* Dark mode styles */
-  :global(.dark) .icon {
     filter: invert(100%);
   }
 
-  /* Dark theme styles */
+  .input {
-  :global(.dark) {
+    cursor: pointer;
-    --bg-color: #111;
+    position: absolute;
-    --text-color: #fff;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    opacity: 0;
+  }
+
+  .icon {
+    position: absolute;
+    top: calc(50% -13px);
+    left: calc(50% -13px);
+    width: 24px;
+    height: 24px;
+  }
+
+  .switcher:active {
+    box-shadow: 0px 0px var(--main-color);
+    transform: translate(4px, 4px);
   }
 </style>