homelab/kener
1
0
Fork 0
mirror of https://github.com/rajnandan1/kener.git synced 2026-06-23 04:10:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor layout component to streamline dynamic styles and improve color handling

Browse Source
This commit is contained in:
Raj Nandan Sharma
2026-03-31 22:08:08 +05:30
parent 8362a73058
commit 59f0eaef27
1 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(account)/+layout.svelte
+27 -8
View File
@@ -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 -->