mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
chore: Move Theme to GlobalTheme
The reason for this is that Theme is a new v11 component that allows for inline theming. That’s a different purpose than this component has. In the standard Carbon implementation a GlobalTheme is used that matches the purpose of what this Svelte component used to do. The idea is to stick to the same name as the standard implementation.
This commit is contained in:
parent
4c5d8cd1ed
commit
c0ff8ff76a
12 changed files with 9 additions and 9 deletions
|
@ -5,10 +5,10 @@
|
||||||
let code = `import "carbon-components-svelte/css/all.css";`;
|
let code = `import "carbon-components-svelte/css/all.css";`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
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).
|
The `GlobalTheme` 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>
|
<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>
|
<div class="body-short-01">You must use the "all.css" StyleSheet with the <code>GlobalTheme</code> component.</div>
|
||||||
</InlineNotification>
|
</InlineNotification>
|
||||||
|
|
||||||
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
|
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
|
||||||
|
@ -17,40 +17,40 @@ The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-U
|
||||||
|
|
||||||
## Default
|
## Default
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/Theme" />
|
<FileSource src="/framed/GlobalTheme/GlobalTheme" />
|
||||||
|
|
||||||
## Persist locally
|
## 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).
|
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" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemePersist" />
|
||||||
|
|
||||||
## Custom theme
|
## Custom theme
|
||||||
|
|
||||||
Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values.
|
Define keys and values in the `tokens` prop that override default Carbon theme tokens. Refer to the [Carbon website](https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme) for guidance on customizing a theme using token values.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeTokens" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeTokens" />
|
||||||
|
|
||||||
## Theme toggle
|
## Theme toggle
|
||||||
|
|
||||||
Set `render` to `"toggle"` to render a toggle switch to control the theme.
|
Set `render` to `"toggle"` to render a toggle switch to control the theme.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeToggle" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeToggle" />
|
||||||
|
|
||||||
## Theme toggle (custom)
|
## Theme toggle (custom)
|
||||||
|
|
||||||
Customize the toggle using the `toggle` prop.
|
Customize the toggle using the `toggle` prop.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeToggleCustom" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeToggleCustom" />
|
||||||
|
|
||||||
## Theme select
|
## Theme select
|
||||||
|
|
||||||
Set `render` to `"select"` to render a select dropdown to control the theme.
|
Set `render` to `"select"` to render a select dropdown to control the theme.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeSelect" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeSelect" />
|
||||||
|
|
||||||
## Theme select (custom)
|
## Theme select (custom)
|
||||||
|
|
||||||
Customize the select using the `select` prop.
|
Customize the select using the `select` prop.
|
||||||
|
|
||||||
<FileSource src="/framed/Theme/ThemeSelectCustom" />
|
<FileSource src="/framed/GlobalTheme/GlobalThemeSelectCustom" />
|
Loading…
Add table
Add a link
Reference in a new issue