dsh-qq-skin

A QQ NT messenger skin for DeepSeek Harness (dsh). Light and dark share one QQ NT language — light mode is clean and restrained (near-white surfaces, neutral borders/hover, brand blue #12B7F5 and light-blue bubbles #A8E3FF as recognition accents), dark mode is a calm blue-gray (base #101822, desaturated, blue reserved for accents), instantly recognizable.

中文

How it works. The skin is two reversible layers; it never registers a new theme id and never touches the user's Light/Dark/System preference.

• Token layer — stacks one --dsw-* semantic-token override via ctx.theme.overrideTokens('dsh-qq-skin', …). Every token carries a { light, dark } pair, so the skin follows the active base palette instead of fighting it. Light mode runs blue through surfaces, borders, interactions, and scrollbars; the dark palette is a #101822-based calm blue-gray scale where blue only accents (brand, bubbles, primary buttons).
• Layout layer — injects one global <style> tag (qq-layout.ts) for geometry and structure: the chat flow is centered and narrowed, user bubbles are light blue with a "tail", assistant rows get an avatar disc + white card (matched via data-chat-flow-kind='assistant-step'), and the input area becomes a capsule. The brand area stays product-native — the QQ feel comes entirely from the blue token layer. Colors always come from --dsw-* tokens, and dark variants are gated by body[data-ds-dark-theme].

On unload both layers are fully removed through effect cleanup and the product look returns.

What it covers

Area	Mechanism
Brand & primary actions (QQ blue)	--dsw-alias-brand-primary, --dsw-alias-button-primary-*, --dsw-alias-state-business-*
Canvas & surfaces (clean light)	--dsw-alias-bg-base (#F7F9FB), --dsw-alias-bg-layer-1..3, --dsw-alias-bg-overlay
Conversation bubbles (light blue #A8E3FF)	--dsw-specific-bubble, --dsw-specific-bubble-highlight + layout-layer radius/shadow
Assistant messages	layout-layer avatar disc (token colors) + white card with border (--dsw-alias-bg-layer-1 + border-l1)
Chat flow	layout-layer centering (via data-chat-flow)
Input bar	layout-layer capsule (data-composer-card) + --dsw-specific-input-major
Sidebar (clean light / blue-gray dark)	--dsw-specific-sidebar-fill (#F2F5F8), --dsw-specific-sidebar-nav-item-* + layout-layer divider
Text & borders	--dsw-alias-label-*, --dsw-alias-border-l1..l4 (blue-tinted strokes)
Status colors (QQ green/red/amber)	--dsw-alias-state-success/error/warn-*
Static palette (component-direct, unified sky blue)	--dsw-static-deepseek-*, --dsw-static-blue-* (remapped to the #12B7F5 sky-blue scale)
Markdown, scrollbar (QQ blue), menus, tooltips	--dsw-alias-markdown-*, --dsw-alias-scrollbar-*, --dsw-specific-menu, --dsw-alias-tooltip-bg

Tokens that are not overridden keep the product default, so a QQ-skin run stays readable and consistent everywhere else.

Install

One command installs the plugin into the web profile:

dsh plugin --profile web add dsh-qq-skin

That is the whole flow: dsh plugin initializes the profile on first use, runs pnpm add dsh-qq-skin inside the profile directory, then reconciles the profile's bundle layer against the installed state — because dsh-qq-skin declares dsh.bundle.patch (→ cordis.patch.yml), it joins the bundle stack automatically. The next dsh web boot composes it, the client bundle loads, and the skin stacks as soon as ui-theme is active.

Installing from a local checkout (path specs are anchored to your invoking directory; link: keeps the live checkout linked):

dsh plugin --profile web add ../dsh-qq-skin
dsh plugin --profile web add link:../dsh-qq-skin

Removing is equally one command:

dsh plugin --profile web remove dsh-qq-skin

The plugin declares dsh.client with platform: web and injects the theme service, so the Web boot loads its client bundle and applies the layer as soon as ui-theme is active.

Development

pnpm install
pnpm run typecheck   # tsc --noEmit
pnpm test            # vitest (token shape + layout injection + apply wiring)
pnpm run build       # tsc + tsdown → lib/index.js (host) + lib/client.js (browser closure-factory)

The client bundle is produced by the same two-face layout as the harness clientBundle preset: lib/index.js is the plain ESM host row, lib/client.js is the window.__ModuleLoader__ closure-factory the Web boot consumes. No build-time CSS pipeline is needed: the layout styles ship as an inline string inside the client bundle (QQ_LAYOUT_CSS in qq-layout.ts) and are injected at runtime via document.createElement('style') — the same shape as ui-theme's installThemeStyles — then removed on effect dispose. Layout selectors rely on the client CSS Modules [hash]_[local] naming ([class$="_localName"] suffix matches) and the components' own data-* hooks, never on build-time hash values.

License

MIT