dsh-client-ui-skin-miku · Hatsune Miku theme skin

A Hatsune Miku (初音未来) theme skin for the DeepSeek Harness (DSH) Web GUI.

• Palette: a blue-violet-magenta gradient (#2e9bff → #9b5dff → #ff4da6) across the title bar and buttons
• Frosted glass: translucent panels, sidebar, input field, settings dialog; the background shows through
• Custom backdrop: a built-in Miku backdrop (fan art, used with the author's permission) that you can replace with your own image
• Light/dark dual themes: light is a blue-pink clear sky, dark is a neon blue-violet night
• Accessible light theme: deep-ink body text (#14263f) on pale frosted surfaces — WCAG AA contrast (11.6–14.3:1 on bubbles / code blocks / menus); inputs use a high-opacity pale fill so text stays readable over any backdrop area
• Borderless controls: buttons and inputs are distinguished by fill and ink alone (no borders); the GUI breadcrumb crumbs are hidden
• Settings panel: near-opaque deep sea-glass with light ink in both themes, including the side navigation (hover/active blue highlights)
• Electronic idol elements: the 01 number badge at the top, a music-note icon, and a music waveform in the status bar
• Miku cursor: the whole window pointer becomes a Hatsune Miku icon (32x32 — the Firefox portable limit, hotspot at the tip); restore keeps the pre-existing !important priority; disable with dsh.miku.cursor=off

·

Features

• Pure presentation layer: no services injected, no events emitted, no model requests touched
• apply() only writes what it withdraws; the disposer fully recovers (body attribute, injected elements, favicon, title, cursor)
• All styles hang under body[data-dsh-miku] (dark variant [data-ds-dark-theme])
• No static asset files: the background is embedded as a data URI
• prefers-reduced-transparency support: users who enable "Reduce Transparency" (macOS / iOS Safari) get near-opaque fills instead of the translucent blur, keeping readability
• Bounded localStorage overrides: dsh.miku.cells accepts up to 20 trimmed strings of ≤ 64 chars, dsh.miku.title ≤ 200 chars; oversized or malformed values fall back to the defaults
• Tests run on Node ≥ 22.4 (stubbed in-memory localStorage), 19 cases covering apply/dispose, cursor priority restore, storage failures and bounds

Requirements

• Node.js ≥ 20
• pnpm ≥ 9
• A DSH environment running dsh web (default http://127.0.0.1:3080)

Build and test

pnpm install     # install dependencies (runs the prepare build automatically)
pnpm build       # builds lib/index.js + lib/client.js
pnpm test        # apply/dispose contract test

The built lib/ is committed with the repo, so you can install even after cloning without building; a full build is still recommended.

Install into DSH

dsh plugin --profile web add "link:<absolute path to this repo>"

• Spaces in the path (Windows): dsh plugin add breaks arguments containing spaces; use this instead:

  cd ~/.dsh/profiles/web
  pnpm add "link:<absolute path to this repo>"
  

  Then append @deepseek-ai/dsh-client-ui-skin-miku to the dsh.profile.bundles array in ~/.dsh/profiles/web/package.json.

• After installing, restart dsh web and hard-refresh the page (Ctrl+Shift+R).

A step-by-step Chinese install guide lives in INSTALL.md.

Switch skins

This repo ships a single skin, so switching is install/uninstall:

dsh plugin --profile web add "<path or git url of this repo>"            # enable Miku
dsh plugin --profile web remove @deepseek-ai/dsh-client-ui-skin-miku     # restore the official look

After installing, restart dsh web and hard-refresh the page (Ctrl+Shift+R); the config watcher hot-reloads within seconds.

Custom backdrop

The background lives in the MIKU_ART constant of src/client/art.ts (a WebP data URI).

To replace it, convert an image you like to base64 (WebP preferred for size/quality) and replace the MIKU_ART value:

export const MIKU_ART = 'data:image/webp;base64,<...>'

Then rebuild and refresh the page:

pnpm build

Configuration

Optional overrides, read from localStorage (all are optional; absent or invalid values fall back to the defaults). They are pure presentation — no services, no events:

Key	Value	Effect
dsh.miku.title	any string	Replaces the pinned title ("初音未来 · DeepSeek 在线") in the title bar and document title (≤ 200 chars)
dsh.miku.cells	JSON array of strings	Replaces the status-bar cells, e.g. ["LIVE 01", "TURBO"] (≤ 20 cells, each trimmed non-blank ≤ 64 chars)
dsh.miku.cursor	off	Disables the Miku cursor (any other value or absence keeps it on)

Example:

localStorage.setItem('dsh.miku.title', 'Miku Works')
localStorage.setItem('dsh.miku.cells', JSON.stringify(['LIVE 01', 'TURBO']))
localStorage.setItem('dsh.miku.cursor', 'off')
location.reload()

Artwork attribution

The bundled artwork is used with the original authors' written authorization, for use in this UI only:

• Backdrop: Hatsune Miku fan art supplied by the contributor (2560x1440, WebP-encoded).
• Cursor: first frame of the Windows cursor pack "Normal Select.ani" by Moos柚眠 (B站 / 米画师), resized to a 32x32 PNG.
• Author link: https://space.bilibili.com/491029393

License

BSD-3-Clause