feat(DevContainer): Support dark mode (#243)

* Add theme prop
* Default to light theme for backwards compatibility
* Iterate docs

Author: awesomephant

components/src/ChartList/ChartList.mdx

@@ -6,7 +6,7 @@ import * as ChartListStories from './ChartList.stories.svelte';
 
 # ChartList
 
-Utility component for displaying a list of charts with associated embed URLs during development, typically at the `/` route of your Svelte project.
+**Development-only** utility component for displaying a list of charts with associated embed, typically at the `/` route of your Svelte project.
 
 - `charts` is a list of `ChartSpec` objects of the following shape:
 
@@ -19,6 +19,28 @@ Utility component for displaying a list of charts with associated embed URLs dur
 
 - `project` is a string of the shape `<Project Number>: <Project Title>`.
 
+## Usage
+
+In your `+page.svelte`:
+
+```js
+<script>
+  import { ChartList, DesignTokens } from '@swr-data-lab/components';
+
+  const baseUrl = 'https://static.datenhub.net/apps/p110_wald-klimawandel/main';
+  const charts = [
+    { title: 'Baden-Württemberg Loosers', slug: 'bw-loosers' },
+    { title: 'Baden-Württemberg Winners', slug: 'bw-winners' },
+    { title: 'Rheinland-Pfalz Loosers', slug: 'rp-loosers' },
+    { title: 'Rheinland-Pfalz Winners', slug: 'rp-winners' }
+  ];
+</script>
+
+<DesignTokens>
+  <ChartList {baseUrl} {charts} project="p110: Wie sieht der Wald von morgen aus?" />
+</DesignTokens>
+```
+
 <Stories />
 
 <Controls />

components/src/DevContainer/DevContainer.mdx

@@ -6,26 +6,28 @@ import * as DevContainerStories from './DevContainer.stories.svelte';
 
 # DevContainer
 
-Development fixture for simulating the grid system and various UI features on [SWR.de](https://www.swr.de). Particularly useful for developing charts using the [breakout component](?path=/docs/layout-breakout--docs). 
+**Development-only** fixture for simulating the grid system and various UI features on [SWR.de](https://www.swr.de). Particularly useful for developing charts using the [breakout component](?path=/docs/layout-breakout--docs).
 
 <Story of={DevContainerStories.NoPlayer} />
 
 <Controls />
 
 ## Usage
 
+In your `+page.svelte`:
+
 ```jsx
 <script lang='ts'>
   import { dev } from '$app/environment';
-  import DevContainer from '@swr-data-lab/components';
+  import { DevContainer } from '@swr-data-lab/components';
   import App from '$lib/App.svelte';
 </script>
 
 {#if dev}
-  <DevContainer>
+  <DevContainer theme="light" showGrid>
     <App />
   </DevContainer>
 {:else}
   <p123-your-custom-element></p123-your-custom-element>
 {/if}
-```
+```

components/src/DevContainer/DevContainer.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+
 	import SwrLogo from './SwrLogo.svg.svelte';
 	import GridInspector from './GridInspector.svelte';
-	import Copy from '../Copy/Copy.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import { text } from '@sveltejs/kit';
+	import Copy from '../Copy/Copy.svelte';
 
 	interface DevContainerProps {
+		theme: 'light' | 'dark' | 'auto';
 		showHeader?: boolean;
 		showNav?: boolean;
 		showPlayer?: boolean;
@@ -21,6 +22,7 @@
 		children?: Snippet;
 	}
 	let {
+		theme = 'light',
 		showHeader = true,
 		showNav = true,
 		showArticleHeader = true,
@@ -39,8 +41,13 @@
 	let articleEl: HTMLElement | undefined = $state();
 </script>
 
-<DesignTokens>
-	<div class="container">
+<DesignTokens {theme}>
+	<div
+		class="container"
+		style={theme === 'light'
+			? '--blue: hsl(221, 75%, 46%); --blue-light: hsl(221, 100%, 95%)'
+			: '--blue: hsl(220, 22%, 51%); --blue-light: hsl(219, 22%, 18%)'}
+	>
 		{#if showHeader}
 			<header>
 				<div class="header-inner">
@@ -144,9 +151,8 @@
 		display: block;
 	}
 	.container {
-		--blue: hsl(221, 75%, 46%);
-		--blue-light: hsl(221, 100%, 95%);
 		color: var(--blue);
+		background: var(--color-pageFill);
 		font-family: 'SWR-VAR-Sans', sans-serif;
 	}
 	header {