dsh-kimino-theme

中文 | English

What it is · Theme details · Quick start · Customizing · FAQ · Known limitations · License

v68 update · Two variants, your pick + ten polish upgrades

The skin form now ships as two cards: kimino (static cinematic wallpaper — clean and power-friendly) and kimino-live (1080p silent seamless-loop video wallpaper). Install either or both, try them on, switch anytime. Plus ten UI polish upgrades: hero comet streaks, comet-blue think rows, glass scroll-to-bottom button, glass edge highlights, composer focus ring, user/assistant bubble tinting, selection color, unified hover transitions, 0.1.7 layout adaptation and automatic weak-GPU degradation. Existing users upgrade with one command: dsh plugin --profile web update dsh-kimino-theme.

What it is

dsh-kimino-theme turns the DSH Web GUI into Makoto Shinkai's Your Name.: a silent looping live wallpaper behind every surface, translucent frosted-glass panels, comet-blue (#93C5FD) as the single interaction color, the movie logo in place of the DSH brand, a navy-glass composer card, and the placeholder copy swapped for themed lines.

It is a standard dsh plugin package: one dsh plugin command installs it into a profile, it persists across DSH restarts, and it modifies no DSH source; removing it fully reverts the page.

Theme details

Comet-blue glassmorphism

The theme layers roughly 60 design-token overrides through the official theme.overrideTokens API: backgrounds become translucent (revealing the wallpaper), borders turn low-saturation blue, interaction states (hover/active/selected) unify around comet blue, and status colors are tuned for dark glass. Light and dark modes share one visual — glass over a wallpaper does not need a light variant. The full token list lives in docs/theme-tokens.md (Chinese).

Control center

The film icon in the composer toolbar opens the "Kimi no Na wa control center" panel (close via outside click / Esc / clicking the icon again). Every adjustment applies instantly and persists locally:

"Reset" restores the default visuals. Stability guarantees: the background switches only after the first video frame decodes (load failures fall back to the static image); decoding pauses on hidden tabs; reduced-motion users stay static. A self-drawn back-to-bottom pill (anchored to the conversation column's right edge, appears when >120px from the bottom) pins every session to the latest messages on entry.

Wallpaper and logos

• Two wallpaper variants: the skin form ships kimino (static cinematic still) and kimino-live (1080p silent seamless-loop video, 0.6s crossfaded head/tail, only 0.78MB) — clean stillness or drifting light behind the glass, your pick (see the Skin-center route); the plugin form defaults to the live wallpaper (served at /kimino-bg/live.mp4, assets/live.mp4 inside the package) and switches back to the static image (/kimino-bg/current.jpg) from the control center. All variants stack a subtle dark gradient for text legibility;
• The expanded sidebar shows the horizontal movie logo; the collapsed rail shows a letter mark (two SVGs, also plugin-served);
• The hero headline is replaced with a large centered logo.

Composer and placeholder copy

The composer card is redrawn as a navy glass capsule; placeholders swap automatically per UI language:

Message scrolling and gradient mask

The last 40px of the message list fades out smoothly with zero clipping on the composer; the "scroll to bottom" button works under the inner scroller.

Unified scrollbars

Global scrollbars adopt the blue-glass style across mainstream browsers.

Quick start

Browser recommendation: the theme leans heavily on backdrop-filter glass, custom scrollbars and CSS masks — Microsoft Edge or Google Chrome recommended; Firefox renders some of these effects inconsistently (scrollbars, gradient masks may degrade).

Requirements

• DeepSeek Harness installed and dsh web working;
• pnpm available on the machine (dsh plugin uses it internally; the Node.js-bundled corepack can provide it).

Install

dsh plugin --profile web add dsh-kimino-theme
dsh web   # restart DSH to apply

Or install straight from GitHub:

dsh plugin --profile web add github:niiang/dsh-kimino-theme

The wallpaper appearing and the sidebar logo changing confirm the install. The theme then persists across DSH restarts.

Update

dsh plugin --profile web update dsh-kimino-theme
dsh web   # restart to apply

Disable temporarily (without uninstalling)

Edit ~/.dsh/profiles/web/package.json, delete the "dsh-kimino-theme" line from the dsh.profile.bundles array, restart dsh web; add the line back and restart to re-enable. If you won't use it for long, uninstall instead.

Uninstall

dsh plugin --profile web remove dsh-kimino-theme
dsh web   # restart; the page fully reverts

Skin-center route (optional)

If you use the dsh-web-ui skin-center, the theme can also be installed as a skin package — two variants, your pick:

git clone https://github.com/niiang/dsh-kimino-theme /tmp/kimino-theme

# Static (clean, power-friendly): the cinematic still image
cp -r /tmp/kimino-theme/skin/kimino ~/.dsh/skins/kimino

# Live (full atmosphere): 1080p silent seamless-loop video wallpaper
cp -r /tmp/kimino-theme/skin/kimino-live ~/.dsh/skins/kimino-live

After a refresh the cards appear in Settings -> Skin Center (the live card's preview animates right in the list), with try-on / one-click switch / mutual exclusion. Install both and flip between them anytime, or just one — each is fully independent.

Note: manually placed skins skip the hooks.mjs behavioral enhancements (placeholder copy, scroll polish) due to the skin-center provenance gate — visuals (wallpaper, palette, logos, glass) are complete; a dsh-market install enables everything. Pick one route at a time.

Customizing

Requires a local clone with a link: install:

git clone https://github.com/niiang/dsh-kimino-theme <your-dir>
dsh plugin --profile web add link:/absolute/path/to/<your-dir>
dsh web

Wallpaper

Replace assets/current.jpg in your clone (keep the filename) and hard-refresh (Ctrl+F5).

Logos

Replace the two SVGs under assets/logo/, then hard-refresh.

Colors

Colors live in bundle/client.js (token overrides + component styles); restart dsh web and hard-refresh after editing. Cheat sheet: docs/theme-tokens.md (Chinese).

Architecture

The theme is a standard dsh plugin package (bundle): package.json declares dsh.bundle and dsh.client; dsh plugin add installs it into a profile and mounts the plugin row — no DSH source changes.

bundle/host.js       # plugin host half (Node): 3 asset routes /kimino-bg/* (package-relative paths, work from any install location)
bundle/client.js     # plugin browser half: token overrides + component styles + DOM patch-ups
cordis.patch.yml     # plugin row manifest: the entry dsh plugin add mounts
assets/              # wallpaper and logos
plugin/              # same-source closure code for in-session dynamic injection (advanced; normally not needed)
skin/shared/         # single source of truth: skin.css + patches.css + hooks.mjs + logos + previews
skin/kimino/         # skin-center static variant: skin.json v2 (image background), materialized from shared/
skin/kimino-live/    # skin-center live variant: skin.json v2 (video background) + GIF preview, from shared/
scripts/build-skins.mjs # run once after changing shared/ — syncs + validates both variants

Every side effect (token layer, style tag, event listeners, DOM attributes, routes) is registered on the plugin fiber; disable/remove fully reclaims them.

FAQ

A: Make sure the command included --profile web (installed into the right profile); hard-refresh once with Ctrl+F5; if it still fails, check the dsh web startup log for [kimino-theme] host half active and any install-time warnings.

A: The version you installed predates the static install declaration (pre-v65 tags). Confirm the repo address is github:niiang/dsh-kimino-theme (no #tag means latest main) and reinstall with the command in the Install section.

A: Static installs resolve assets package-relative, so this should not happen. It usually means the profile's node_modules was manually cleaned or a link broke: re-run the install command to fix.

A: A few selectors rely on build-time hash class names (.Md3f7G_*, .wSkVaW_*, .hHd-Xa_* — message scrolling, sidebar brand, composer highlights); hashes may shift when the DSH frontend upgrades. The token layer and most styles (keyed on stable data attributes) are unaffected; affected selectors need updating against the new class names. Issues with screenshots are welcome.

A: The theme is designed as dark glass over a wallpaper, shared across light/dark modes. If it feels too dark in light mode, that is by design; you can lighten the glass tokens yourself (see Customizing - Colors).

A: Token layers stack, but visuals will fight each other. Enable only one theme plugin at a time.

Known limitations

• The glass, scrollbar and gradient-mask effects are tuned for Chromium engines (Edge / Chrome); Firefox renders some of them inconsistently — Edge or Chrome recommended.
• Selectors for the message-scroll rework, sidebar logo swap, and composer highlights depend on DSH frontend build-time hash class names; major DSH upgrades may require a theme update (see FAQ).
• The theme enforces one dark-glass visual across light and dark modes; there is no separate light variant (see FAQ).
• Wallpaper and logo routes cache for one hour; hard-refresh after replacing assets.

License and asset copyright

Code is licensed under the MIT License.

The wallpaper and logo assets under assets/ derive from promotional material of the film Your Name. (君の名は。, Kimi no Na wa, 2016); copyright belongs to CoMix Wave Films, Toho, and other rights holders. This repository distributes them solely for personal desktop customization, claims no ownership, and derives no revenue from them; the assets will be removed immediately upon a rights holder's request.

Contributing

• Follow Conventional Commits (e.g. feat(client): fix xxx); no emoji in code, docs, or commit messages;
• Attach screenshots or verification evidence for user-visible changes;
• Keep docs/theme-tokens.md in sync when theme tokens change.

Like the theme? Leave a Star.

Report an issue · Suggest a feature

Growth

Auto-updated daily via GitHub Actions. Left axis: cumulative downloads (blue); right axis: stars (purple) — different magnitudes, independent dual axes.

Data collected every 24 hours: downloads from the npm registry API, stars from the GitHub API.