mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(theme): add note that Theme must be used with all.css

Browse source 
#1304
This commit is contained in:
Eric Liu 2022-05-16 18:23:24 -07:00
commit fa21efccb9
1 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
docs/src/pages/components/Theme.svx
View file

@ -1,9 +1,19 @@
<script> <script>
import { Theme } from "carbon-components-svelte"; import { InlineNotification, CodeSnippet } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
let code = `import "carbon-components-svelte/css/all.css";`;
</script> </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 ### Default