# dsh-style-setting

[中文](README.md) · English

A standalone style settings page for **DSH NEXT**: colors, card effects, font fallbacks and dialogue density.

**Page name:** Style Setting · **Current version:** 0.7.0

## Features

- **Independent colors**: set background, panels and accent separately for light and dark.
- **Theme presets**: Default, Light Purple, Dark Gray, Morning Mist and Ink, applied in one click.
- **Card effects**: adjust outer spacing, shared corner radius and shadow; turning them off keeps the values.
- **Font fallback**: uses installed fonts in order, downloads nothing and never changes the code font.
- **Dialogue density**: compact, default or relaxed, without changing font sizes.
- **Contrast hints**: measures the effective colors and only warns, never recolors automatically.
- **Collapsible categories**: expand settings by category and keep unsaved input while collapsed.
- **Available to the model**: registers the `dsh_style_settings` tool with `get` / `set` / `reset`, visible in the DSH tool list.

![Style settings](./img/设置.png)

## Install

Requires DSH NEXT. Building from source requires **Node.js 22+** and npm.

Download the source and enter the project directory:

```sh
npm ci --ignore-scripts
npm run build
```

Install the local build directory in the DSH plugin manager, using `file:<absolute path to the project directory>` as the install source. You can also build an installable archive:

```sh
npm run pack:release
```

Use the generated `local-dsh-style-setting-0.7.0.tgz` as a local package source. Restart DSH after install or update, then open **Settings → Style Setting**.

> No reinstall is needed while an existing local link keeps working. New Host configuration requires a restart to load; disabling and re-enabling alone does not reliably clear the cache. When a control asks for a restart, restart before using it.

The package identity stays `@local/dsh-style-setting`; existing preferences are never migrated or reset. It remains `private: true` for GitHub source publication and local package installs, and cannot be published to npm as is.

## Usage

| Category | Settings                                            |
| -------- | --------------------------------------------------- |
| Colors   | presets, background, main panel and sidebar, accent |
| Cards    | card effects toggle, corner radius, spacing, shadow |
| Dialogue | dialogue density, font fallback                     |
| Contrast | effective-color check and re-measure                |

- Click **Apply** after editing; color and font inputs also accept Enter.
- Colors use `#RRGGBB`; leaving a field empty restores that mode's theme default.
- Font example: `Arial, Microsoft YaHei, sans-serif`. At most 16 entries and 512 characters; empty restores the default.
- Ranges: corner radius `0–32px`, outer spacing `0–24px`, shadow `0–30%`; defaults are `18px / 12px / 10%`.
- **Restore group defaults** resets only the current group and leaves other settings alone.
- A named preset only changes its own mode's colors and requests a mode switch; **Default** restores the current mode's colors without switching.

### Built-in palettes

| Preset       | Mode  | Background | Panel     | Accent    |
| ------------ | ----- | ---------- | --------- | --------- |
| Light Purple | light | `#c4b7d7`  | `#f5f5f5` | `#8f00ff` |
| Dark Gray    | dark  | `#393836`  | `#181616` | `#00bfff` |
| Morning Mist | light | `#eef5f2`  | `#f8fcfa` | `#267568` |
| Ink          | dark  | `#20292e`  | `#162126` | `#67c7b0` |

![Morning Mist](./img/晨雾.png)
![Dark Gray](./img/深灰.png)

### Model tool

The plugin registers `dsh_style_settings` with `get`, `set` and `reset`:

- Reset groups: `background`, `surface`, `accent`, `font`, `card`, `density`, `all`; `all` is the default.
- `card` only resets radius, spacing and shadow without touching the card toggle; `density` only restores native dialogue spacing.
- Parameters are validated in full and then saved atomically through the official settings service; invalid input writes nothing.
- The legacy `dsh_background_colors` tool is still accepted and only handles the background group.

Per-field details are in [Tools and reset](DEVELOPMENT.md#工具与重置).

## Notes

- The main panel and sidebar share one color; inputs, historical user messages and file cards follow the custom background.
- The shared corner radius is enabled with card effects, while circular, pill and switch controls keep their native shape; dialogue density is independent of card effects.
- Body text, code fonts and the success / error / warning semantic colors stay unchanged.
- Contrast reference text `4.5:1`, icons `3:1`. Unsaved input is excluded and unmeasurable colors show "cannot measure". This is not a full accessibility audit.
- Saving colors and switching modes are two separate steps; if the switch fails the page says the colors were saved, which does not mean the mode was persisted.
- Official settings and theme APIs are used, but some styling relies on native CSS. Layout and conversation UI adaptation is based on `0.2.0-rc.2`, so re-verify after a DSH upgrade.

## Development

```sh
npm run format:check
npm test
npm run pack:check
```

The test suite covers unit tests, real DSH tool registration and Chromium style checks; the latter two depend on the local machine and are skipped explicitly when unavailable.

See [DEVELOPMENT.md](DEVELOPMENT.md) for per-file responsibilities, module boundaries and the release checklist. The directory tree and per-file index are written in Chinese and live in the [中文 README](README.md#项目结构). Please report problems through [Issues](https://github.com/CYEzero/dsh-style-setting/issues).

## License

Released under the [MIT License](LICENSE).