Preface¶

DSH’s philosophy is “everything is a plugin”. As the number of plugins grows, the visual appearance of the interface itself becomes less controllable: the console is dark, the Web UI uses a different set of tokens, the states of the session list on the left and the jump bar on the right rely entirely on color differentiation, making it difficult to distinguish at a glance which session is running and which is waiting for a reply. You want to change the look, but you are afraid that modifying the theme might break the official redesigned interface.

dsh-eva-skin is a pure client-side skin designed for this scenario: ink outline strokes, hard shadows, CRT scanlines, and session state tracks, all implemented by overriding official design tokens. It does not render components, register services, or touch official class names. It is maintained by luwendi-qq, the npm package is named @winstonlu/dsh-eva-skin, the current version is 1.0.56, and the license is MIT.

Below, I will introduce its capabilities, installation methods, configuration options, and how to customize background images.

What It Can Do¶

The plugin only injects a single stylesheet into the <head> and works by overriding the official --dsw-* design tokens. Because it does not rely on CSS-in-JS hashed class names, in the worst case (official updates, class name changes, new pages), only one decoration might fail, and the interface will not be broken. Actual effects:

• The color scheme is fixed to the EVA palette: Unit-01 Purple #7B4BD8, Unit-00 Blue #2E6BE6, Unit-02 Red #E8322D, Neon Green #B4FF39, Warning Yellow #FFD400, and Ink Black Outline #04040A.
• Shapes are unified with square corners and ink lines, and shadows use non-blurred hard shadows (box-shadow: n n 0), avoiding blur diffusion.
• Full-screen CRT scanlines that can be toggled; selected tabs use an ink background with neon text.
• Session rows in the left column have a 3px state track: Green = Running (with a breathing animation), Yellow = Completed, Red = Waiting for a reply.
• The jump bar on the right uses neon green ticks that brighten on hover, with the current bar in warning yellow.
• An optional dimmed background image, disabled by default.

It is worth noting that the plugin does not override any component structure; it only uses two anchors: the data-row-key^="session:" on sidebar session rows and the official semantic anchor for the jump bar. All other styles are token-level replacements.

Installation and Activation¶

Simply search for dsh-eva-skin in the plugin market, or let the agent install it directly:

plugin_manager install_bundle @winstonlu/dsh-eva-skin

If there is no npm package, use git:

plugin_manager install_bundle git+https://github.com/luwendi-qq/dsh-eva-skin#<commit>

Installation method for local development:

plugin_manager install_bundle file:/绝对路径/winstonlu-dsh-eva-skin-1.0.0.tgz

After installation, enable it on the plugins page; refreshing the page once will show the effect. Pure CSS changes only require a refresh and do not require a restart. Uninstall via the button on the plugins page, or:

plugin_manager remove_bundle @winstonlu/dsh-eva-skin

dispose() will remove the stylesheet, toggle attributes, the background layer, and the badge, leaving no residue.

Configuration¶

In the profile’s cordis.patch.yml, add a config section to the dsh-eva-skin entry; all options are optional:

- id: dsh-eva-skin
  config:
    scanlines: true    # 扫描线，默认 true
    hardShadow: true   # 无模糊硬投影，默认 true
    forceDark: false   # 强制暗色，默认 false
    backdrop: false    # 背景图，默认 false

If you plan to write your own plugin, there is a pitfall you must avoid in advance: configuration must be retrieved from the second parameter of apply(ctx, config). In cordis, config is a service; reading ctx.config without declaring it in inject will throw cannot get property "config" without inject. Once apply throws an error, the entry stays in loading; the desktop startup audit treats non-active entries as fatal errors, directly restarting the app.

Custom Background Image¶

By default, the plugin package embeds a locally AI-generated fan-style illustration (WebP data is stored in lib/client.js). To change the image, run the script in the repository:

./tools/set-background.sh 你的图.png 0.95   # 第二个参数是亮度，省略默认 0.62
# 输出 ~/.dsh/backups/pkgs/dsh-eva-skin-<version>.tgz
plugin_manager install_bundle file:~/.dsh/backups/pkgs/dsh-eva-skin-<version>.tgz

The script compresses the image to a width of 1536, converts it to WebP with quality 74, embeds it into lib/client.js, and then packs it into the distribution. If you do not plan to embed an image (e.g., to publish to a public npm registry), run ./tools/strip-background.sh first. This will replace the data URI with a pure CSS gradient background, reducing the package size from about 130KB to about 25KB.

Use these three lines for the development workflow:

node --check lib/client.js
node ~/.dsh/dsh-runtimes/dsh-primary-runtime/dependencies/pnpm/bin/pnpm.cjs pack --pack-destination ~/.dsh/backups/pkgs
plugin_manager install_bundle file:$HOME/.dsh/backups/pkgs/winstonlu-dsh-eva-skin-<ver>.tgz

After making changes, simply refresh the page (unlag refresh button, or allow the agent to refresh itself via the right-click menu).

Compatibility and Notes¶

• Requires DSH >=0.2.0-rc.2 (engines.dsh).
• Only the Web client (dsh.client.platform: "web"); the desktop and browser share the same UI.
• The plugin runs with the permissions of the current DSH process; it is recommended to read the source code and LICENSE before installing. The license is MIT, but the characters and mecha of EVA / Neon Genesis Evangelion belong to khara / Hideaki Anno. This project is merely a tribute to the color scheme and does not contain any official assets.
• It is a pure appearance plugin that does not modify behavior or register services; you can install it if you just want to change the style. However, for automation scripts that strongly depend on the colors of the state tracks or jump bar, please confirm that the semantic anchors have not changed before updating.

If your requirement is simply to make the Web UI look closer to the cel-shaded texture of EVA, the implementation method and cost of this skin are relatively transparent: a single stylesheet, a few optional toggles, and an optional background image workflow. The directory page is at https://www.skillhub.cn/plugins/luwendi-qq/dsh-eva-skin, and the source code is at https://github.com/luwendi-qq/dsh-eva-skin.