From fa21efccb9e38c74362f4955e7be1139c08229de Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 16 May 2022 18:23:24 -0700
Subject: [PATCH] docs(theme): add note that `Theme` must be used with
 `all.css`

#1304
---
 docs/src/pages/components/Theme.svx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/Theme.svx b/docs/src/pages/components/Theme.svx
index 395e077f..d0cdc66f 100644
--- a/docs/src/pages/components/Theme.svx
+++ b/docs/src/pages/components/Theme.svx
@@ -1,9 +1,19 @@
 <script>
-  import { Theme } from "carbon-components-svelte";
+  import { InlineNotification, CodeSnippet } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
+
+  let code = `import "carbon-components-svelte/css/all.css";`;
 </script>
 
-This utility component dynamically updates the Carbon theme on the client-side using CSS variables.
+The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).
+
+<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">You must use the "all.css" StyleSheet with the <code>Theme</code> component.</div>
+</InlineNotification>
+
+The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
+  
+<CodeSnippet svx-ignore {code} />
 
 ### Default