diff --git a/docs/src/pages/components/Theme.svx b/docs/src/pages/components/Theme.svx
index 0bd2cd49..87732a3b 100644
--- a/docs/src/pages/components/Theme.svx
+++ b/docs/src/pages/components/Theme.svx
@@ -5,4 +5,40 @@
 
 ### Default
 
-<FileSource src="/framed/Theme/Theme" />
\ No newline at end of file
+<FileSource src="/framed/Theme/Theme" />
+
+### Persist locally
+
+Set `persist` to `true` to persist the theme locally using the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+
+<FileSource src="/framed/Theme/ThemePersist" />
+
+### Custom theme
+
+Define keys and values in the `tokens` prop that override default Carbon theme tokens.
+
+<FileSource src="/framed/Theme/ThemeTokens" />
+
+### Theme toggle
+
+Set `render` to `"toggle"` to render a toggle switch to control the theme.
+
+<FileSource src="/framed/Theme/ThemeToggle" />
+
+### Theme toggle (custom)
+
+Customize the toggle using the `toggle` prop.
+
+<FileSource src="/framed/Theme/ThemeToggleCustom" />
+
+### Theme select
+
+Set `render` to `"select"` to render a select dropdown to control the theme.
+
+<FileSource src="/framed/Theme/ThemeSelect" />
+
+### Theme select (custom)
+
+Customize the select using the `select` prop.
+
+<FileSource src="/framed/Theme/ThemeSelectCustom" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/Theme/Theme.svelte b/docs/src/pages/framed/Theme/Theme.svelte
index 65ebba93..b99cb540 100644
--- a/docs/src/pages/framed/Theme/Theme.svelte
+++ b/docs/src/pages/framed/Theme/Theme.svelte
@@ -1,5 +1,17 @@
 <script>
-  import { Theme } from "carbon-components-svelte";
+  import {
+    Theme,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+
+  let theme = "g90";
 </script>
 
-<Theme theme="g90" />
+<Theme bind:theme />
+
+<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+  {#each ["white", "g10", "g80", "g90", "g100"] as value}
+    <RadioButton labelText="{value}" value="{value}" />
+  {/each}
+</RadioButtonGroup>
diff --git a/docs/src/pages/framed/Theme/ThemePersist.svelte b/docs/src/pages/framed/Theme/ThemePersist.svelte
index e69de29b..bd43a91a 100644
--- a/docs/src/pages/framed/Theme/ThemePersist.svelte
+++ b/docs/src/pages/framed/Theme/ThemePersist.svelte
@@ -0,0 +1,17 @@
+<script>
+  import {
+    Theme,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+
+  let theme = "g90";
+</script>
+
+<Theme bind:theme persist persistKey="__carbon-theme" />
+
+<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}">
+  {#each ["white", "g10", "g80", "g90", "g100"] as value}
+    <RadioButton labelText="{value}" value="{value}" />
+  {/each}
+</RadioButtonGroup>
diff --git a/docs/src/pages/framed/Theme/ThemeSelect.svelte b/docs/src/pages/framed/Theme/ThemeSelect.svelte
index e69de29b..3d967526 100644
--- a/docs/src/pages/framed/Theme/ThemeSelect.svelte
+++ b/docs/src/pages/framed/Theme/ThemeSelect.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+</script>
+
+<Theme render="select" />
diff --git a/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte b/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte
index e69de29b..0a8ad4b1 100644
--- a/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte
+++ b/docs/src/pages/framed/Theme/ThemeSelectCustom.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+</script>
+
+<Theme
+  render="select"
+  select="{{
+    themes: ['white', 'g90', 'g100'],
+    labelText: 'Select a theme',
+    inline: true,
+  }}"
+/>
diff --git a/docs/src/pages/framed/Theme/ThemeToggle.svelte b/docs/src/pages/framed/Theme/ThemeToggle.svelte
index e69de29b..f1020cff 100644
--- a/docs/src/pages/framed/Theme/ThemeToggle.svelte
+++ b/docs/src/pages/framed/Theme/ThemeToggle.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+</script>
+
+<Theme render="toggle" />
diff --git a/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte b/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
index e69de29b..635bd7b3 100644
--- a/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
+++ b/docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { Theme } from "carbon-components-svelte";
+</script>
+
+<Theme
+  render="toggle"
+  toggle="{{
+    themes: ['g10', 'g80'],
+    labelA: 'Enable dark mode',
+    labelB: 'Enable dark mode',
+    hideLabel: true,
+    size: 'sm',
+  }}"
+/>
diff --git a/docs/src/pages/framed/Theme/ThemeTokens.svelte b/docs/src/pages/framed/Theme/ThemeTokens.svelte
index fb8f011e..3a2b1d2f 100644
--- a/docs/src/pages/framed/Theme/ThemeTokens.svelte
+++ b/docs/src/pages/framed/Theme/ThemeTokens.svelte
@@ -2,6 +2,13 @@
   import { Theme, Button } from "carbon-components-svelte";
 </script>
 
-<Theme theme="g90" tokens="{{ 'button-primary': 'violet' }}" />
+<Theme
+  theme="g90"
+  tokens="{{
+    'interactive-01': '#d02670',
+    'hover-primary': '#ee5396',
+    'active-primary': '#9f1853',
+  }}"
+/>
 
 <Button>Primary button</Button>