UI Elements

DarkToggle

A switch component for toggling between light and dark themes.

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte
<Toggle {...deps.svsToggle} bind:value={dark} bind:element>
  {#if children}
    {children}
  {:else}
    <!-- Default Icon -->
  {/if}
</Toggle>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface DarkToggleProps {
  children?: Snippet<[boolean, string, HTMLButtonElement | undefined]>; // Snippet<[value,variant,element]>
  dark?: boolean; // bindable (prefers-color-scheme)
  element?: HTMLButtonElement; // bindable
  variant?: string; // bindable (VARIANT.NEUTRAL)
  deps?: DarkToggleDeps;
}

Additional Props

  • dark - Indicates the current color theme

If dark is not specified, it defaults to the client’s the client’s prefers-color-scheme setting.

Styling

To learn more, see Styling.

Variant Management

Same as the Toggle component.

Default Class Name

svs-dark-toggle

Internal dependent components combine the parent class with their own default class names, resulting in multiple classes (e.g., svs-dark-toggle svs-toggle).

Exports

Types

TypeScript
interface DarkToggleDeps {
  svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
}
type DarkToggleReqdProps = never;
type DarkToggleBindProps = "dark" | "variant" | "element";

Others

TypeScript
const THEME = { LIGHT: "light", DARK: "dark" } as const;

// Adds theme value to the class of the root element.
// If `window` is undefined, nothing is done.
function setThemeToRoot(theme?: string)

Feature Details

Switching Custom Property Values

Clicking on this component (toggling dark) will switch the values of custom properties detect from the CSS.

Automatic Theme Property Detection

Custom properties for each theme are automatically detected when written as follows:

Stylesheet
:root { /* For Light Theme */
  --color-background: #fff;
  --color-text: #000;
  --svs-brightness: 0.7;
  --custom-property: ... ; /* Ignored unless using specified prefixes */
  font-family: ... ; /* Can be defined alongside other properties */
}
@media (prefers-color-scheme: dark) {
  :root { /* For Dark Theme */
    --color-background: #000;
    --color-text: #fff;
    --svs-brightness: 1.3;
  }
}
/* Explicit color scheme definition is also possible
@media (prefers-color-scheme: light) {
  :root {
    --color-background: #fff;
    --color-text: #000;
    --svs-brightness: 0.7;
  }
}
*/

Custom properties starts with --color- or --svs- declared in the :root pseudo-element will be automatically read. As a reminder, when configuring a light theme with :root, it should consist only of :root selectors, not including other selectors. Also, custom properties for a single theme should be described in a single declaration block. Custom properties that start with --color- or --svs- declared in the :root pseudo-element will be automatically detected. Note that when configuring a light theme with :root, it should consist only of :root selectors and not include other selectors. Additionally, custom properties for a single theme should be defined in a single declaration block.

Stylesheet
:root {
  --color-background: #fff;
}
/* This will not work as expected
:root {
  --color-text: #000;
}
*/

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

With Interactive Variant

Preset for Demo
Enter variant as you like