dsh-custom-css

DSH has long required source edits or theme overrides to adjust its appearance, a process that is both fiddly and fragile across releases. dsh-custom-css adds a Custom CSS row under Settings > General > Appearance. Stylesheets live as plain .css files in ~/.dsh/custom-css/, and every change takes effect across the entire UI within a 400 ms debounce—no restart, no build step.

The editor mirrors the DevTools Styles pane: line-number gutter, syntax highlighting, engine-driven keystroke autocomplete, find-and-replace, undo/redo, format validation, and a CSS custom-property health check. The rule panel stands out—clicking a selector in the editor opens a side panel that lists and edits that rule's existing declarations. Enumerated properties show labelled Chinese or English dropdowns; shorthand properties (flex, margin, gap, border-radius, etc.) break into individual component input boxes; and a row of ready-made declaration templates sits at the bottom for one-click insertion. External editors are first-class: the plugin polls file revisions every 1.5 s, adopts on-disk changes when the editor buffer is clean, asks before overwriting unsaved work, and keeps up to 20 timestamped snapshots per file so any overwrite—including a restore—is fully reversible. The element picker lets you click any element on the running interface; selectors are ranked for cross-release stability (data attributes first, ARIA labels next, hand-written semantic classes, structural paths as a last resort), and design tokens are reverse-looked-up live from the CSSOM and written as var() declarations.

It suits two audiences well: everyday users who want to nudge a margin, hide a panel, or swap a colour without touching source code, and power users who version-control their stylesheets, prefer external editors, and need selectors that survive DSH releases.