The Theme Inspector is a floating panel that inspects whatever theme is live — its identity, the current selection, every flattened token, and the resolved CSS variables — and updates in real time as you switch families or modes. It's the fastest way to see what your theme is actually producing.

1Try it on this page

The eye button floating at the bottom-right of this page is a live Theme Inspector — click it to inspect the theme you're viewing right now.

The floating eye button in the corner is the live ThemeInspector mounted by this site's toolbar. Click it and the panel shows the active theme's name, family, mode, tokens and CSS variables — then switch families in the header to watch it update in place.

2Framework usage

Every framework adapter exposes the inspector as a first-class component — pick your stack.

react — App.tsx

tsx

1import { ThemeProvider, ThemeInspector } from "@theme-kit/react";
2
3export function App() {
4  return (
5    <ThemeProvider themes={themes} defaultTheme="plum-light">
6      <YourApp />
7      <ThemeInspector />
8    </ThemeProvider>
9  );
10}

Under the hood every framework wrapper mounts the same @theme-kit/web <theme-kit-inspector> custom element, so the behavior and visuals are identical across React, Vue, Svelte, Solid, Angular, Astro and vanilla HTML. React and Next also ship a native React implementation with the same props.

3Props

All wrappers accept the same positioning and stacking props.

Prop	Type	Default	Description
bottom	number	104	Distance from the bottom of the viewport, in px.
right	number	32	Distance from the right edge of the viewport, in px.
size	number	40	Toggle button size (width and height), in px.
zIndex	number	9999	Z-index for the floating toggle and panel.

4Styling

Style the inspector from any framework with CSS ::part() — the toggle and panel are exposed as parts.

::part(inspector-toggle)	Style the floating toggle (background, border, radius, …).
::part(inspector-panel)	Style the popover panel (surface, radius, shadow, …).
--theme-color-*	Every surface uses the active theme's semantic tokens automatically.

inspector.css

css

1/* Works in any framework — plain CSS. */
2theme-kit-inspector::part(inspector-toggle) {
3  border-radius: 9999px;   /* pill toggle */
4  background: var(--theme-color-accent);
5}
6theme-kit-inspector::part(inspector-panel) {
7  border-radius: 20px;
8  border-color: var(--theme-color-ring);
9}

5Web component API

The web component is the shared implementation — usable directly, or through any wrapper.

vanilla — index.html

html

1<!DOCTYPE html>
2<html>
3  <body>
4    <theme-kit-provider default-theme="plum-light">
5      <your-app></your-app>
6      <theme-kit-inspector
7        bottom="104"
8        right="32"
9        z-index="50"
10      ></theme-kit-inspector>
11    </theme-kit-provider>
12    <script type="module">
13      import { ThemeKitInspector } from "@theme-kit/web";
14      ThemeKitInspector.define();
15    </script>
16  </body>
17</html>

The custom element reads the nearest <theme-kit-provider> runtime, subscribes to the store, and re-renders the panel whenever the theme changes. Attributes mirror the props: bottom, right, size, z-index. Pick a z-index below your modal overlays (e.g. a search dialog) so the inspector tucks behind them automatically.

6Go deeper

The inspector reads the same runtime that powers everything else.

Theme Studio

Generate, preview and apply themes from a seed color.

→

Playground

Live preview and theme generator.

→