Web Components

@theme-kit/web

No buildCustom elements

Framework-free theming for any HTML page — no build step required.

Installation

Install the package for your framework alongside @theme-kit/core.

bash

pnpm add @theme-kit/web

Quick Start

Start from scratch — install the package, then wrap your app in the provider at the entry point shown below.

index.html

html

1<script type="module">
2  import { defineCustomElements } from "@theme-kit/web";
3  defineCustomElements();
4</script>
5
6<theme-kit-provider default-theme="light">
7  <my-app></my-app>
8</theme-kit-provider>

Every integration re-exports the full @theme-kit/core surface, so history, batching, snapshots, packs and lifecycle work the same way across frameworks.

Implementation

Read and update theme state from any component using the framework-native primitives below.

index.html

html

1<script type="module">
2  import { defineCustomElements } from "@theme-kit/web";
3  defineCustomElements();
4</script>
5
6<theme-kit-provider>
7  <theme-kit-toggle></theme-kit-toggle>
8  <theme-kit-select></theme-kit-select>
9</theme-kit-provider>

What's Available

@theme-kit/web ships 10 exports in 5 categories. Everything below is also documented in the full API reference. Click any export to reveal what it does and how to use it.

Setup

—

Elements

—

Adapters

—

Transition

—

Imperative

—

Use Cases

The important features in practice — copy any of these straight into your app.

Define the elements

One call registers every theme-kit custom element.

Define the elements

import { defineCustomElements } from "@theme-kit/web";
defineCustomElements();

Provider + toggle + select

Compose the elements in plain HTML — no framework required.

Provider + toggle + select

html

<theme-kit-provider themes='[{ "name": "sunrise-light" }]' default-theme="light">
  <theme-kit-toggle></theme-kit-toggle>
  <theme-kit-select></theme-kit-select>
</theme-kit-provider>

Scope a subtree

theme-kit-scope applies a theme to its children.

Scope a subtree

html

<theme-kit-scope theme="forest">
  <section>Always forest here</section>
</theme-kit-scope>

Imperative runtime access

Grab the runtime and drive it from any script.

Imperative runtime access

1import { getProviderRuntime } from "@theme-kit/web";
2
3const runtime = getProviderRuntime();
4runtime.selection.setMode("dark");
5runtime.update({ colors: { primary: "#6366f1" } });
6console.log(runtime.store.get().name);

Smooth theme transitions

Enable CSS transitions on theme changes for a polished user experience.

Smooth theme transitions

html

1<theme-kit-provider
2  themes="..."
3  default-theme="light"
4  transition='{"enabled": true, "duration": 300, "easing": "ease-in-out"}'
5>
6  <my-app></my-app>
7</theme-kit-provider>

More Examples

Scoped theming, history controls, and framework-specific patterns.

scope + selects

html

1<script type="module">
2  import { defineCustomElements } from "@theme-kit/web";
3  defineCustomElements();
4</script>
5
6<theme-kit-provider default-theme="light">
7  <theme-kit-select type="mode"></theme-kit-select>
8  <theme-kit-select type="family"></theme-kit-select>
9
10  <theme-kit-scope theme="plum">
11    <p>This region is always themed "plum".</p>
12  </theme-kit-scope>
13</theme-kit-provider>

API Reference

Setup

Export	Description
`defineCustomElements()`	Registers every `<theme-kit-*>` custom element.

Elements

Export	Description
`<theme-kit-provider>`	Root runtime provider for a page or subtree.
`<theme-kit-scope>`	Scoped theming via the `theme` attribute.
`<theme-kit-toggle>`	Light/dark toggle button.
`<theme-kit-select>`	Family / mode selector.

Adapters

Export	Description
`Framework-neutral adapter factories`	Use Theme Kit adapter factories directly with the web runtime; no React, Vue, Svelte, Solid, or Angular layer is required.
`CSS-variable ecosystem`	CSS-variable adapters update the document's variables/styles from the active runtime theme, making them suitable for framework-free pages and custom elements.

Transition

Export	Description
`transition attribute`	Set `transition` attribute on `<theme-kit-provider>` to enable CSS transitions.
`getProviderRuntime()`	Imperative access to the nearest provider's runtime, including transition config.

Imperative

Export	Description
`getProviderRuntime()`	Imperative access to the nearest provider's runtime.