From 2f74411118c35f0c9d852966af25e04b45dd3f53 Mon Sep 17 00:00:00 2001
From: Berke Güzel <wenekar1@gmail.com>
Date: Mon, 9 Feb 2026 00:47:32 +0300
Subject: formatting and more perf

---
 src/lib/components/ThemeToggle.svelte | 133 +++++++++++++++++-----------------
 1 file changed, 68 insertions(+), 65 deletions(-)

(limited to 'src/lib/components/ThemeToggle.svelte')

diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
index f136246..08f4ef5 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -1,78 +1,81 @@
 <script lang="ts">
-    import { browser } from "$app/environment";
+  import { browser } from "$app/environment";
 
-    function getInitialTheme(): "light" | "dark" {
-        if (browser) {
-            const stored = localStorage.getItem("theme");
-            if (stored === "light" || stored === "dark") return stored;
-            return window.matchMedia("(prefers-color-scheme: dark)").matches
-                ? "dark"
-                : "light";
-        }
-        return "light";
+  function getInitialTheme(): "light" | "dark" {
+    if (browser) {
+      const fromRoot = document.documentElement.getAttribute("data-theme");
+      if (fromRoot === "light" || fromRoot === "dark") return fromRoot;
+
+      const stored = localStorage.getItem("theme");
+      if (stored === "light" || stored === "dark") return stored;
+      return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
     }
+    return "light";
+  }
 
-    let theme = $state<"light" | "dark">(getInitialTheme());
+  let theme = $state<"light" | "dark">(getInitialTheme());
 
-    function applyTheme(newTheme: "light" | "dark") {
-        if (browser) {
-            document.documentElement.setAttribute("data-theme", newTheme);
-            localStorage.setItem("theme", newTheme);
-        }
+  function applyTheme(newTheme: "light" | "dark") {
+    if (browser) {
+      document.documentElement.setAttribute("data-theme", newTheme);
+      localStorage.setItem("theme", newTheme);
     }
+  }
 
-    $effect(() => {
-        applyTheme(theme);
-    });
+  $effect(() => {
+    applyTheme(theme);
+  });
 
-    function toggleTheme() {
-        theme = theme === "light" ? "dark" : "light";
-    }
+  function toggleTheme() {
+    theme = theme === "light" ? "dark" : "light";
+  }
 </script>
 
 <button
-    class="theme-toggle"
-    onclick={toggleTheme}
-    aria-label={theme === "light"
-        ? "Switch to dark mode"
-        : "Switch to light mode"}
-    title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
+  class="theme-toggle"
+  onclick={toggleTheme}
+  aria-label={theme === "light"
+    ? "Switch to dark mode"
+    : "Switch to light mode"}
+  title={theme === "light" ? "Switch to dark mode" : "Switch to light mode"}
 >
-    {#if theme === "light"}
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        >
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-        </svg>
-    {:else}
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-        >
-            <circle cx="12" cy="12" r="5"></circle>
-            <line x1="12" y1="1" x2="12" y2="3"></line>
-            <line x1="12" y1="21" x2="12" y2="23"></line>
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-            <line x1="1" y1="12" x2="3" y2="12"></line>
-            <line x1="21" y1="12" x2="23" y2="12"></line>
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-        </svg>
-    {/if}
+  {#if theme === "light"}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+    </svg>
+  {:else}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="5"></circle>
+      <line x1="12" y1="1" x2="12" y2="3"></line>
+      <line x1="12" y1="21" x2="12" y2="23"></line>
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+      <line x1="1" y1="12" x2="3" y2="12"></line>
+      <line x1="21" y1="12" x2="23" y2="12"></line>
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+    </svg>
+  {/if}
 </button>
-- 
cgit v1.2.3