dsh-glassmorphism-theme
Material Design 3 glassmorphism theme for the DeepSeek Harness Web UI.
dsh-glassmorphism-theme preview
This plugin applies a modern glassmorphism (frosted glass) aesthetic with
custom wallpaper support, transparent surfaces, and backdrop blur effects.
It's client-only, mapping MD3 design tokens onto DSH's semantic CSS without
replacing DOM structure or modifying application settings.
Features
Glassmorphism Effects
- Backdrop blur and transparency: Sidebar, top bar, composer card, chat glass layer,
settings panel, and all menus/portals use
backdrop-filter with 10px blur and 115% saturation.
- Semi-transparent surfaces: Chat bubbles and code blocks use 30% opacity backgrounds,
selected sidebar rows use 30% opacity, preserving text and syntax highlighting clarity.
- Nested menu optimization: Command and model menus use pseudo-element glass layers to
avoid nested backdrop-filter conflicts, ensuring visible blur effects.
- Performance-optimized chat layer: Fixed-position glass background covers only the visible
chat viewport (not the full message list), updated on resize/layout changes, never on scroll.
Custom Wallpaper
- Built-in wallpaper settings: A
壁纸 page in the native Settings dialog supports:
- Local image files (stored in IndexedDB, never uploaded)
- HTTP/HTTPS image URLs (validated and preloaded)
- Fill modes: cover, contain, auto
- Position: center, top, bottom, left, right
- Readability overlay with adjustable darkness
- Enable/disable and clear controls
- Privacy-first storage: Wallpaper images stay in the browser profile's IndexedDB;
lightweight preferences use localStorage. Nothing is sent to DSH services.
- Single fixed layer: One
position: fixed wallpaper element at page bottom, with
all glass surfaces layered above.
Material Design 3 Foundation
- Color system: Light and dark palettes synchronized with DSH's
data-ds-dark-theme,
covering surface hierarchy, primary/secondary/tertiary/error, success, and warning roles.
- Typography & spacing: MD3 type scale and 4dp grid.
- Elevation & interaction: Restrained shadows, state layers, visible keyboard focus,
and accessible contrast.
- Comprehensive coverage: Sidebar, session rows, composer, bubbles, menus, dialogs,
settings, form fields, buttons, scrollbars, cards, and responsive viewport adjustments.
Accessibility & Compatibility
- Reduced transparency mode: Respects
prefers-reduced-transparency (uses same 10px blur).
- Backdrop-filter fallback: Transparent backgrounds when
backdrop-filter is unavailable.
- Reduced motion: Respects
prefers-reduced-motion.
Build
npm install
npm run typecheck
npm run build
Install from npm into the local Web profile
Install the published package from npm:
dsh plugin --profile web add "@edwardhamu/dsh-glassmorphism-theme"
Reload http://localhost:3080 after installation. Use the existing Appearance
setting to switch between light and dark palettes.
Wallpaper Setup
Open 设置 → 壁纸 to configure your background:
-
Choose source:
- Upload a local image file (JPG, PNG, WebP, etc.)
- Enter an HTTP/HTTPS image URL
-
Adjust display:
- Fill mode: Cover (default, fills viewport), Contain (fit within), or Auto
- Position: Center, Top, Bottom, Left, Right
- Readability overlay: Add a dark tint (0–100%) to improve text contrast
-
Enable the wallpaper to activate glassmorphism effects across the UI.
The wallpaper is off by default and stored locally in your browser profile.
No images or settings are synced or uploaded to DSH servers.
