Introduction

The interface of DeepSeek Harness (DSH) is mainly rendered dynamically by plugins. When fine-grained style adjustments are needed, the traditional approach often requires modifying source code or rebuilding the project. The dsh-custom-css plugin provides a browser DevTools-style CSS editor in the settings row. Sheets directly correspond to files on disk, and changes take effect as soon as they are written, which resolves the disconnect between UI customization and the development environment.

What It Is

This is a DSH profile plugin (Host-side + browser-side) that runs without build steps.

  • Maintainer: FOX4096
  • Open-source license: MIT
  • Compatible versions: DSH 0.1.2-rc.1 ~ 0.1.5-rc.1
  • Core value: Provides a CSS editing entry point in the settings row, with two-way synchronization between files and disk.

Core Features

The plugin provides a complete workflow for authoring and managing styles.

DevTools-Style Editing Experience

The editor emulates the Styles tab in browser DevTools:
* Basic features: Supports line-number gutter, syntax highlighting (comments, selectors, properties, values), undo/redo, and find and replace (Ctrl+F, with a case-sensitivity toggle).
* Intelligent input: A property autocomplete list appears while typing. Completion data comes from the browser’s CSSStyleDeclaration.prototype.
* Formatting: Supports one-click formatting; it only re-wraps lines and does not modify content.
* Rule panel: Clicking a selector on the left expands the right-hand panel, allowing you to rename the selector, add properties, and view a summary.

File Management and Synchronization

  • Multiple files: Sheets are stored in the ~/.dsh/custom-css/ directory.
  • Live updates: Editor content is written to disk after a 400ms debounce, and the page is redrawn.
  • Two-way synchronization:
    1. Editor -> disk: Save in the editor, or press Ctrl/Cmd+S to write to disk immediately.
    2. Disk -> editor: The editor monitors directory changes (using the file metadata size and mtime). If a file is modified externally, the editor prompts whether to reload it.
  • History versions: A snapshot is generated before each overwrite is written to disk. Snapshots are stored in the .history/ directory, with up to 20 retained. Rollback is available from “More actions”.

Auxiliary Tools

  • Element picker: Click an interface element to generate selectors that are as stable as possible across versions, and write the actually applied tokens as declarations.
  • Property dictionary: Includes a built-in dictionary of 112 properties, with dropdowns for Chinese property names and values, and component input for shorthand properties (such as margin and padding).
  • Light/dark adaptation: The interface automatically follows DSH’s light/dark theme.

Installation and Enablement

The plugin is loaded through the DSH profile mechanism. After enabling it, a new “Custom CSS” row appears below “Appearance” in DSH’s “Settings → General” view.

Typical Usage

  1. Create or edit a .css file in the ~/.dsh/custom-css/ directory.
  2. In the DSH interface, find the “Custom CSS” row and click it to open the editor.
  3. Write styles or use the element picker to generate rules.
  4. After saving, the styles are applied to the interface immediately.

Notes

  • The plugin reads and writes files on the Host side. Ensure that you have write permission to the directory.
  • Find is plain-text matching and does not support regular expressions.
  • Formatting only adjusts layout and does not modify property values.
  • It is recommended to review the source code and license before installing.

Wrap-Up

For developers or advanced users who need to adjust the appearance of the DSH interface frequently, dsh-custom-css provides a low-barrier and high-efficiency customization solution. It combines local development tools (text editors and version control) with runtime debugging (live preview).