mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
c0ff8ff76a
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.
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
/// <reference types="svelte" />
|
|
import type { SvelteComponentTyped } from "svelte";
|
|
|
|
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
|
|
|
|
export interface ThemeProps {
|
|
/**
|
|
* 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 Theme extends SvelteComponentTyped<
|
|
ThemeProps,
|
|
{ update: CustomEvent<{ theme: CarbonTheme }> },
|
|
{ default: { theme: CarbonTheme } }
|
|
> {}
|