dshbase
EN

插件目录 / UI & Skins / dsh-webUI-Glass-Theme

dsh-webUI-Glass-Theme

已验证 · 实测可装 makuralymi

✓ 持续维护 基于 2 个官方 DSH 包

查看 GitHub ↗ ← 返回插件目录

3Stars
0Forks
0未关闭 issue
JavaScript语言
2026-08-16最近推送
跨平台平台

功能简介

无描述。

✅
我们的评价
可用 — 实测通过，早期项目

无描述。 实测能干净安装、正常启动。早期项目，但功能可用。

「已验证」表示我们的自动化 CI 在干净 profile 里实际执行了 dsh plugin add 并启动成功——仅此而已。功能描述与版本兼容性均为作者声明。这不是安全审计，也不代表对第三方代码的背书。

README

dsh-client-ui-frosted-glass

English | 中文

A global frosted-glass (backdrop blur) theme plugin for the dsh Web UI. It keeps the existing light/dark preference untouched and layers a translucent surface-token override plus a global backdrop-filter on top, giving the whole UI an iOS/macOS-style frosted-glass look.

The plugin also adds a Transition & schedule row right below Appearance in Settings → General:

  • Switch animation: None / Fade / Circle reveal / Wipe from top — full-screen transitions when light/dark is switched.
  • Scheduled switching: set a daily dark-theme time and light-theme time; the UI switches automatically at those boundaries, and manual switches last until the next boundary.
  • Custom background: static images (URL / local) and dynamic wallpaper videos (video URL / local file), with one-click reset to the built-in background.

Screenshot

Frosted glass screenshot

What it does

Two browser-side halves:

  1. Global stylesheet (inlined by lib/client.js)

    • Paints bg.jpeg as a centered, cover background on body (inlined as base64; source kept at assets/bg.jpeg), shown as-is in light mode and dimmed behind a translucent dark veil in dark mode — the content the blur reveals.
    • Applies backdrop-filter: blur(...) saturate(...) to the three-column shell frame and to floating surfaces ([role="menu"], [role="dialog"], [role="listbox"], [role="tooltip"], ...).
    • A MutationObserver auto-marks fixed/absolute panels that other plugins portal under <body>, giving them the same frosted glass without any per-plugin adaptation.
    • Strengthens the stock --dsw-mask-blur token so dialogs / image masks blur harder.

  2. Translucent surface-token override (via ctx.theme.overrideTokens)

    • Rewrites --dsw-alias-bg-base, --dsw-alias-bg-layer-1/2/3, --dsw-alias-bg-overlay, --dsw-specific-sidebar-fill, --dsw-specific-menu, ... to translucent rgba(...), each with a { light, dark } pair.
    • Because every component reads var(--dsw-*), this layer is class-name agnostic and survives shell re-hashing.

  3. Theme-switch animations

    • Wraps ctx.theme.setTheme with the browser-native View Transition API: the browser snapshots the REAL before/after frames and uses the new frame as the mask — fade, circle reveal centered on the click, or wipe from top — with no solid-color veil.
    • Respects prefers-reduced-motion; switches without an animation when the resolved scheme stays the same (e.g. “System” resolving to the current scheme), and falls back to an instant switch where View Transitions are unavailable.

  4. Scheduled light/dark switching

    • When enabled, a timer is scheduled for the next “dark theme at” / “light theme at” boundary and uses the same animated switch path.
    • Preferences persist under the ui-theme section of the user-settings document with frosted*-prefixed fields.

  5. Custom background

    • Static images: URLs persist as ui-theme.frostedBackgroundUrl; local images are compressed and stored in localStorage.
    • Dynamic wallpaper: video URLs persist as ui-theme.frostedBackgroundVideoUrl; local videos are stored as Blobs in IndexedDB.
    • Videos render through a full-screen <video> layer (object-fit: cover, muted loop) while static backgrounds override the --frosted-bg-image variable on <body>.
    • Reset clears every custom source and returns to the built-in bg.jpeg.

演示截图

Layout

dsh-client-ui-frosted-glass/
├── package.json          # dsh.bundle (self-inserting row) + dsh.client (browser half)
├── cordis.patch.yml      # bundle patch: inserts the ui-frosted-glass row
├── lib/
│   ├── index.js          # host half (empty apply, only to appear in the Loader)
│   └── client.js         # browser half (window.__ModuleLoader__.load bundle format)
├── README.md
└── README.zh.md

lib/client.js is a hand-authored browser bundle in the same window.__ModuleLoader__.load({ id, factory }) format tsdown emits — no local build step required.

Install

Clone the repo, then install into the web profile via the profile plugin manager:

git clone https://github.com/makuralymi/dsh-webUI-Glass-Theme.git
dsh plugin --profile web add ./dsh-webUI-Glass-Theme

This runs pnpm in the profile directory and, because the package declares dsh.bundle.patch, auto-adds it to dsh.profile.bundles; its bundle patch then inserts the ui-frosted-glass row automatically — no manual cordis.patch.yml edit is needed. Then:

dsh --profile web
# or
dsh web

Note: the host composition is assembled at boot, so adding/removing a plugin requires restarting the web process before a refresh shows it.

Manual install (without dsh plugin)

Use this OR the dsh plugin path above, not both (they insert the same row). For cases where dsh plugin is unavailable:

  1. Add the directory as a profile dependency:

    cd "$DSH_HOME/profiles/web"
    pnpm add <path-to-the-cloned-repo, e.g. ./dsh-webUI-Glass-Theme>

  2. Append a row to $DSH_HOME/profiles/web/cordis.patch.yml:

    • insert:
      • id: ui-frosted-glass
        name: 'dsh-client-ui-frosted-glass'

Verify

  • The shell frame and its floating surfaces render translucent + blurred in both light and dark.
  • DevTools shows a <style data-plugin="dsh-client-ui-frosted-glass"> in <head> and inline translucent tokens (--dsw-alias-bg-base, ...) on body.
  • body[data-ds-dark-theme] switches the dark gradient and dark translucent tokens.
  • Settings → General → below Appearance shows Transition & schedule; picking an animation and clicking light/dark plays the full-screen transition.
  • With the schedule enabled, the theme switches automatically at the configured times; settings persist under ui-theme.frosted* in $DSH_HOME/settings.yaml.
  • Custom background: choose a static image or a dynamic video; local videos mount a full-screen <video> layer immediately, and “Reset to default background” restores the built-in background.

Customize

  • Blur: --frosted-blur (default 20px) and --frosted-saturate (default 180%) in lib/client.js.
  • Background: replace assets/bg.jpeg then re-inline (or edit the --frosted-bg-image data URI in lib/client.js); dark-mode dim strength is the linear-gradient alpha under body[data-ds-dark-theme].
  • Translucency: the rgba alpha values in FROSTED_TOKENS.
  • For broader coverage, add more --dsw-alias-bg-* / --dsw-specific-* tokens to FROSTED_TOKENS.
  • Animation speed: --frost-vt-duration in lib/client.js (default 340ms).
  • Animation easing: --frost-vt-easing.
  • Default times: frostedDarkTime / frostedLightTime in SETTINGS_DEFAULTS.
  • Local-image compression: compressImage maxDimension (default 2560) and quality (default 0.86).

Known limitations

  • The frame and composer-card backdrop-filter ride stable data-* attributes (:has(> [data-shell-overlay]) and [data-composer-card]) rather than hashed module classes; floating surfaces use [role=...], and the translucent-token override is class-name agnostic.
  • Third-party theme token overrides are a runtime layer with no completeness validation; this plugin intentionally overrides only surface-background tokens and leaves text/state tokens readable.

安装

🧩 让 Agent 自动装（推荐）

装一次目录插件，之后本站所有插件都能让 DeepSeek Harness 自动找、自动装：

dsh plugin add dshbase-catalog

然后对 agent 说「帮我装 dsh-webUI-Glass-Theme」，它会在目录里找到并自动安装。文档：dshbase-catalog · 已验证场景包。

该插件是 GitHub 源码（未发 npm）——直接从仓库装：

Web profile：

dsh plugin --profile web add github:makuralymi/dsh-webUI-Glass-Theme

Headless（CLI）profile：

dsh plugin --profile headless add github:makuralymi/dsh-webUI-Glass-Theme

实测报告

验证通过：从 GitHub 源码完成 L1 安装 + L2 加载 + L3 运行（dsh 0.1.0-rc.6）。

使用场景

改变 dsh 的外观或交互方式——一套主题、皮肤或新面板，重塑工作区。

适合谁

在 web UI 里一待几小时、想让它按自己的习惯好看又好用的人。

二次开发建议

皮肤、面板和主题 token 是扩展点——写新皮肤、加面板，或与上游配色同步 token。

安全：尚未扫描——我们的每日静态扫描将很快覆盖它。

分享徽章

UI & Skins 里更多

dsh-web-ui

✅ 已验证 · ★5802

dsh-market

✅ 已验证 · ★4875

DSH-better-sidebar

✅ 已验证 · ★3883

dsh-deep-whale

✅ 已验证 · ★2263

dsh-cc-tui

✅ 已验证 · ★1575

dsh-pet

✅ 已验证 · ★851

浏览全部 7797 个插件 →