From 59f0eaef27564f848f894592afa4bae340d27fab Mon Sep 17 00:00:00 2001
From: Raj Nandan Sharma <rajnandan1@gmail.com>
Date: Tue, 31 Mar 2026 22:08:08 +0530
Subject: [PATCH] Refactor layout component to streamline dynamic styles and
 improve color handling

---
 src/routes/(account)/+layout.svelte | 35 ++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/routes/(account)/+layout.svelte b/src/routes/(account)/+layout.svelte
index 297d2b32..17b62efa 100644
--- a/src/routes/(account)/+layout.svelte
+++ b/src/routes/(account)/+layout.svelte
@@ -4,15 +4,9 @@
   import { ModeWatcher } from "mode-watcher";
   import { resolve } from "$app/paths";
   import { Toaster } from "$lib/components/ui/sonner/index.js";
-
-  let base = resolve("/");
+  import clientResolver from "$lib/client/resolver.js";
 
   let { children, data } = $props();
-
-  const colorUp = $derived(data.siteStatusColors.UP);
-  const colorDegraded = $derived(data.siteStatusColors.DEGRADED);
-  const colorDown = $derived(data.siteStatusColors.DOWN);
-  const colorMaintenance = $derived(data.siteStatusColors.MAINTENANCE);
   import KenerNav from "$lib/components/KenerNav.svelte";
 </script>
 
@@ -21,7 +15,32 @@
 
 <svelte:head>
   <meta name="robots" content="noindex, nofollow" />
-  {@html `<style>:root{--up:${colorUp};--degraded:${colorDegraded};--down:${colorDown};--maintenance:${colorMaintenance};}</style>`}
+  <link rel="icon" href={data.favicon} />
+  {#if data.font?.cssSrc}
+    <link rel="stylesheet" href={data.font.cssSrc} />
+  {/if}
+  {@html `
+	<style id="dynamic-styles">
+		body {
+			--up: ${data.siteStatusColors.UP};
+			--degraded: ${data.siteStatusColors.DEGRADED};
+			--down: ${data.siteStatusColors.DOWN};
+			--maintenance: ${data.siteStatusColors.MAINTENANCE};
+			--accent: ${data.siteStatusColors.ACCENT || "#f4f4f5"};
+			--accent-foreground: ${data.siteStatusColors.ACCENT_FOREGROUND || data.siteStatusColors.ACCENT || "#e96e2d"};
+			${data.font?.family ? `--font-family:'${data.font.family}', sans-serif;` : ""}
+		}
+		:is(.dark) body {
+			--up: ${data.siteStatusColorsDark.UP};
+			--degraded: ${data.siteStatusColorsDark.DEGRADED};
+			--down: ${data.siteStatusColorsDark.DOWN};
+			--maintenance: ${data.siteStatusColorsDark.MAINTENANCE};
+			--accent: ${data.siteStatusColorsDark.ACCENT || "#27272a"};
+			--accent-foreground: ${data.siteStatusColorsDark.ACCENT_FOREGROUND || data.siteStatusColorsDark.ACCENT || "#e96e2d"};
+		}
+		${data.customCSS || ""}
+	</style>`}
+  <script src={clientResolver(resolve, "/capture.js")}></script>
 </svelte:head>
 <main>
   <!-- Nav -->