Merge pull request #124 from rajnandan1/fix-issue-123

fix: fixed theme settings as reported in issue #123

build.js

@@ -254,6 +254,12 @@ async function Build() {
 	if (site.siteName === undefined) {
 		site.siteName = site.title;
 	}
+	if (site.theme === undefined) {
+		site.theme = "system";
+	}
+	if (site.themeToggle === undefined) {
+		site.themeToggle = true;
+	}
 	if (!!site.analytics) {
 		const providers = {};
 

config/site.example.yaml

@@ -32,7 +32,7 @@ nav:
       iconURL: "/buymeacoffee.svg"
       url: "https://buymeacoffee.com/rajnandan1"
 hero:
-    title: Kener is a Modern Open-Source Status Page System
+    title: Kener is an Modern Open-Source Status Page System
     subtitle: Let your users know what's going on.
 footerHTML: |
     Made using 

docs/customize-site.md

@@ -16,6 +16,7 @@ logo: "/logo.svg"
 favicon: "/logo96.png"
 home: "/"
 theme: dark
+themeToggle: true
 github:
     owner: "rajnandan1"
     repo: "kener"
@@ -90,7 +91,11 @@ This is the location where someone will be taken when they click on the site nam
 
 ## theme
 
-This is the default theme of the site that will be used when a user lands for the first time. It can be `light` or `dark`. Defaults to `light`. The user still gets the option to change the theme.
+This is the default theme of the site that will be used when a user lands for the first time. It can be `light` or `dark` or `system`. Defaults to `system`. The user still gets the option to change the theme.
+
+## themeToggle
+
+This is the option to show the theme toggle. It can be `true` or `false`. Defaults to `true`.
 
 As of now there is no option to change the colors of the theme using `site.yaml`. If you still want to change the colors you can do so by modifying the `src/app.postcss` file.
 

src/routes/(kener)/+layout.svelte

@@ -10,23 +10,24 @@
 	import { Languages } from "lucide-svelte";
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 	import { analyticsEvent } from "$lib/analytics";
+	import { setMode, mode, ModeWatcher } from "mode-watcher";
 
 	export let data;
 
 	let defaultLocaleKey = data.selectedLang;
+	let defaultTheme = data.site.theme;
 
 	const allLocales = data.site.i18n?.locales;
 
 	function toggleMode() {
-		let classList = document.documentElement.classList;
-		if (classList.contains("dark")) {
-			classList.remove("dark");
+		if ($mode === "light") {
+			setMode("dark");
 		} else {
-			classList.add("dark");
+			setMode("light");
 		}
 
 		analyticsEvent("theme_change", {
-			theme: classList.contains("dark") ? "light" : "dark"
+			theme: $mode
 		});
 	}
 	let defaultLocaleValue;
@@ -57,7 +58,7 @@
 				location.reload();
 			}
 		}
-
+		setMode(defaultTheme);
 		const providers = data.site.analytics;
 		const analyticsPlugins = [];
 		if (providers) {
@@ -127,6 +128,7 @@
 		{/each}
 	{/if}
 </svelte:head>
+<ModeWatcher />
 <main style="--font-family: {data.site.font.family};--bg-custom: {data.bgc};">
 	{#if data.showNav}
 		<Nav {data} />
@@ -170,16 +172,17 @@
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>
 			{/if}
-
-			<Button on:click={toggleMode} variant="ghost" size="icon" class="flex">
-				<Sun
-					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-				/>
-				<Moon
-					class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-				/>
-				<span class="sr-only">Toggle theme</span>
-			</Button>
+			{#if !!data.site.themeToggle}
+				<Button on:click={toggleMode} variant="ghost" size="icon" class="flex">
+					<Sun
+						class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+					/>
+					<Moon
+						class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+					/>
+					<span class="sr-only">Toggle theme</span>
+				</Button>
+			{/if}
 		</div>
 	{/if}
 </main>