mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
67271b94e7
Carbon Design System provides the idea of [inline theming](https://carbondesignsystem.com/guidelines/color/implementation/#how-inline-theming-works). As was mentioned in #1648 the Carbon standard implementation is [documented here](https://react.carbondesignsystem.com/?path=/docs/components-theme--playground). It says: > The `GlobalTheme` and `Theme` components allow you to specify the theme for a page, or for a part of a page, respectively. `Theme` is most often used to implement inline theming where you can style a portion of your page with a particular theme. What this means for `carbon-components-svelte` is that we should rename the existing `Theme` component to `GlobalTheme`. This leads us a tiny bit closer to [feature parity with Carbon v11](https://github.com/carbon-design-system/carbon-components-svelte/discussions/1614) and gives room for a new component dedicated to v11 inline theming.
24 lines
510 B
Svelte
24 lines
510 B
Svelte
<script lang="ts">
|
|
import { GlobalTheme } from "../types";
|
|
import type { CarbonTheme } from "../types/GlobalTheme/GlobalTheme.svelte";
|
|
|
|
let theme: CarbonTheme = "g10";
|
|
</script>
|
|
|
|
<GlobalTheme
|
|
bind:theme
|
|
persist
|
|
persistKey="carbon-theme"
|
|
on:update="{(e) => console.log(e.detail.theme)}"
|
|
tokens="{{ 'button-primary': 'violet' }}"
|
|
render="toggle"
|
|
toggle="{{
|
|
themes: ['g10', 'g90'],
|
|
labelA: '',
|
|
labelB: '',
|
|
}}"
|
|
select="{{
|
|
themes: ['g10', 'g90'],
|
|
labelText: '',
|
|
}}"
|
|
/>
|