@farming-labs/svelte-theme 0.0.2-beta.11 → 0.0.2-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.2-beta.11",
+  "version": "0.0.2-beta.13",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "type": "module",
   "svelte": "./src/index.js",
@@ -49,8 +49,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.2-beta.11",
-    "@farming-labs/svelte": "0.0.2-beta.11"
+    "@farming-labs/docs": "0.0.2-beta.13",
+    "@farming-labs/svelte": "0.0.2-beta.13"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/DocsContent.svelte

@@ -8,6 +8,24 @@
       ? config.metadata.titleTemplate.replace("%s", "")
       : " – Docs"
   );
+
+  let tocEnabled = $derived(
+    config?.theme?.ui?.layout?.toc?.enabled ?? true
+  );
+
+  let breadcrumbEnabled = $derived.by(() => {
+    const bc = config?.breadcrumb;
+    if (bc === undefined || bc === true) return true;
+    if (bc === false) return false;
+    if (typeof bc === "object") return bc.enabled !== false;
+    return true;
+  });
+
+  let showEditOnGithub = $derived(
+    !!config?.github && !!data.editOnGithub
+  );
+
+  let showLastModified = $derived(!!data.lastModified);
 </script>
 
 <svelte:head>
@@ -19,12 +37,12 @@
 
 <DocsPage
   entry={config?.entry ?? "docs"}
-  tocEnabled={true}
-  breadcrumbEnabled={config?.breadcrumb?.enabled ?? true}
+  {tocEnabled}
+  {breadcrumbEnabled}
   previousPage={data.previousPage}
   nextPage={data.nextPage}
-  editOnGithub={data.editOnGithub}
-  lastModified={data.lastModified}
+  editOnGithub={showEditOnGithub ? data.editOnGithub : null}
+  lastModified={showLastModified ? data.lastModified : null}
 >
   {#snippet children()}
     {@html data.html}

package/src/components/DocsLayout.svelte

@@ -3,19 +3,56 @@
   import AskAIDialog from "./AskAIDialog.svelte";
   import FloatingAIChat from "./FloatingAIChat.svelte";
   import { page } from "$app/stores";
+  import { onMount } from "svelte";
 
   let {
     tree,
     config = null,
     title = undefined,
     titleUrl = undefined,
-    themeToggle = true,
     children,
   } = $props();
 
   let resolvedTitle = $derived(title ?? config?.nav?.title ?? "Docs");
   let resolvedTitleUrl = $derived(titleUrl ?? config?.nav?.url ?? "/docs");
 
+  let showThemeToggle = $derived.by(() => {
+    const toggle = config?.themeToggle;
+    if (toggle === undefined || toggle === true) return true;
+    if (toggle === false) return false;
+    if (typeof toggle === "object") return toggle.enabled !== false;
+    return true;
+  });
+
+  let forcedTheme = $derived.by(() => {
+    const toggle = config?.themeToggle;
+    if (typeof toggle === "object" && toggle.enabled === false && toggle.default && toggle.default !== "system") {
+      return toggle.default;
+    }
+    return null;
+  });
+
+  let themeInitScript = $derived.by(() => {
+    if (forcedTheme) {
+      return `document.documentElement.classList.remove('light','dark');document.documentElement.classList.add('${forcedTheme}')`;
+    }
+    return [
+      "(function(){",
+      "var m=document.cookie.match(/(?:^|;\\s*)theme=(\\w+)/);",
+      "var t=m?m[1]:(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');",
+      "document.documentElement.classList.remove('light','dark');",
+      "document.documentElement.classList.add(t);",
+      "})()",
+    ].join("");
+  });
+
+  onMount(() => {
+    if (forcedTheme) {
+      document.documentElement.classList.remove("light", "dark");
+      document.documentElement.classList.add(forcedTheme);
+    }
+  });
+
   let sidebarOpen = $state(false);
   let searchOpen = $state(false);
 
@@ -82,6 +119,10 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
+<svelte:head>
+  {@html `<script>${themeInitScript}</script>`}
+</svelte:head>
+
 <div class="fd-layout">
   <!-- Mobile header -->
   <header class="fd-header">
@@ -227,7 +268,7 @@
       {/if}
     </nav>
 
-    {#if themeToggle}
+    {#if showThemeToggle}
       <div class="fd-sidebar-footer">
         <ThemeToggle />
       </div>

package/src/components/ThemeToggle.svelte

@@ -8,7 +8,14 @@
   let theme = $state("light");
 
   onMount(() => {
-    theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+    if (document.documentElement.classList.contains("dark")) {
+      theme = "dark";
+    } else if (document.documentElement.classList.contains("light")) {
+      theme = "light";
+    } else {
+      theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      document.documentElement.classList.add(theme);
+    }
   });
 
   function toggle() {