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.
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
/// <reference types="svelte" />
|
|
import type { SvelteComponentTyped } from "svelte";
|
|
|
|
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|
|
|
export interface GlobalThemeProps {
|
|
/**
|
|
* Set the current Carbon theme
|
|
* @default "white"
|
|
*/
|
|
theme?: CarbonTheme;
|
|
|
|
/**
|
|
* Customize a theme with your own tokens
|
|
* @see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme
|
|
* @default {}
|
|
*/
|
|
tokens?: { [token: string]: any };
|
|
|
|
/**
|
|
* Set to `true` to persist the theme using window.localStorage
|
|
* @default false
|
|
*/
|
|
persist?: boolean;
|
|
|
|
/**
|
|
* Specify the local storage key
|
|
* @default "theme"
|
|
*/
|
|
persistKey?: string;
|
|
|
|
/**
|
|
* Render a toggle or select dropdown to control the theme
|
|
* @default undefined
|
|
*/
|
|
render?: "toggle" | "select";
|
|
|
|
/**
|
|
* Override the default toggle props
|
|
* @default { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }
|
|
*/
|
|
toggle?: import("../Toggle/Toggle").ToggleProps & {
|
|
themes?: [labelA: CarbonTheme, labelB: CarbonTheme];
|
|
};
|
|
|
|
/**
|
|
* Override the default select props
|
|
* @default { themes: themeKeys, labelText: "Themes", hideLabel: false, }
|
|
*/
|
|
select?: import("../Select/Select").SelectProps & { themes?: CarbonTheme[] };
|
|
}
|
|
|
|
export default class GlobalTheme extends SvelteComponentTyped<
|
|
GlobalThemeProps,
|
|
{ update: CustomEvent<{ theme: CarbonTheme }> },
|
|
{ default: { theme: CarbonTheme } }
|
|
> {}
|