dsh-theme-liquid-glass

dsh-theme-liquid-glass

Genuine Liquid Glass theme for DeepSeek Harness Web UI.

简体中文

A complete frosted-glass skin: SVG edge refraction, a customizable animated wallpaper, glass-lens buttons, a redesigned full-screen model selector, and a dedicated water-drop settings icon.

v0.4.2 — Requires DeepSeek Harness ≥ 0.1.2-rc.1. This release adapts

to the harness client-package split: the store part of the removed

@deepseek-ai/dsh-client-runtime now lives in @deepseek-ai/dsh-client-store.

See CHANGELOG.md.

Features

Liquid Glass UI

• SVG Edge Refraction · feDisplacementMap refraction on the input card,

send button, message bubbles, view tabs, queue dock, and sidebar buttons. Intensity is adjustable from a slider.

• Frosted Glass · Token overrides (ctx.theme.overrideTokens) swap the

--dsw-alias-* semantic tokens for translucent glass values. Glass parameters are driven by --dsh-lg-* custom properties on body and apply instantly.

• Glass-lens Buttons · Send, view tabs, sidebar actions, and the command

(+) button all use a glass material with edge refraction.

• Water-drop Settings Icon · A droplet replaces the default gear in the

settings nav.

• Hover Highlights · Interactive elements get a subtle glow and lift.

Wallpaper & Background

• Custom Background Blur & Brightness · Control wallpaper blur (bgBlur)

and brightness (brightness) independently so the background sits perfectly under the glass.

• Built-in Animated Demo Wallpaper · A color-blob wallpaper that works out

of the box, tunable via speed, blob count, color cycle, blur, and opacity.

• Dynamic Wallpaper Sources · Web URLs (iframe, optional host proxy), local

HTML, local images, and local videos.

Model Selector

• Redesigned Model Selector · A full-screen frosted picker with provider-group

grid layout and hover highlights — skip the intermediate root pane and jump straight to the model list.

Settings Page

• Dedicated top-level "Liquid Glass" page (settings.section, beside

General / Model / Plugins) with two groups: Page Background and Input Card · Frosted Glass. All changes apply in real time; Reset to defaults restores everything.

• One-click Disable · The master toggle strips every token override,

removes the wallpaper, and disables all frosted/lens rules at once — every visual is gated on the body.dsh-lg-on class, so disabling leaves zero residue.

Implementation Notes

• Frost is applied as filter: blur() on a dedicated background layer

(inset: -48px for bleed room), never backdrop-filter on #root — a non-none backdrop-filter makes #root the containing block for every position: fixed descendant (menus, popups, toasts), re-anchoring them.

Structure

src/index.ts          Host half: wallpaper file routes, file upload, web proxy
src/client/index.ts   Browser half: token overrides, background layer, glass params, settings panel
src/shared.ts         Shared constants and settings types (zero runtime dependencies)
build.mjs             SWC build pipeline (lib/index.js + lib/client.js in loader format)

Install to a DSH Web Profile

Via npm (recommended)

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

Refresh the browser.

Compatibility: requires DeepSeek Harness ≥ 0.1.2-rc.1. Earlier

harness versions use the removed dsh-client-runtime package and are not

supported by v0.4.0.

Local Development Link

Link your source directory into the profile's node_modules with a Windows junction (a plain dsh plugin add "<absolute-path>" can produce a broken relative symlink and drop the plugin from the profile bundles list):

# 1) remove any stale entry
dsh plugin remove --profile web dsh-theme-liquid-glass

# 2) junction the source dir into the profile
New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\web\node_modules\dsh-theme-liquid-glass" `
  -Target "<absolute-path-to-theme-source>" -Force

# 3) ensure the theme is listed in the profile bundles
dsh plugin add --profile web dsh-theme-liquid-glass

Refresh the browser.

After modifying code: rebuild, then refresh.

复制代码

cd <theme-source-dir>
node build.mjs

Client changes (settings UI, glass params) take effect after a build +

browser refresh. Host changes (routes, upload endpoint) require a

dsh web restart to reload the host half.

Build

npm install
npm run build        # one-shot build (lib/index.js + lib/client.js)
npm run watch        # watch mode (works with client-hmr hot-reload)
npm run dev          # build + smoke test
npm test             # run the client smoke test
npm run typecheck    # tsc --noEmit

Client Injection

The client bundle exports an inject array of service names: ['slots','locale','theme'] (matching the shipped dsh-ui-appearance / dsh-dream-skin plugins). The client loader builds the fiber injection table from this array; missing it causes cannot get property X without inject and a hard web-boot failure. The apply() function itself is wrapped in try/catch — runtime errors degrade gracefully without crashing the GUI.

Persistence (Why localStorage)

Settings are stored in localStorage (key dsh-liquid-glass.settings), not through the settings RPC. The harness settings gateway only exposes hard-coded product namespaces to browser clients — a third-party namespace stays loading forever even when the host half registered it. The shipped dsh-ui-appearance and dsh-dream-skin plugins hit the same wall and both chose localStorage.

Trade-off: settings are per-browser — switching browsers or clearing site data loses them.

Settings Reference

First Launch

On first enable, the plugin checks whether demo.html exists under <DSH_HOME>/wallpapers. If missing, it writes the built-in demo wallpaper (existing files are never overwritten). The default path is $DSH_HOME/wallpapers/demo.html; the directory can be changed via the wallpaperDir config option.

Screenshots

License

MIT