Theming

Configure and control the application theme.

Overview

The <ThemeProvider /> component is the entry point of the library.
It allows you to configure the global theme behavior of your application.
All components from the library must be used inside the ThemeProvider to work correctly.

You can locally override the theme configuration in any part of your component tree using the <ThemeScope />.

ThemeProvider

Features

The <ThemeProvider /> component is used to define the global theme configuration.

It includes:

the default theme mode (system, light, dark)
the default accent color
the default border radius
the light and dark colors used for the theme meta tag
whether the default background color is applied
whether the theme loading script is injected for SSR
whether system theme changes are detected
whether CSS transitions are enabled during theme changes
custom color palettes

This provider should be placed at the root of your application.

Usage

<script>
    import { ThemeProvider } from 'svxui';

    let { children } = $props();
</script>

<ThemeProvider
    mode="system"
    color="blue"
    radius="none"
>
    <!-- The mode, radius, and color apply to all child components. -->
    {@render children?.()}
</ThemeProvider>

ThemeScope

Features

The <ThemeScope /> component allows you to locally override part of the global theme configuration for a subtree of components.

It can override:

the theme mode (system, light, dark)
the accent color
the border radius

This is useful for scoped theming, such as theming a specific page, layout, or component group differently from the rest of the application.

Usage

<script>
    import { ThemeScope, Panel } from 'svxui';
</script>

<ThemeScope color="neutral">
    <!--
    The panel and button will have a neutral color by default,
    but will inherit radius and mode from the root theme.
    -->
    <Panel>
        <Button>button</Button>
    </Panel>
</ThemeScope>

useTheme

Features

You can update default mode, color and radius with the theme context via useTheme.

Update theme

<script lang="ts">import { useTheme } from 'svxui';
const theme = useTheme();
const modes = ['system', 'light', 'dark'];
const radiuses = ['none', 'small', 'medium', 'large', 'full'];
const colors = ['neutral', 'green', 'blue', 'yellow', 'orange', 'red'];
</script>

<!-- Update mode -->
{#each modes as mode (mode)}
    <button
        class:active={theme.mode === mode}
        onclick={() => theme.setMode(mode)}
    >
        {mode}
    </button>
{/each}

<!-- Update radius -->
{#each radiuses as radius (radius)}
    <button
        class:active={theme.radius === radius}
        onclick={() => theme.setRadius(radius)}
    >
        {radius}
    </button>
{/each}

<!-- Update color -->
{#each colors as color (color)}
    <button
        class:active={theme.color === color}
        onclick={() => theme.setColor(color)}
    >
        {color}
    </button>
{/each}

API Reference

For the full props reference and type definitions, see the Theme component page.