techniq · techniq · Jul 31, 2026 · Jul 28, 2026 · Jul 29, 2026 · Jul 29, 2026
diff --git a/.changeset/fix-tooltip-portaled-theme.md b/.changeset/fix-tooltip-portaled-theme.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Tooltip): Theme portaled tooltips in the style presets so surface colors resolve correctly (e.g. fixes a light tooltip in dark mode with Skeleton)
diff --git a/.changeset/skeleton-light-dark.md b/.changeset/skeleton-light-dark.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(skeleton): Resolve surface colors via `light-dark()` so the Skeleton presets follow `color-scheme` (the `.dark` toggle, or `prefers-color-scheme` when unpinned), and fix the surface scale collapsing to a single shade — surfaces now graduate from 100 (lightest) to 300 (darkest) in both light and dark
diff --git a/.changeset/sweet-snakes-sell.md b/.changeset/sweet-snakes-sell.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Support Skeleton 5 (skeleton-5.css)
diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
@@ -131,6 +131,9 @@ or with a single `.css` import, Layerchart [provides](https://github.com/techniq
 
     /* v4 */
     @import 'layerchart/skeleton-4.css';
+
+    /* v5 */
+    @import 'layerchart/skeleton-5.css';
     ```
     ::
 
@@ -217,6 +220,9 @@ Starter [project repos](https://github.com/techniq/layerchart/tree/next/examples
     - v4:
         :button{label="Source" href="https://github.com/techniq/layerchart/tree/docs-v2/examples/skeleton-4" size="sm" icon="lucide:github"}
         :button{label="Open in StackBlitz" href="https://stackblitz.com/github/techniq/layerchart/tree/docs-v2/examples/skeleton-4" size="sm" icon="simple-icons:stackblitz"}
+    - v5:
+        :button{label="Source" href="https://github.com/techniq/layerchart/tree/docs-v2/examples/skeleton-5" size="sm" icon="lucide:github"}
+        :button{label="Open in StackBlitz" href="https://stackblitz.com/github/techniq/layerchart/tree/docs-v2/examples/skeleton-5" size="sm" icon="simple-icons:stackblitz"}
     ::
 
     ::tab{label="Svelte UX" icon="custom-brands:svelteux"}

diff --git a/examples/daisyui-5/src/routes/+layout.svelte b/examples/daisyui-5/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ModeWatcher, theme, setTheme } from 'mode-watcher';
+	import { ModeWatcher, mode, setMode, setTheme } from 'mode-watcher';
 
 	import favicon from '$lib/assets/favicon.svg';
 	import '../app.css';
@@ -17,11 +17,16 @@
 	<div class="pb-4 text-right">
 		<input
 			type="checkbox"
-			checked={theme.current === 'dark'}
+			checked={mode.current === 'dark'}
 			class="toggle"
 			onchange={(e) => {
-				// @ts-expect-error
-				setTheme(e.target.checked ? 'dark' : 'light');
+				// daisyUI switches its palette (and `color-scheme`) via `data-theme`, so keep it in
+				// sync with mode-watcher's light/dark mode. Setting both means mode-watcher's inline
+				// `color-scheme` and daisyUI's agree, so `light-dark()` (e.g. LayerChart's Tooltip)
+				// resolves correctly. mode-watcher persists both and sets them pre-paint (no flash).
+				const theme = e.currentTarget.checked ? 'dark' : 'light';
+				setMode(theme); // `.dark` class + inline `color-scheme` (drives `light-dark()`)
+				setTheme(theme); // daisyUI `data-theme` (drives its palette)
 			}}
 		/>
 	</div>

diff --git a/examples/skeleton-4/package.json b/examples/skeleton-4/package.json
@@ -21,6 +21,7 @@
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
 		"@tailwindcss/vite": "^4.3.0",
 		"layerchart": "workspace:*",
+		"mode-watcher": "^1.1.0",
 		"prettier": "^3.8.3",
 		"prettier-plugin-svelte": "^4.1.0",
 		"prettier-plugin-tailwindcss": "^0.8.0",

diff --git a/examples/skeleton-4/src/app.html b/examples/skeleton-4/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="cerberus">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/examples/skeleton-4/src/lib/components/Lightswitch.svelte b/examples/skeleton-4/src/lib/components/Lightswitch.svelte
diff --git a/examples/skeleton-4/src/routes/+layout.svelte b/examples/skeleton-4/src/routes/+layout.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-	import '../app.css';
-	import Lightswitch from '$lib/components/Lightswitch.svelte';
+	import { Switch } from '@skeletonlabs/skeleton-svelte';
+	import { ModeWatcher, mode, setMode } from 'mode-watcher';
+
 	import favicon from '$lib/assets/favicon.svg';
+	import '../app.css';
 
 	let { children } = $props();
 </script>
@@ -10,9 +12,20 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+<ModeWatcher defaultTheme="cerberus" />
+
 <main class="p-4">
 	<div class="pb-4 text-right">
-		<Lightswitch />
+		<Switch
+			checked={mode.current === 'dark'}
+			onCheckedChange={(e) => setMode(e.checked ? 'dark' : 'light')}
+		>
+			<Switch.Control>
+				<Switch.Thumb />
+			</Switch.Control>
+			<Switch.HiddenInput />
+		</Switch>
 	</div>
-	{@render children()}
+
+	{@render children?.()}
 </main>
diff --git a/examples/skeleton-5/.gitignore b/examples/skeleton-5/.gitignore
@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/examples/skeleton-5/.npmrc b/examples/skeleton-5/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/examples/skeleton-5/.prettierignore b/examples/skeleton-5/.prettierignore
@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
diff --git a/examples/skeleton-5/.prettierrc b/examples/skeleton-5/.prettierrc
@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/app.css"
+}
diff --git a/examples/skeleton-5/README.md b/examples/skeleton-5/README.md
@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/examples/skeleton-5/package.json b/examples/skeleton-5/package.json
@@ -0,0 +1,34 @@
+{
+	"name": "skeleton4",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check ."
+	},
+	"devDependencies": {
+		"@skeletonlabs/skeleton": "^5.0.0",
+		"@skeletonlabs/skeleton-svelte": "^5.0.0",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.62.0",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tailwindcss/vite": "^4.3.0",
+		"layerchart": "workspace:*",
+		"mode-watcher": "^1.1.0",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^4.1.0",
+		"prettier-plugin-tailwindcss": "^0.8.0",
+		"svelte": "^5.56.1",
+		"svelte-check": "^4.5.0",
+		"tailwindcss": "^4.3.0",
+		"typescript": "^6.0.3",
+		"vite": "^8.0.16"
+	}
+}