Pricing

ColorSchemeButton

Figma Source code

Switch between light and dark themes with an icon that reflects the current scheme.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use ColorSchemeButton to switch between light and dark schemes. New code uses this name; ThemeButton remains a compatibility export. Use StyleButton for design-style switching.

  • Synchronize the scheme with bind:scheme or onSchemeChange. defaultScheme supplies the initial scheme.

  • It updates the document theme by default. Set applyToDocument=false for local control. Without children it uses an icon-only layout.

Import

import { ColorSchemeButton } from '@snowui-design-system/components';

Usage

Variants

API Reference

Property Type Default Example Description
scheme ColorScheme — scheme={value} Current color scheme; supports bind:scheme. Takes priority over defaultScheme on mount. A click updates it, and it also follows root-attribute changes while document synchronization is active.
defaultScheme ColorScheme — defaultScheme={value} Initial uncontrolled scheme on mount; scheme takes priority. If neither is set, reads the page root. With applyToDocument=false, falls back to light.
applyToDocument boolean true applyToDocument Synchronize current state to document.documentElement with theme="dark", removing theme for light. false disables reading, writing, and observing that page attribute; the caller owns the theme target. Does not write storage.
ariaLabel string — ariaLabel="Example" Override the accessible Button name. By default, describes the state that clicking will switch to and follows LocaleProvider.
lightIcon Snippet — (built-in graphic) lightIcon={lightIconContent} Replace the Sun icon shown while the current scheme is light. Changes graphics only, not switching logic.
darkIcon Snippet — (built-in graphic) darkIcon={darkIconContent} Replace the Moon icon shown while the current scheme is dark. Changes graphics only, not switching logic.
children Snippet — <ColorSchemeButton>Content</ColorSchemeButton> Custom content after the state icon. Without it, the host Button uses iconOnly layout automatically.
disabled boolean false disabled Disable the Button action without preventing synchronization of an external binding or page attribute.
onSchemeChange (scheme: ColorScheme) => void — onSchemeChange={(value) => { /* handle value */ }} Receive the new value after a user click. Initialization, external assignments, and observed page-attribute changes do not call it.
onclick (event: MouseEvent) => void — onclick={(value) => { /* handle value */ }} Called before the state switches on a valid click. In the current implementation, preventDefault() does not cancel the subsequent switch. Not called when disabled.