dsh-style-setting: Providing a Style Settings Page for DSH NEXT

Preface

The DSH NEXT extension ecosystem allows developers to customize the UI, but native style configuration often lacks centralized control. The dsh-style-setting plugin provides a standalone style settings page, allowing users to adjust color schemes, card corner radius, font fallback, and conversation density without modifying code or downloading additional fonts. This plugin is maintained by CYEzero.

Features

The plugin primarily provides the following controls:

  • Independent color scheme: Supports light and dark modes, with separate settings for background, surface, and accent colors.
  • Theme presets: Includes five built-in color schemes — Default, Light Purple, Dark Gray, Morning Mist, and Ink Cyan — and supports one-click application.
  • Card effects: Allows adjustment of card outer spacing, shared corner radius (range 0–32px), and shadow (range 0–30%).
  • Font fallback: Supports a custom font list, using local fonts in order, without changing code block fonts.
  • Conversation density: Provides Compact, Default, and Relaxed modes, without changing font size.
  • Contrast check: Detects the contrast of active colors (reference standards: text 4.5:1, icons 3:1); only reports results without automatically changing colors.
  • Model tool: Registers the dsh_style_settings tool, supporting reading and writing the above settings via get, set, and reset interfaces.

Installation

Installing this plugin requires a DSH NEXT environment.

Method 1: Local build installation

# 1. 进入项目目录
npm ci --ignore-scripts
npm run build
# 2. 在 DSH 插件管理器中安装
# 安装来源使用 file:<项目目录的绝对路径>

Method 2: Packed installation

# 生成安装包
npm run pack:release
# 将生成的 local-dsh-style-setting-0.7.0.tgz 作为本地包安装来源

After installing or updating, restart DSH and find Style Settings in the settings to use the plugin.

Typical Usage

The settings page is collapsed by category and supports saving and then clicking Apply.

  • Color input: Format is #RRGGBB. If left blank, the theme default color for that mode is restored.
  • Font input: Example: Arial, Microsoft YaHei, sans-serif. Up to 16 items, with each item up to 512 characters. Leaving it blank restores the default.
  • Numeric ranges: Corner radius 0–32px, outer spacing 0–24px, shadow 0–30%. Default values are 18px / 12px / 10%, respectively.
  • Reset logic:
    • Restore defaults for this group: Resets only the current group (e.g., background, surface) without affecting other settings.
    • Named preset: Changes the color scheme and requests a mode switch.
    • Default: Restores only the color scheme for the current mode without switching modes.
  • Tool calls:
    • Group reset parameters: background, surface, accent, font, card, density, all (default group).
    • card resets only corner radius, spacing, and shadow, and does not change the card toggle.
    • density restores the native conversation density only.

Notes

  • Layout compatibility: Some styles rely on native CSS. Layout and conversation UI adaptation are based on DSH version 0.2.0-rc.2; revalidation is required after upgrading DSH.
  • UI interaction: The main panel and sidebar share colors; input boxes, history messages, and file cards follow the custom background. Shared corner radius is enabled with the card toggle; circles, pills, and switch controls retain native shapes; conversation density is independent of the card toggle.
  • Semantic colors: Body text, code font, and success/error/warning semantic colors remain unchanged and are not affected by the plugin.
  • Contrast detection: Unsaved inputs are not included in contrast calculations. Colors that cannot be measured (e.g., gradients or partial SVGs) are displayed as Unmeasurable.
  • Save mechanism: Saving the color scheme and switching the mode are two separate steps. A failed mode switch indicates that the color scheme has been saved, not that the mode has been persisted.

Summary

dsh-style-setting provides flexible visual customization capabilities for DSH NEXT through a standalone settings page and tool interface. It does not change code fonts or core UI semantics, focusing instead on easily perceived style adjustments such as background, layout, and density.

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye