Introduction

When using DSH, if you wish to apply a theme designed on tweakcn.com, directly modifying the client styles is prone to missing token mappings and makes switching between multiple themes inconvenient. dsh-client-ui-tweakcn solves this step: it allows you to paste the index.css exported from tweakcn.com into DSH, with the plugin handling the theme variable mapping, and supporting saving, switching, and editing themes.

Below is an introduction to the positioning, core features, installation methods, and usage notes of this plugin.

What is this

dsh-client-ui-tweakcn is a DSH client theme plugin maintained by AIRIKE1, licensed under MIT.

It maps the index.css exported from tweakcn.com to DSH semantic tokens, overriding colors, border radius, shadows, and fonts, and supports saving pasted content as a theme for later switching, editing, or deletion.

Core Features

This plugin mainly provides the following capabilities:

  • After pasting the index.css exported from tweakcn.com into settings, automatically map colors, --radius, --shadow-*, --font-sans / --font-mono.
  • Supports oklch, hsl, and hex color values, and automatically ignores irrelevant content like @theme, @layer, etc.
  • Supports naming and saving any pasted content as a theme, and switching between DSH default, Violet (built-in), and saved themes, as well as editing or deleting them.
  • Theme :root / .dark values follow DSH appearance, supporting merging :root, .dark with @media prefers-color-scheme parsing.
  • --radius maps to --tweakcn-radius, with a maximum of 16px, keeping circular elements circular.
  • --shadow-2xs…2xl maps to --dsw-shadow-lv1/2/3.
  • --font-sans maps to --dsw-font-family, and --font-mono maps to --ds-font-family-code.
  • Shows feedback on the number of parsed light/dark items after applying or saving; if layout.tsx is pasted, it will error explicitly.
  • Safe startup, local-first, plugin failure does not prevent DSH from starting.
  • Provides a direct button to tweakcn.com.
  • The repository provides bilingual Chinese and English README and INSTALL.md.

Installation and Activation

There are mainly three installation methods.

Plugin Market Installation

Open settings in DSH, enter the plugin market, and search for:

dsh-client-ui-tweakcn

Find it and install with one click.

Repository Script Installation

Execute in the repository directory:

.\install.ps1

After execution, restart DSH Desktop.

Manual Installation

Manual installation applies to the DSH desktop version and also to web profiles that require manual bundle handling.

First, place the plugin directory under node_modules of the desktop profile:

%USERPROFILE%\.dsh\profiles\desktop\node_modules\dsh-client-ui-tweakcn

Then, in the package.json of the desktop profile, append an entry to dsh.profile.bundles:

"dsh-client-ui-tweakcn"

After completion, restart DSH Desktop. The new plugin bundle requires regenerating the splash screen and cannot be hot-loaded.

Typical Usage

The usage process is as follows:

  1. In the tweakcn theme entry in DSH settings, click “Open tweakcn.com”, design the theme, and export index.css. Do not copy layout.tsx.
  2. Paste the index.css content into DSH theme settings and click “Apply”. The interface will display feedback such as “Parsed: N light items / M dark items”.
  3. If you want to keep this theme, enter a name and click “Save as theme”. You can then switch, edit, or delete it in the theme list.
  4. To restore the original appearance, click “DSH Default Theme”.

Applicable Scenarios and Notes

This plugin is suitable for scenarios where users want to quickly import tweakcn.com themes into DSH and need to maintain multiple theme configurations.

Pay attention to the following points before use:

  • You must paste the index.css exported from tweakcn.com. layout.tsx is just a Next.js page shell and does not contain color definitions; pasting it will result in an error.
  • Themes containing only dark blocks will not fill in light values; light values will remain DSH default.
  • Border radius and shadows only take effect if --radius / --shadow-* are declared in the pasted CSS; otherwise, they remain DSH native styles.
  • Success and warning colors will retain DSH semantic green/amber and will not be themed.
  • After installing the new plugin, restart DSH Desktop.
  • Local state is the sole authority; outdated response packets cannot undo the current selection.
  • The plugin runs with the permissions of the current DSH process; you should check the source code and MIT license before installing.

Links

GitHub Repository:

https://github.com/AIRIKE1/dsh-client-ui-tweakcn

The plugin market entry can be opened in DSH settings by searching for dsh-client-ui-tweakcn; this article does not assume an unverified independent directory page URL.