Skip to content
silver-uisilver-ui

Theme

Scoped Silver UI theme provider backed by CSS custom properties.

Examples

Section titled “Examples”

Default

Section titled “Default”
Workspace settings

A scoped theme updates Silver UI tokens for every component below.

Preview
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
function ThemePreview({
  children,
}: {
  children: React.ReactNode;
}): React.JSX.Element {
  return (
    <div
      style={{
        background: 'var(--silver-colors-bg-subtle)',
        borderRadius: 'var(--silver-radii-component-lg)',
        padding: 24,
      }}>
      {children}
    </div>
  );
}


function ComponentPreview({
  previewBadgeColor = 'info',
}: {
  previewBadgeColor?: BadgeColor;
}): React.JSX.Element {
  return (
    <Card
      padding={5}
      style={{
        background: 'var(--silver-colors-bg)',
        maxWidth: 760,
      }}>
      <VStack gap={5}>
        <HStack align="start" gap={4} justify="between" wrap="wrap">
          <VStack gap={1}>
            <Text as="div" type="large" weight="semibold">
              Workspace settings
            </Text>
            <Text as="p" color="secondary" type="body">
              A scoped theme updates Silver UI tokens for every component below.
            </Text>
          </VStack>
          <Badge color={previewBadgeColor} label="Preview" size="lg" />
        </HStack>


        <Alert
          description="Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens."
          status="info"
          title="Theme preview"
        />


        <HStack align="start" gap={4} wrap="wrap">
          <TextInput
            hasClear
            label="Project"
            onChange={() => {}}
            placeholder="Search projects"
            startIcon={Search}
            value="Apollo"
          />
          <TextInput
            label="Owner"
            onChange={() => {}}
            placeholder="Owner"
            value="Ada Lovelace"
          />
        </HStack>


        <HStack gap={2} wrap="wrap">
          <Badge color="neutral" label="Neutral" />
          <Badge color="success" label="Ready" />
          <Badge color="warning" label="Review" />
          <Badge color="error" label="Blocked" />
        </HStack>


        <Switch
          description="Use themed semantic tokens for interactive controls."
          isSelected
          label="Notifications"
          labelIcon={Bell}
          onChange={() => {}}
        />


        <HStack gap={3}>
          <Button label="Save changes" variant="primary" />
          <Button label="Cancel" variant="secondary" />
          <Button label="Delete" variant="destructive" />
        </HStack>
      </VStack>
    </Card>
  );
}


<Theme {...args}>
  <ThemePreview>
    <ComponentPreview />
  </ThemePreview>
</Theme>

Primary Color

Section titled “Primary Color”
Workspace settings

A scoped theme updates Silver UI tokens for every component below.

Preview
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
function ThemePreview({
  children,
}: {
  children: React.ReactNode;
}): React.JSX.Element {
  return (
    <div
      style={{
        background: 'var(--silver-colors-bg-subtle)',
        borderRadius: 'var(--silver-radii-component-lg)',
        padding: 24,
      }}>
      {children}
    </div>
  );
}


function ComponentPreview({
  previewBadgeColor = 'info',
}: {
  previewBadgeColor?: BadgeColor;
}): React.JSX.Element {
  return (
    <Card
      padding={5}
      style={{
        background: 'var(--silver-colors-bg)',
        maxWidth: 760,
      }}>
      <VStack gap={5}>
        <HStack align="start" gap={4} justify="between" wrap="wrap">
          <VStack gap={1}>
            <Text as="div" type="large" weight="semibold">
              Workspace settings
            </Text>
            <Text as="p" color="secondary" type="body">
              A scoped theme updates Silver UI tokens for every component below.
            </Text>
          </VStack>
          <Badge color={previewBadgeColor} label="Preview" size="lg" />
        </HStack>


        <Alert
          description="Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens."
          status="info"
          title="Theme preview"
        />


        <HStack align="start" gap={4} wrap="wrap">
          <TextInput
            hasClear
            label="Project"
            onChange={() => {}}
            placeholder="Search projects"
            startIcon={Search}
            value="Apollo"
          />
          <TextInput
            label="Owner"
            onChange={() => {}}
            placeholder="Owner"
            value="Ada Lovelace"
          />
        </HStack>


        <HStack gap={2} wrap="wrap">
          <Badge color="neutral" label="Neutral" />
          <Badge color="success" label="Ready" />
          <Badge color="warning" label="Review" />
          <Badge color="error" label="Blocked" />
        </HStack>


        <Switch
          description="Use themed semantic tokens for interactive controls."
          isSelected
          label="Notifications"
          labelIcon={Bell}
          onChange={() => {}}
        />


        <HStack gap={3}>
          <Button label="Save changes" variant="primary" />
          <Button label="Cancel" variant="secondary" />
          <Button label="Delete" variant="destructive" />
        </HStack>
      </VStack>
    </Card>
  );
}


<Theme
  tokens={{
    colors: {
      primary: 'purple-500',
      primaryActive: 'purple-700',
      primaryHover: 'purple-600',
      primarySubtle: 'purple-100',
    },
  }}>
  <ThemePreview>
    <ComponentPreview />
  </ThemePreview>
</Theme>

Neutral Theme

Section titled “Neutral Theme”
Workspace settings

A scoped theme updates Silver UI tokens for every component below.

Preview
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
function ThemePreview({
  children,
}: {
  children: React.ReactNode;
}): React.JSX.Element {
  return (
    <div
      style={{
        background: 'var(--silver-colors-bg-subtle)',
        borderRadius: 'var(--silver-radii-component-lg)',
        padding: 24,
      }}>
      {children}
    </div>
  );
}


function ComponentPreview({
  previewBadgeColor = 'info',
}: {
  previewBadgeColor?: BadgeColor;
}): React.JSX.Element {
  return (
    <Card
      padding={5}
      style={{
        background: 'var(--silver-colors-bg)',
        maxWidth: 760,
      }}>
      <VStack gap={5}>
        <HStack align="start" gap={4} justify="between" wrap="wrap">
          <VStack gap={1}>
            <Text as="div" type="large" weight="semibold">
              Workspace settings
            </Text>
            <Text as="p" color="secondary" type="body">
              A scoped theme updates Silver UI tokens for every component below.
            </Text>
          </VStack>
          <Badge color={previewBadgeColor} label="Preview" size="lg" />
        </HStack>


        <Alert
          description="Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens."
          status="info"
          title="Theme preview"
        />


        <HStack align="start" gap={4} wrap="wrap">
          <TextInput
            hasClear
            label="Project"
            onChange={() => {}}
            placeholder="Search projects"
            startIcon={Search}
            value="Apollo"
          />
          <TextInput
            label="Owner"
            onChange={() => {}}
            placeholder="Owner"
            value="Ada Lovelace"
          />
        </HStack>


        <HStack gap={2} wrap="wrap">
          <Badge color="neutral" label="Neutral" />
          <Badge color="success" label="Ready" />
          <Badge color="warning" label="Review" />
          <Badge color="error" label="Blocked" />
        </HStack>


        <Switch
          description="Use themed semantic tokens for interactive controls."
          isSelected
          label="Notifications"
          labelIcon={Bell}
          onChange={() => {}}
        />


        <HStack gap={3}>
          <Button label="Save changes" variant="primary" />
          <Button label="Cancel" variant="secondary" />
          <Button label="Delete" variant="destructive" />
        </HStack>
      </VStack>
    </Card>
  );
}


<Theme themes={neutralTheme.themes}>
  <ThemePreview>
    <ComponentPreview previewBadgeColor="neutral" />
  </ThemePreview>
</Theme>

Material Theme

Section titled “Material Theme”
Workspace settings

A scoped theme updates Silver UI tokens for every component below.

Preview
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
function ThemePreview({
  children,
}: {
  children: React.ReactNode;
}): React.JSX.Element {
  return (
    <div
      style={{
        background: 'var(--silver-colors-bg-subtle)',
        borderRadius: 'var(--silver-radii-component-lg)',
        padding: 24,
      }}>
      {children}
    </div>
  );
}


function ComponentPreview({
  previewBadgeColor = 'info',
}: {
  previewBadgeColor?: BadgeColor;
}): React.JSX.Element {
  return (
    <Card
      padding={5}
      style={{
        background: 'var(--silver-colors-bg)',
        maxWidth: 760,
      }}>
      <VStack gap={5}>
        <HStack align="start" gap={4} justify="between" wrap="wrap">
          <VStack gap={1}>
            <Text as="div" type="large" weight="semibold">
              Workspace settings
            </Text>
            <Text as="p" color="secondary" type="body">
              A scoped theme updates Silver UI tokens for every component below.
            </Text>
          </VStack>
          <Badge color={previewBadgeColor} label="Preview" size="lg" />
        </HStack>


        <Alert
          description="Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens."
          status="info"
          title="Theme preview"
        />


        <HStack align="start" gap={4} wrap="wrap">
          <TextInput
            hasClear
            label="Project"
            onChange={() => {}}
            placeholder="Search projects"
            startIcon={Search}
            value="Apollo"
          />
          <TextInput
            label="Owner"
            onChange={() => {}}
            placeholder="Owner"
            value="Ada Lovelace"
          />
        </HStack>


        <HStack gap={2} wrap="wrap">
          <Badge color="neutral" label="Neutral" />
          <Badge color="success" label="Ready" />
          <Badge color="warning" label="Review" />
          <Badge color="error" label="Blocked" />
        </HStack>


        <Switch
          description="Use themed semantic tokens for interactive controls."
          isSelected
          label="Notifications"
          labelIcon={Bell}
          onChange={() => {}}
        />


        <HStack gap={3}>
          <Button label="Save changes" variant="primary" />
          <Button label="Cancel" variant="secondary" />
          <Button label="Delete" variant="destructive" />
        </HStack>
      </VStack>
    </Card>
  );
}


<Theme themes={materialTheme.themes}>
  <ThemePreview>
    <ComponentPreview />
  </ThemePreview>
</Theme>

Nord Theme

Section titled “Nord Theme”
Workspace settings

A scoped theme updates Silver UI tokens for every component below.

Preview
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
function ThemePreview({
  children,
}: {
  children: React.ReactNode;
}): React.JSX.Element {
  return (
    <div
      style={{
        background: 'var(--silver-colors-bg-subtle)',
        borderRadius: 'var(--silver-radii-component-lg)',
        padding: 24,
      }}>
      {children}
    </div>
  );
}


function ComponentPreview({
  previewBadgeColor = 'info',
}: {
  previewBadgeColor?: BadgeColor;
}): React.JSX.Element {
  return (
    <Card
      padding={5}
      style={{
        background: 'var(--silver-colors-bg)',
        maxWidth: 760,
      }}>
      <VStack gap={5}>
        <HStack align="start" gap={4} justify="between" wrap="wrap">
          <VStack gap={1}>
            <Text as="div" type="large" weight="semibold">
              Workspace settings
            </Text>
            <Text as="p" color="secondary" type="body">
              A scoped theme updates Silver UI tokens for every component below.
            </Text>
          </VStack>
          <Badge color={previewBadgeColor} label="Preview" size="lg" />
        </HStack>


        <Alert
          description="Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens."
          status="info"
          title="Theme preview"
        />


        <HStack align="start" gap={4} wrap="wrap">
          <TextInput
            hasClear
            label="Project"
            onChange={() => {}}
            placeholder="Search projects"
            startIcon={Search}
            value="Apollo"
          />
          <TextInput
            label="Owner"
            onChange={() => {}}
            placeholder="Owner"
            value="Ada Lovelace"
          />
        </HStack>


        <HStack gap={2} wrap="wrap">
          <Badge color="neutral" label="Neutral" />
          <Badge color="success" label="Ready" />
          <Badge color="warning" label="Review" />
          <Badge color="error" label="Blocked" />
        </HStack>


        <Switch
          description="Use themed semantic tokens for interactive controls."
          isSelected
          label="Notifications"
          labelIcon={Bell}
          onChange={() => {}}
        />


        <HStack gap={3}>
          <Button label="Save changes" variant="primary" />
          <Button label="Cancel" variant="secondary" />
          <Button label="Delete" variant="destructive" />
        </HStack>
      </VStack>
    </Card>
  );
}


<Theme themes={nordTheme.themes}>
  <ThemePreview>
    <ComponentPreview />
  </ThemePreview>
</Theme>

Solarized Theme

Section titled “Solarized Theme”
Workspace settings

A scoped theme updates Silver UI tokens for every component below.

Preview
Theme preview
Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens.
NeutralReadyReviewBlocked
Use themed semantic tokens for interactive controls.
function ThemePreview({
  children,
}: {
  children: React.ReactNode;
}): React.JSX.Element {
  return (
    <div
      style={{
        background: 'var(--silver-colors-bg-subtle)',
        borderRadius: 'var(--silver-radii-component-lg)',
        padding: 24,
      }}>
      {children}
    </div>
  );
}


function ComponentPreview({
  previewBadgeColor = 'info',
}: {
  previewBadgeColor?: BadgeColor;
}): React.JSX.Element {
  return (
    <Card
      padding={5}
      style={{
        background: 'var(--silver-colors-bg)',
        maxWidth: 760,
      }}>
      <VStack gap={5}>
        <HStack align="start" gap={4} justify="between" wrap="wrap">
          <VStack gap={1}>
            <Text as="div" type="large" weight="semibold">
              Workspace settings
            </Text>
            <Text as="p" color="secondary" type="body">
              A scoped theme updates Silver UI tokens for every component below.
            </Text>
          </VStack>
          <Badge color={previewBadgeColor} label="Preview" size="lg" />
        </HStack>


        <Alert
          description="Alerts, buttons, inputs, badges, and toggles all resolve through semantic tokens."
          status="info"
          title="Theme preview"
        />


        <HStack align="start" gap={4} wrap="wrap">
          <TextInput
            hasClear
            label="Project"
            onChange={() => {}}
            placeholder="Search projects"
            startIcon={Search}
            value="Apollo"
          />
          <TextInput
            label="Owner"
            onChange={() => {}}
            placeholder="Owner"
            value="Ada Lovelace"
          />
        </HStack>


        <HStack gap={2} wrap="wrap">
          <Badge color="neutral" label="Neutral" />
          <Badge color="success" label="Ready" />
          <Badge color="warning" label="Review" />
          <Badge color="error" label="Blocked" />
        </HStack>


        <Switch
          description="Use themed semantic tokens for interactive controls."
          isSelected
          label="Notifications"
          labelIcon={Bell}
          onChange={() => {}}
        />


        <HStack gap={3}>
          <Button label="Save changes" variant="primary" />
          <Button label="Cancel" variant="secondary" />
          <Button label="Delete" variant="destructive" />
        </HStack>
      </VStack>
    </Card>
  );
}


<Theme themes={solarizedTheme.themes}>
  <ThemePreview>
    <ComponentPreview />
  </ThemePreview>
</Theme>

API

Section titled “API”

Theme

Section titled “Theme”

Scoped Silver UI theme provider backed by CSS custom properties.

PropTypeDefaultDescription
asElementType'div'HTML element type to render.
childrenReactNode—Theme content.
data-testidstring—Test ID applied to the root element.
mode"system" | "dark" | "light"'system'Theme mode. 'system' follows the OS prefers-color-scheme (rendering data-theme="system"), while 'light' / 'dark' pin the theme explicitly and always win over the OS preference.
refRef<HTMLElement>—Ref forwarded to the root element.
themesThemeModeTokens—Friendly token overrides mapped to Silver CSS custom properties.
tokensThemeTokens—Friendly token overrides applied in every mode.