dsh-glassmorphism-theme

dsh-glassmorphism-theme

Material Design 3 glassmorphism theme for the DeepSeek Harness Web UI.

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:

1. Choose source:

   • Upload a local image file (JPG, PNG, WebP, etc.)
   • Enter an HTTP/HTTPS image URL

2. 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

3. 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.