dsh-theme-endfield

A DSH Web theme plugin inspired by the style of the official Arknights: Endfield website.

Cream paper base, ink text, signal yellow / Wuling cyan accents, sharp-cornered industrial style. Client-side only; overlays UI via theme tokens and style overrides.

Installation

dsh plugin --profile web add github:ymh0000123/dsh-theme-endfield

Takes effect after restarting or reloading the web profile. To uninstall:

dsh plugin --profile web rm dsh-theme-endfield

Features

Adjust the following in Settings › Endfield Theme Settings:

• Theme master switch, signal yellow / Wuling cyan color schemes, sharp / rounded corner modes;
• Contour line background, animation toggle, 24 / 60 / 120 FPS;
• Contour line speed 1x / 2x / 4x;
• Background watermark and persistent display;
• Startup loading animation;
• Lightning big text and entrance animation.

All settings are persisted through DSH's persistent settings namespace (the Host index.js declares it via ctx.settings.register('dsh-theme-endfield', schema), and the browser client.js reads/writes via ctx.settingsScope; see docs/features.md and docs/engineering-notes.md for details). Settings are written to <dshHome>/settings.yaml and are independent of the page's origin/port, so both DSH web and DSH Desktop save correctly and restore after restarts or port changes, without relying on localStorage, which would be wiped by Desktop's random ports. Setting labels are available in Chinese and English; the animated contour lines respect the system "reduce motion" preference, and the animation frame rate and speed can be adjusted independently.

Docs

Doc	Contents
docs/design-language.md	Color palette, token mapping and contrast rules
docs/features.md	Feature behavior, default values, storage keys and edge cases
docs/engineering-notes.md	Notes on algorithm, cascade, animation and performance implementation
docs/testing.md	Validation scripts and test suite description

Dev & Verify

node check.js
node selftest.js
npm test

npm test covers style invariants, color schemes, the settings page, real browser rendering, contour line smoothness/cusps, animation accessibility, coverage, and 24/60/120 FPS performance budgets. Some browser tests require Chrome or Edge installed locally.

Project Structure

client.js          Client 侧主题实现
index.js           Host 侧空实现
cordis.patch.yml   Bundle 注入配置
check.js           样式表静态校验
selftest.js        校验器自检
test/              渲染、设置、配色与性能测试
docs/              设计、功能、工程与测试文档

License

MIT