feat(theme): add Theme (#741)

* feat(theme): add Theme

* fix(theme): fix broken type test

* docs(theme): add examples

* docs(theme): add description, update carbon theme link [ci skip]

* docs: pre-wrap type code snippet [ci skip]

types/Theme/Theme.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="svelte" />
+import { 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
+   * 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
+   */
+  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 } }
+> {}

types/index.d.ts

@@ -129,6 +129,7 @@ export { default as TextAreaSkeleton } from "./TextArea/TextAreaSkeleton";
 export { default as TextInput } from "./TextInput/TextInput";
 export { default as TextInputSkeleton } from "./TextInput/TextInputSkeleton";
 export { default as PasswordInput } from "./TextInput/PasswordInput";
+export { default as Theme } from "./Theme/Theme";
 export { default as Tile } from "./Tile/Tile";
 export { default as ClickableTile } from "./Tile/ClickableTile";
 export { default as ExpandableTile } from "./Tile/ExpandableTile";