feat: $isDarkmode hook, theme prop on DesignTokens

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>
 ```

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);

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';

components/src/isDarkMode/index.js

@@ -0,0 +1,2 @@
+import isDarkMode from './isDarkMode.svelte.js';
+export default isDarkMode;

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>

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;