Use localStorage for green

src/routes/+layout.server.js

@@ -1,7 +0,0 @@
-export async function load({ cookies }) {
-    const green = cookies.get("green");
-
-    return {
-        green: green === "true"
-    };
-}

src/routes/+layout.svelte

@@ -1,14 +1,17 @@
 <script>
+    import { browser } from "$app/environment";
     import { page } from "$app/stores";
     import Footer from "$lib/components/Footer.svelte";
     import Navbar from "$lib/components/Navbar.svelte";
     import "./style.css";
 
-    export let data;
+    const green = browser
+        ? window.localStorage.getItem("green") === "true"
+        : false;
 </script>
 
 <svelte:head>
-    {#if data.green}
+    {#if green}
         <link rel="stylesheet" href="/assets/green.css" />
     {/if}
     <title>

src/routes/green/+page.js

@@ -0,0 +1,16 @@
+import { browser } from '$app/environment';
+import { redirect } from '@sveltejs/kit';
+
+export async function load() {
+    if (!browser) return;
+
+    const green = window.localStorage.getItem("green");
+
+    if (green === "true") {
+        window.localStorage.removeItem("green");
+    } else {
+        window.localStorage.setItem("green", "true");
+    }
+
+    redirect(302, "/");
+}

src/routes/green/+page.server.js

@@ -1,13 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-
-export async function load({ cookies }) {
-    const green = cookies.get("green");
-
-    if (green === "true") {
-        cookies.delete("green", { path: "/" });
-    } else {
-        cookies.set("green", "true", { path: "/", sameSite: "strict" });
-    }
-
-    redirect(302, "/");
-}

src/routes/green/+page.svelte

@@ -0,0 +1 @@
+<p>Toggling green...</p>