Introduction

In the DSH Web GUI, skins are typically installed as client-side plugins. If multiple dsh-client-ui-skin-* skins are already installed locally, a specific problem arises during daily use: how to quickly switch between the default interface and these skins.

tiantyu/dsh-skin-toggle is a DSH plugin designed for this scenario: it provides a draggable whale button on the page to restore the default interface or select an installed skin.

What is this

tiantyu/dsh-skin-toggle is a skin manager for the DSH Web GUI, licensed under the MIT license. It does not directly provide the skins themselves but adds a management entry to the page:

  • Left-click to restore the default interface;
  • Right-click to list and switch installed skins;
  • Automatically identify client skins conforming to package name conventions;
  • Only controls skin visibility in the presentation layer, without touching model requests.

Core Features

The following are the verified capabilities.

1. Floating Button

The button is located in the top-right corner by default. It can also be dragged to any position on the interface by holding the left mouse button; after releasing, it becomes fixed and remembers the position. The position is preserved after refreshing.

2. Restore Default Interface

Left-click the button to restore the default interface (without skin). The button color also reflects the current status: gold indicates a skin is active, and gray indicates the default interface.

3. Switch Installed Skins

Right-click the button to open a skin panel listing all installed skins. Click to switch. Skins are mutually exclusive; only one skin is active at a time.

4. Automatic Skin Detection

The plugin detects skins conforming to the dsh-client-ui-skin-<id> package name convention from the Cordis Loader and treats them as optional skins.

5. State Persistence

The current skin selection is saved in localStorage and persists after refreshing.

6. Fix Loading Order at Startup

At startup, there is a brief (~9 seconds) re-rendering process to fix the loading order race condition between the skin and this plugin.

7. Pure Client-side Presentation Layer

The plugin is a presentation layer tool; it does not touch model requests; it does not modify plugin state, only controls skin visibility. The Loader is read-only. The skin display name is the id from the package name; since the host does not provide skin.json externally, localized names cannot be retrieved.

Installation and Activation

Installation

Execute the following in an environment where the dsh command is accessible:

dsh plugin --profile web add https://github.com/tiantyu/dsh-skin-toggle

Activation

After installation, dsh web needs to be restarted, and a hard refresh in the browser is required:

Ctrl+Shift+R

If the whale button appears on the page after the steps above, the plugin has been loaded.

Removal

If removal is needed, you can execute:

dsh plugin --profile web remove dsh-skin-toggle

Typical Usage

  1. Install the plugin:
dsh plugin --profile web add https://github.com/tiantyu/dsh-skin-toggle

  1. Restart dsh web, then hard refresh the browser (Ctrl+Shift+R).

  2. If the default top-right corner is inconvenient, hold the left mouse button to drag the whale button to any position on the interface, release to fix and remember the position.

  3. Left-click the button to restore the default interface.

  4. Right-click the button to open the skin panel and select the skin to switch from the list of installed skins.

  5. If no longer needed, execute the removal command:

dsh plugin --profile web remove dsh-skin-toggle

Scenarios and Considerations

Suitable for users of the DSH Web GUI who wish to quickly manage multiple installed skins. It addresses the operational issues of “switching skins” and “restoring the default,” and does not provide model-side functions.

Considerations before use:

  • The plugin runs with the permissions of the current dsh process; the source code and license should be checked before installation;
  • This plugin is under the MIT license; the skins themselves follow their respective licenses, see the individual skin NOTICE;
  • The plugin only controls skin visibility, does not modify plugin state, and does not touch model requests;
  • The skin display name is the package name id, and localized names cannot be obtained from the host;
  • After installation, dsh web must be restarted and the browser hard refreshed to see the button.

Conclusion

The value of tiantyu/dsh-skin-toggle is focused: it provides a simple skin management entry for the DSH Web GUI—left-click to go back to default, right-click to switch skins, draggable position with memory of the selection.

Repository address:

https://github.com/tiantyu/dsh-skin-toggle

If the current environment is connected to the DSH plugin directory, you can search for the package name dsh-skin-toggle.