dsh-web-theme-packs DSH plugin

dsh-web-theme-packs is a DSH plugin that watches a directory for theme-pack folders. Each pack provides semantic tokens, optional CSS, fonts, and a preview image. The plugin serves the packs via a route, and the user can switch among them in Settings → General → Theme packs.

ui-productivity

How to install the dsh-web-theme-packs DSH plugin

dsh plugin --profile web add ./dsh-web-theme-packs

Copying does not run this command. Review the repository and version before installing the dsh-web-theme-packs DSH plugin.

dsh-web-theme-packs DSH plugin data source

dsh-web-theme-packs DSH plugin snapshot date: Aug 16, 2026

discovered

What the dsh-web-theme-packs DSH plugin can do

Watches a configurable set of directories (default: bundled themes/ and $DSH_HOME/theme-packs) for new theme-pack folders.
Registers each pack's tokens (CSS custom properties) with the DSH ThemeRuntime so the layout presenter applies --dsw-* tokens.
Serves each pack's CSS, fonts, and preview images via a configurable route prefix (default /dsh-theme-packs).
Supports multiple packs simultaneously; user selects active pack via Settings → General → Theme packs.
Rewrites relative url() references in pack CSS and token values to point to the correct pack path.
Provides a catalog.json endpoint and SSE event stream for the Host to refresh the pack list.

Where the dsh-web-theme-packs DSH plugin fits

Create a custom light color theme for the DSH Web client without modifying the client code.
Team members share a branded theme pack by dropping it into their $DSH_HOME/theme-packs directory.
Quickly switch between a dark theme and a high-contrast theme for accessibility testing.
Package a set of fonts and custom CSS adjustments alongside token overrides for a consistent look.
Distribute seasonal or event-specific theme packs (e.g., holiday colors) that can be toggled on/off.

Who the dsh-web-theme-packs DSH plugin is for

DSH Web client users who want to personalize the UI appearance.
Administrators or developers who need to provide branded themes for a team or organization.

dsh-web-theme-packs DSH plugin limitations

Only overrides semantic tokens and optional CSS; cannot replace React icon components or rearrange the three-column layout.
Third-party token sets are not completeness-checked – an incomplete override leaves built-in aliases, potentially mixing palettes.
Custom pack IDs are outside the built-in ui-theme.preference schema; removing the plugin drops the selection without resetting the last Appearance preference.
Does not support Codex-style skins that replace window chrome, icon sets, and layout (different format).
Pack JSON and CSS are data-only; the loader never executes JavaScript from a pack.

dsh-web-theme-packs DSH plugin: from the repository README

Quoted from the tzy168/dsh-web-theme-packs README, the upstream source of the dsh-web-theme-packs DSH plugin. Copyright remains with the original authors.

English | [中文](README.zh.md) Out-of-tree Web plugin: drop folders of theme files (colors, extra CSS, fonts, images) into a scanned directory, and the plugin registers them with [`ThemeRuntime`](../packages/client/ui-theme/README.md) so the existing layout presenter applies `--dsw-*` tokens. Multiple packs can sit side by side; Settings → General → Theme packs switches among them. This is a standalone bundle that will move to its own repository; it is not part of the shipped `dsh-web-app` roster. Codex-style skins that replace window chrome, icon sets, and layout are a different format. A DSH pack overrides semantic tokens and may add CSS/assets on top of the three-column Web client. It cannot replace React icon components or rearrange columns. ## Install From this checkout, after `pnpm install` at the repository root: ```sh pnpm --filter dsh-web-theme-packs bundle pnpm dsh plugin --profile web add ./dsh-web-theme-packs pnpm dsh web ``` `dsh plugin add` records the bundle on the profile. Removing it is `pnpm dsh plugin --profile web remove dsh-web-theme-packs`. ## Pack format Each pack is a directory that contains `theme.json`. Default scan roots are this package's `themes/`

Read the full READMEThe repository declares no license. Check with the authors before using it.

dsh-web-theme-packs DSH plugin questions

How do I install dsh-web-theme-packs?

Clone the repository, run 'pnpm install' at the root, then 'pnpm --filter dsh-web-theme-packs bundle' to build the bundle. Finally, use 'pnpm dsh plugin --profile web add ./dsh-web-theme-packs' to add it to your DSH profile. Then start the web client with 'pnpm dsh web'.

Can I create a theme pack that replaces the entire layout?

No. This plugin only overrides semantic tokens (CSS custom properties) and adds optional CSS, fonts, and images. It cannot replace React icon components or rearrange the three-column layout. For full layout changes, you need a different approach (Codex-style skins).

What happens if I remove the plugin?

The plugin and its configuration (including the active theme pack selection) are removed. The UI will fall back to the default light/dark/system appearance. The appearance preference is not reset automatically; you may need to re-select it manually in Settings.

How do I add a new theme pack?

Create a folder with a 'theme.json' file inside the scanned directory (default: $DSH_HOME/theme-packs). The plugin watches the directory and automatically registers the pack. The folder must contain a valid theme.json with an 'id' matching the pattern '^[a-z][a-z0-9-]*$' and not 'light', 'dark', or 'system'.

Does the plugin support dark mode theme packs?

Yes. Each pack declares a 'colorScheme' field (e.g., 'light' or 'dark'). The plugin applies tokens based on the base palette (body[data-ds-dark-theme] for dark). You can create both light and dark theme packs and switch between them.