dsh-theme-manager

dsh plugin --profile web add dsh-theme-manager

dsh-theme-manager

A two-level theme manager for the DeepSeek Harness Web UI: pick a culture / scene first, then a concrete style.

中文说明: [README.md](README.md)

Features

• Two-level picker: Settings → Theme Manager (a settings.section page) — category list on the left, style cards (with color swatches) on the right.
• Applies live: every style is registered as a real theme through the theme service (--dsw-alias- token overrides) — click Apply* and the UI re-skins instantly, no refresh. The styles also appear as extra color cubes in the built-in Appearance row.
• Remembered: the active style is kept in the browser's localStorage (dsh.themeManager.active) and restored on reload; switching back to a built-in appearance (Light / Dark / System) clears it.
• Bilingual: copy follows the UI language via the locale service (zh / en).
• Update reminders: checks npm for a newer version on boot and every 6 hours; a one-time toast and a persistent pill appear bottom-right, and the settings page offers one-click update / ignore this version / remind me later. npm and GitHub installs can update in one click (the host half runs dsh plugin and restarts automatically); development link: installs get guidance instead.

Built-in styles

58 styles are bundled (23 culture / scene + 8 developer + 7 high-contrast + 20 national flags; 37 light-base · 21 dark-base).

Culture / scene (layer 1: China / Japan / Festivals / General)

Layer 1 · Style · Palette

China · Ink Wash · Rice-paper white · ink-black primary · vermilion accents

China · Suzhou Garden · White walls & dark tiles · bamboo green

China · Forbidden City · Vermilion walls · gilded accents

China · Azure Landscape · Mineral blue · malachite green · ochre

China · Guochao Neon 🌙 · China red · neon cyan on ink night

China · Blue-and-white Porcelain · White glaze · cobalt blue · gilded accents

China · Dunhuang Flying Apsaras · Mural ochre-red · malachite green · lapis · earth yellow

Japan · Ukiyo-e · Washi ivory · ultramarine primary · ochre-red & mustard

Japan · Wabi-sabi · Muted rice-grey · zen minimalism

Japan · Sakura · Cherry-blossom pink · white · fresh green

Japan · Edo Night 🌙 · Indigo night · paper-lantern amber

Japan · Tokyo Neon 🌙 · Neon pink · electric cyan

Festivals · Festive Red & Gold · China red · gold · gilded

Festivals · Christmas · Pine green · holly red · gold

Festivals · Halloween 🌙 · Deep purple · pumpkin orange · black

General · Cyberpunk 🌙 · Neon magenta · electric cyan on black

General · Midnight Minimal 🌙 · Pure black-grey · high contrast

General · Forest · Deep green · moss · cream

General · Ocean Breeze · Sea blue · white · teal

General · Morandi · Soft muted greys

General · Retro Film · Warm brown · faded amber

General · Starry Night 🌙 · Deep blue-violet · starlight

General · DeepSeek Deep Blue · Sea-mist white · deep-sea blue · teal accents

🌙 = dark base (colorScheme: "dark"); the rest use a light base.

Developer (layer 1: Developer)

Faithful dark themes from official palettes (great for coding / long sessions):

Layer 1 · Style · Palette

Developer · Catppuccin Mocha 🌙 · Mauve · midnight navy · cream

Developer · Dracula 🌙 · Deep purple-black · violet-pink · emerald accents

Developer · Tokyo Night 🌙 · Indigo night · electric blue · neon cyan

Developer · Nord 🌙 · Polar night · glacier frost · aurora green

Developer · Gruvbox 🌙 · Warm black · wheat yellow · retro orange

Developer · One Dark 🌙 · Slate grey · electric blue · muted syntax colors

Developer · Solarized Dark 🌙 · Deep teal-black · scientific cyan-blue · restrained

Developer · Ayu Mirage 🌙 · Dune blue-grey · sky blue · soft teal

High Contrast (layer 1: High Contrast)

Bold complementary / high-saturation pairings: a near-black or near-white neutral base carries the UI while loud accents hit buttons and highlights — striking contrast without eye strain:

Layer 1 · Style · Palette

High Contrast · Black & Gold 🌙 · Obsidian black · gilded gold · candle-light text

High Contrast · Red & Black 🌙 · Ink black · signal red · pure-white secondary

High Contrast · Yellow & Black 🌙 · Obsidian black · safety yellow · monochrome secondary

High Contrast · Pink & Black 🌙 · Obsidian black · hot pink · pure-white secondary

High Contrast · Acid Green 🌙 · Dark green-black · acid lime · mint teal

High Contrast · Teal & Orange 🌙 · Ink teal · flame orange · electric teal secondary

High Contrast · Mondrian · Off-white · primary red-yellow-blue blocks · black grid

National flags (layer 1: Flags)

Two-color flags (Japan, Indonesia, Saudi Arabia, Switzerland, …) are handled by the flagSpec() generator: it derives every surface layer / label / border / state color from the flag's signature colors by tinting and shading.

Layer 1 · Style · Palette

Flags · United States · Stars & Stripes: navy · red · white

Flags · China · Five-star red flag: red · gold

Flags · Germany · Black · red · gold

Flags · Japan · Rising sun: white · red

Flags · India · Saffron · white · green · navy

Flags · United Kingdom · Union Jack: navy · white · red

Flags · France · Blue · white · red

Flags · Italy · Green · white · red

Flags · Canada · Maple leaf: red · white

Flags · Brazil · Green · yellow · blue

Flags · Russia · White · blue · red

Flags · South Korea · Taegeukgi: white · red · blue · black

Flags · Mexico · Green · white · red

Flags · Australia · Southern Cross: navy · white · red

Flags · Spain · Red · gold

Flags · Indonesia · Red · white

Flags · Turkey · Crescent: red · white

Flags · Netherlands · Red · white · blue

Flags · Saudi Arabia · Green · white

Flags · Switzerland · Cross: red · wh

…(truncated)