Introduction¶
The DSH (DeepSeek Harness) ecosystem is built on the philosophy that “everything is a plugin”; this extends to its appearance as well. Skins are distributed as plugins and take effect by overriding semantic tokens of the interface. For users who face the web interface for long hours every day, colors and fonts determine the majority of the visual experience. It is more convenient to install a skin pack that adheres to mature design specifications than to manually change styles. The following introduces mtaech/dsh-material-you, which recolors and typesets the DSH web interface according to Google Material You / Material 3 (M3) specifications.
What is this¶
mtaech/dsh-material-you is a skin plugin for DeepSeek Harness maintained by mtaech, categorized under the “Fun Outfits” section in the community plugin directory. It provides Light and Dark Material You (M3) skins: colors are derived from the seed color #3B82F6 using the HCT (Hue–Chroma–Tone, tone 0–100) algorithm from Material Color Utilities, and the font used is Maple Mono NF CN.
The package name declared in the package.json file inside the package is @deepseek-ai/dsh-skin-material-you, version 0.1.0-rc.2, marked with private: true, and licensed under MIT. The repository has been archived, and development has migrated to mtaech/melon (source code is located in the packages/skin-material-you directory). Please direct issues and pull requests to the melon repository.
Color Palette: HCT Tone Palette and Token Overrides¶
For the color scheme, starting from the seed color #3B82F6, the HCT (Hue–Chroma–Tone, tone 0–100) algorithm from Material Color Utilities is used to derive a tone palette of 5 colors: primary / secondary / tertiary / neutral / neutral-variant.
These colors do not appear directly in the interface but take effect by overriding two categories of semantic tokens: --dsw-alias-* and --dsw-specific-*. The full list of overrides consists of approximately 80 tokens × 2 looks, concentrated in src/tokens.mjs. After installation, both Light and Dark looks use Material You colors under system preference.
When changing the theme, pay attention to a contrast constraint: --dsw-specific-sidebar-nav-item-active-accent is the background color of the “Recommended” badge for ask_user_question (taking primary-container), and --dsw-alias-button-info-fill is the text color of the badge (taking primary). The two must maintain sufficient contrast.
Typography: Maple Mono NF CN¶
The font used is Maple Mono NF CN (Nerd Font + Chinese monospace). The package self-hosts a woff2 file for the Regular weight (approx. 6.1MB). The @font-face rule declares font-weight: 100 800 to cover all weights. Unpackaged Medium/Bold weights are synthesized by the browser or fall back to system-installed fonts:
@font-face {
font-family: 'Maple Mono NF CN';
font-style: normal;
font-weight: 100 800;
src: url('../fonts/MapleMono-NF-CN-Regular.woff2') format('woff2');
font-display: swap;
}
The typography rhythm follows M3’s font sizes, line heights, and letter spacing. Weights are mapped from M3’s 400/500/700 to Maple Mono’s Regular/Medium/Bold, and relevant tokens are named --m3-typescale-*. Animations use M3’s emphasized/standard easing and support prefers-reduced-motion. Shapes follow the M3 border-radius system (4/8/12/16/28/full px).
If you need more faithful Medium/Bold weights¶
First, find the TTF for the corresponding weight, convert it to woff2 using fontTools, and place it in fonts/. Then, add the corresponding @font-face rule. Each file is approximately 6MB.
Plugin Form: Bundle Patch¶
This plugin uses the bundle patch form: package.json declares dsh.bundle.patch pointing to the built-in cordis.patch.yml. The content of cordis.patch.yml is:
- insert:
- id: ui-skin-material-you
name: '@deepseek-ai/dsh-skin-material-you'
After installation, the plugin package is automatically added to dsh.profile.bundles in the profile. The patch then uses insert to add the skin row with the id ui-skin-material-you into the loading list, so no manual profile editing is required.
There is another point that can be confusing: “inject” is divided into two layers with different meanings. dsh.client.inject in package.json is an array of package names, currently containing @deepseek-ai/dsh-client-runtime and @deepseek-ai/dsh-client-ui-theme, with platform set to web; exports.inject = ['theme'] in lib/client.js is an array of service names. When writing your own skin-like plugins, pay attention to distinguish these two places.
Installation and Activation¶
The repository archive statement specifies that the installation method has changed from git to npm. The current installation command is as follows. Replace <your profile> with the actual profile name you are using:
dsh plugin --profile <your profile> add dsh-skin-material-you
README §7 also retains the commands for the other two sources. To install from GitHub:
dsh plugin --profile web add github:mtaech/dsh-material-you
To install from a local repository directory:
dsh plugin --profile web add "file:E:/Dev/Code/dsh-material"
Note that installing from GitHub runs the package’s prepare build process, while pnpm blocks build scripts by default. If prompted with Ignored build scripts, you can re-run after adding the package name to allowBuilds in profiles/web/pnpm-workspace.yaml — this package can run directly without build scripts.
Activation involves three steps: first, execute the installation command; second, restart dsh web; and finally, pin the theme as needed. After completing the above steps, the interface will default to following system preference, with both Light and Dark looks using Material You colors. If you wish to pin a specific look, select material-you-light or material-you-dark in Settings → Appearance.
Applicable Scenarios and Notes¶
It is suitable for two types of people: those who prefer the Material You / M3 visual language and want the DSH web interface colors and fonts to follow the same specifications; and developers who wish to write skin plugins for DSH and can reference its bundle patch structure and token override methods.
Points to note:
- The plugin runs with the permissions of the current DSH process. Before installation, you should check the plugin’s source code and license (this project is MIT).
- The repository has been archived; for feature updates, refer to mtaech/melon. The installation command follows the npm method specified in the archive statement.
- The font package only includes the Regular weight. Medium/Bold weights are synthesized or fallback effects. For scenarios sensitive to font weight, please add them yourself using the method described above.
Conclusion¶
mtaech/dsh-material-you uses a set of HCT-derived tone palettes and the Maple Mono NF CN monospaced font to unify the DSH web interface under Material You specifications. It can be enabled with a single installation command and a restart. For more information, see:
- Community Directory Page: skillhub.cn/plugins/mtaech/dsh-material-you
- GitHub Repository: github.com/mtaech/dsh-material-you
- Development Repository: github.com/mtaech/melon