Skip to main content

dsh-ui-web/packages/skins/miku

34Stars2Forks0Issues0Watchers

A Hatsune Miku theme for DSH Web GUI featuring blue-purple gradient colors, frosted glass panels, customizable background images, and dual light/dark themes.

Categories▣ UI Enhancements◈ Themes & Skins
Evidence5/5methodologySourceInstallMaintenanceDSH versionSecurity scan
Machine-auditedInstall commandRepo verifieddsh-plugin topicLicenseREADMEAI wiki

ⓘ This plugin is a sub-package of the CAPTAIN1275/dsh-ui-web monorepo — stars and activity count the whole repository.

CAPTAIN1275CAPTAIN1275
·CAPTAIN1275/dsh-ui-web
Language
TypeScript
License
Apache-2.0
Branch
main
dsh-plugindsh-plugin-marketdsh-plugins

Install

cmdweb profile
$ dsh plugin --profile web add @captain1275/dsh-client-ui-skin-miku

Run the command above in your terminal to install this plugin via the dsh CLI. You can switch Profile in the top-right corner. New to dsh? Read the beginner tutorial

Install via your agent

Install the DeepSeek Harness plugin CAPTAIN1275/dsh-ui-web/packages/skins/miku for me: review the repository at https://github.com/CAPTAIN1275/dsh-ui-web first, then run the install command and verify the plugin loads successfully.

Paste this instruction to the DSH Web GUI assistant — it will install and verify for you.

One-Line Description

Provides a Hatsune Miku-themed skin plugin for DeepSeek Harness (DSH) Web GUI, featuring blue-purple-magenta gradient colors, frosted glass panels, customizable background images, "01" number badges, musical notes, and sound wave electronic diva elements in the title bar and status bar.

Core Capabilities

  • Inject blue-purple-magenta three-color gradient (#2e9bff → #9b5dff → #ff4da6) as the global color scheme
  • Render semi-transparent frosted glass effect on panels, sidebars, input fields, and settings dialogs with background image visible through
  • Use built-in sample image as body background by default, with data URI embedded, no additional resource files needed
  • Provide both light (blue-pink clear sky) and dark (neon blue-purple night) themes, automatically switching based on system preference
  • Add musical note icon + 01 number badge at top of window, sound wave lines and text logo in bottom status bar
  • Replace browser tab favicon with a cyan-colored eighth note icon

Technical Implementation

  • Language: TypeScript
  • Key Dependencies: @deepseek-ai/cordis (effect lifecycle management), lightningcss (CSS compilation), tsdown (bundling)
  • Architecture: Pure client-side injection, no service running, no event emission, no model request triggering; all styles scoped under body[data-dsh-miku] (dark variant adds [data-ds-dark-theme]), with complete cleanup via Cordis effect disposer
  • Entry Files: src/index.ts (host-side empty shell) + src/client/index.ts (browser-side apply(ctx), containing DOM writing and MutationObserver for theme switching)

Use Cases

Suitable for users who want to transform their DSH Web interface into a Hatsune Miku visual style—converting the AI chat tool's interface into a workspace with blue-purple gradients and electronic diva decorations. This plugin is ideal if you only want a skin without interfering with functional logic; if you need custom images embedded in the skin or deep integration with other DSH features, manual source code modifications or extensions will be required.

Prerequisites & Compatibility

DependencyMin VersionDescription
Node.js>= 20.0.0Build and test runtime required
pnpm>= 9Package management and build tool
DSH WebRunning dsh web service (default http://127.0.0.1:3080)Only affects DSH Web GUI, no impact on other profiles
PlatformCross-platform (macOS / Windows / Linux)Pure frontend injection, no native module dependencies

Installation

dsh plugin --profile web add github:CAPTAIN1275/dsh-ui-web/packages/skins/miku

Configuration

This plugin requires no additional configuration. Skin switching is mutually exclusive, with the repository's scripts/dsh-skin tool managing transitions:

  • dsh-skin use miku to enable this skin
  • dsh-skin use official to restore official default appearance
  • dsh-skin list to view available skins and current active item

After switching, the config watcher will hot reload within a few seconds; refresh the page to apply changes.

FAQ

Q: How do I switch back to the official default appearance after installing?

A: Run dsh-skin use official in the terminal. The config watcher will hot reload within a few seconds; refresh the page to restore the original look.

Q: I want to use my own Miku image as the background. How do I do that?

A: Place your image in the repository root (e.g., bg.png), then run node scripts/embed-bg.mjs to convert it to WebP—this automatically writes to the MIKU_ART constant in src/client/art.ts; rebuild with pnpm build and refresh to apply changes.

Q: Will this skin work simultaneously with other skins?

A: No. Skins are mutually exclusive and managed by the repository's scripts/dsh-skin; only one skin can be active at a time.

Q: Will page elements leave residues after uninstallation?

A: No. apply() uses the Cordis effect disposer to fully clean up everything it writes, including the data-dsh-miku attribute on body, injected title bar, status bar, favicon, and document title.

Q: Will spaces in the installation path cause problems on Windows?

A: Yes. dsh plugin add splits arguments when paths contain spaces. It is recommended to use cd ~/.dsh/profiles/web && pnpm add "link:<absolute repository path>" instead, then append the package name to the dsh.profile.bundles array in ~/.dsh/profiles/web/package.json.

Q: What if the page shows no changes after installation?

A: Restart the dsh web service and perform a hard refresh (Ctrl+Shift+R). If it still doesn't work, check the managed section of ~/.dsh/cordis.patch.yml to confirm this skin is enabled.

Difficulty Level

Beginner — a single installation command takes effect immediately; background images, color schemes, and decorative elements are all built-in, requiring no configuration or coding.

Known Issues & Limitations

  • The source code package.json declares Apache-2.0 as the license field, while the repository's LICENSE file and README footer both state BSD 3-Clause—the two are inconsistent. The final LICENSE file takes precedence (BSD-3-Clause); however, if you plan to redistribute, it is recommended to align both declarations before merging
  • Mutual exclusion between skins depends on the repository's scripts/dsh-skin script, which is only available when installing from the same repository via link; if cloning this subdirectory separately, you need to manually maintain the managed section of ~/.dsh/cordis.patch.yml
  • The original README installation command uses link:<absolute repository path>, while this wiki provides the GitHub installation form according to plugin marketplace standards—both achieve equivalent results
  • No other known issues at this time

Read the usage guide →

Install steps, key points, FAQ and compatibility for this plugin — auto-derived from indexed fields.

Listing badge

Listed on deepseek-plugin.org
[![Listed on deepseek-plugin.org](https://img.shields.io/badge/listed_on-deepseek--plugin.org-007EC6)](https://deepseek-plugin.org/plugins/CAPTAIN1275/dsh-ui-web/packages/skins/miku)

Paste this markdown into your GitHub README to link back to this listing. The badge only states the listing — not a security endorsement.

← Back to plugin directory