Themes

A ThemeProvider is a phoundry-ui ThemeDefinition plus type: "theme" so it fits the PluginProvider union. It registers a color palette (CSS variables) users can pick in the theme UI.

Types: ThemeProvider · Upstream ThemeDefinition / ThemeVariables — import from the phoundry-ui package (as the example repo does).

Related: Plugin API

Mental model

• ThemeDefinition — id, name, optional author, mode (light | dark | both), variables, optional lightVariables when mode === "both", optional preview swatches.
• At activation the host forwards the object to phoundry-ui’s theme manager; on deactivate it unregisters by plugin id.

Example (plugin provider)

import type { ThemeDefinition } from "phoundry-ui";

const cyberpunk: ThemeDefinition & { type: "theme" } = {
	type: "theme",
	id: "vendor.cyber.dark",
	name: "Cyber",
	mode: "dark",
	variables: {
		"--surface-base": "#0d0221",
		"--accent-primary": "#00ffd5",
	},
};

Place cyberpunk in PhialsPlugin.providers alongside other providers. If TypeScript only sees ThemeDefinition, intersect with { type: "theme" } as above, or cast to ThemeProvider once your sdk/ types are loaded.

Bundled palettes vs your theme plugin

Phials may ship default color palettes as part of the app. Your themes still use the type: "theme" provider on your PhialsPlugin so they load and unload with your plugin like any other contribution.

Pitfalls

• Duplicate id values replace prior registrations (last writer wins).
• Full field lists (preview, dual variables, etc.) follow phoundry-ui releases — pin a compatible phoundry-ui version in your plugin project.