Introduction

DSH supports extending the Web UI via plugins. For scenarios requiring adjustments to theme, background, glass texture, and control appearance within the browser, dsh-theme-liquid-glass is a theme plugin designed for the DSH Web UI. It offers Liquid Glass style, wallpaper management, glass parameter adjustment, and a settings panel, enabling direct appearance adjustments within the Web UI. Below is an introduction to its positioning, core capabilities, installation method, and points of attention.

What is it

dsh-theme-liquid-glass is a Liquid Glass theme plugin for the DSH Web UI. The GitHub owner is FAVKTOXIC, the license is MIT, the version in package.json is 0.3.1, the README mentions SVG Edge Refraction (v0.3.0), and the runtime environment requires Node >= 18.

It addresses the problem of customizing the Web UI appearance: the background wallpaper, input card, message bubbles, buttons, model selector, and settings entry can all be presented in a unified Liquid Glass style, and adjustments can be made in real-time within the settings panel.

Core Capabilities

The following introduces capabilities grouped by function.

Liquid Glass Theme

  • Uses ctx.theme.overrideTokens to override --dsw-alias-* semantic tokens.
  • Glass parameters are driven by --dsh-lg-* CSS variables on the body; modifications take effect immediately.
  • The send button, view tab, sidebar action buttons, and the command (+) button use the glass style.
  • Replaces the default gear icon with a water drop icon as the settings entry.

Edge Refraction

Input cards, send button, message bubbles, view tabs, queue dockbars, and sidebar buttons support SVG feDisplacementMap edge refraction.

Background & Wallpapers

  • Supports Web URL, local HTML file, local image, and local video wallpapers.
  • Background blur (bgBlur) and brightness (brightness) can be adjusted independently.
  • Includes built-in customizable animated demo wallpapers.
  • Video wallpapers are muted by default; unmuting might be blocked by autoplay policies.
  • Web URL wallpapers can bypass X-Frame-Options via the host proxy route.
  • The local file selector supports uploading wallpapers to POST /liquid-glass/upload and serving them via /liquid-glass/wallpaper/<filename>.

Model / Effort Selector

A redesigned model/effort selector offering a provider-group grid layout and hover highlighting.

Settings & Disabling

  • Provides a Settings → Liquid Glass settings panel supporting real-time adjustments and Reset to defaults.
  • One-click disabling removes token overrides, wallpapers, and glass/refraction rules.

Installation & Activation

First, run the following installation command to add the theme to the web profile:

dsh plugin --profile web add dsh-theme-liquid-glass

After installation, refresh the browser to enable it.

If using a local source directory, you can use a local development link:

dsh plugin --profile web add "<absolute-path-to-theme-source>"

Then refresh the browser. Client-side changes require build and refreshing the browser; modifying host routes or upload endpoints requires restarting dsh web.

Typical Usage

The following outlines some common operations.

Real-time Appearance Adjustment

Adjust background, glass parameters, and wallpaper settings in Settings → Liquid Glass. Changes take effect immediately; if the adjustment is unsuitable, click Reset to defaults to restore defaults.

Uploading Local Wallpaper Files

Use the local file selector to upload a wallpaper. The upload endpoint is:

POST /liquid-glass/upload

Uploaded files are served via the following path:

/liquid-glass/wallpaper/<filename>

Enabling the Demo Wallpaper for the First Time

Upon first activation, if demo.html does not exist in <DSH_HOME>/wallpapers, the plugin will write the built-in demo wallpaper. The wallpaper directory can be modified via the wallpaperDir configuration.

Disabling the Theme

Disable the theme by using the one-click disable feature to remove token overrides, wallpapers, and glass/refraction rules.

Storage & Runtime Notes

  • Settings are saved in the browser localStorage with the key name dsh-liquid-glass.settings. Switching browsers or clearing site data will cause settings to be lost.
  • The client bundle must export an array of inject service names; otherwise, it may lead to web boot failure.
  • The plugin runs with the permissions of the current dsh process; source code and license should be checked before installation.
  • The license is MIT; package.json requires Node >= 18.

Conclusion

After the above installation and adjustment, dsh-theme-liquid-glass can provide a real-time adjustable Liquid Glass appearance for the DSH Web UI. It is suitable for use as a Web UI theme plugin for adjusting the appearance of backgrounds, glass textures, buttons, and selectors.

The addresses listed in the materials are as follows:

  • Directory Page: https://www.skillhub.cn/plugins/FAVKTOXIC/dsh-theme-liquid-glass
  • GitHub: https://github.com/FAVKTOXIC/dsh-theme-liquid-glass