From 20119d38ca319c4b7ee10eff4b801d61b33f853b Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 24 Sep 2025 14:04:48 +0200
Subject: [PATCH 1/3] Add , theme prop on DesignTokens

---
 components/src/DesignTokens/DesignTokens.svelte     | 12 +++++++++---
 components/src/isDarkMode/index.js                  |  2 ++
 components/src/isDarkMode/isDarkMode.stories.svelte | 10 ++++++++++
 components/src/isDarkMode/isDarkMode.svelte.js      |  6 ++++++
 4 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 components/src/isDarkMode/index.js
 create mode 100644 components/src/isDarkMode/isDarkMode.stories.svelte
 create mode 100644 components/src/isDarkMode/isDarkMode.svelte.js

diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte
index 81f4bfc7..321616b7 100644
--- a/components/src/DesignTokens/DesignTokens.svelte
+++ b/components/src/DesignTokens/DesignTokens.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { shades, semantics } from './Tokens';
+	import isDarkMode from '../isDarkMode';
 
 	interface DesignTokensProps {
+		theme?: 'light' | 'dark' | 'auto';
 		children?: Snippet;
 	}
-	let { children }: DesignTokensProps = $props();
+
+	let { theme = 'auto', children }: DesignTokensProps = $props();
+
+	let computedTheme = $derived(theme === 'auto' ? ($isDarkMode ? 'dark' : 'light') : theme);
 
 	const colours = { ...shades, ...semantics };
 	const rules = [
@@ -22,7 +27,7 @@
 	];
 </script>
 
-<div class="container" style={rules.join(';')}>
+<div class="container" style={rules.join(';')} data-theme={computedTheme}>
 	{#if children}
 		{@render children()}
 	{/if}
@@ -51,7 +56,8 @@
 		--color-logoFill: var(--logoFill-light);
 		--color-pageFill: var(--pageFill-light);
 		--color-surfaceFill: var(--surfaceFill-light);
-		@media (prefers-color-scheme: dark) {
+
+		&[data-theme='dark'] {
 			--color-logoFill: var(--logoFill-dark);
 			--color-pageFill: var(--pageFill-dark);
 			--color-surfaceFill: var(--surfaceFill-dark);
diff --git a/components/src/isDarkMode/index.js b/components/src/isDarkMode/index.js
new file mode 100644
index 00000000..7ca5c67d
--- /dev/null
+++ b/components/src/isDarkMode/index.js
@@ -0,0 +1,2 @@
+import isDarkMode from './isDarkMode.svelte.js';
+export default isDarkMode;
diff --git a/components/src/isDarkMode/isDarkMode.stories.svelte b/components/src/isDarkMode/isDarkMode.stories.svelte
new file mode 100644
index 00000000..3fc29894
--- /dev/null
+++ b/components/src/isDarkMode/isDarkMode.stories.svelte
@@ -0,0 +1,10 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import isDarkMode from './isDarkMode.svelte.js';
+
+	const { Story } = defineMeta({
+		title: 'Meta/isDarkMode'
+	});
+</script>
+
+<Story name="Basic" asChild>{JSON.stringify($isDarkMode)}</Story>
diff --git a/components/src/isDarkMode/isDarkMode.svelte.js b/components/src/isDarkMode/isDarkMode.svelte.js
new file mode 100644
index 00000000..504c1a1a
--- /dev/null
+++ b/components/src/isDarkMode/isDarkMode.svelte.js
@@ -0,0 +1,6 @@
+import { MediaQuery } from 'svelte/reactivity';
+import { readable } from 'svelte/store';
+
+const dm = new MediaQuery('prefers-color-scheme: dark', false);
+const isDarkMode = readable(dm.current);
+export default isDarkMode;

From 56d20db3a0aab69e5cb97375fe0ef8abd968a106 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 24 Sep 2025 14:10:58 +0200
Subject: [PATCH 2/3] Improve docs

---
 components/src/DesignTokens/DesignTokens.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/src/DesignTokens/DesignTokens.mdx b/components/src/DesignTokens/DesignTokens.mdx
index 16126e9b..794da0c6 100644
--- a/components/src/DesignTokens/DesignTokens.mdx
+++ b/components/src/DesignTokens/DesignTokens.mdx
@@ -36,20 +36,20 @@ import * as NoteStories from '../Note/Note.stories.svelte';
 
 ### Web
 
-The `<DesignTokens>` component makes colours, type sizes and other design tokens available to its children as CSS variables.
+The `<DesignTokens>` component makes colours, type sizes and other design tokens available to its children as CSS variables. Set the `theme` prop to `light` or `dark` to yield light and dark semantic colours or `auto` to follow the user's preference.
 
 ```html
 <script>
 	import DesignTokens from '@swr-data-lab/components';
 </script>
 
-<DesignTokens>
+<DesignTokens theme="auto">
 	<p>I'm a sample paragraph</p>
 </DesignTokens>
 
 <style>
 	p {
-	  color: var(--violet-dark-1); // this works
+	  color: var(--colours-textPrimary); // this works
 	}
 </style>
 ```

From 40e8866f672a983d7f33ebe73b2a5fda2219f643 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Wed, 24 Sep 2025 14:15:41 +0200
Subject: [PATCH 3/3] Add export

---
 components/src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/src/index.js b/components/src/index.js
index c763249a..e4fafdeb 100644
--- a/components/src/index.js
+++ b/components/src/index.js
@@ -1,6 +1,7 @@
 // Design Tokens
 export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
 export { tokens as tokens } from './DesignTokens/index.js';
+export { default as isDarkMode } from './isDarkMode/isDarkMode.svelte';
 
 // Typography
 export { default as Headline } from './Headline/Headline.svelte';