@edwardhamu/dsh-glassmorphism-theme

Readme

# dsh-glassmorphism-theme

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

![dsh-glassmorphism-theme preview](https://i0.wp.com/tva1.sinaimg.cn/large/9448bbf8gy1igbaivjxl6j21du0rb1kx.jpg)

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

```powershell
npm install
npm run typecheck
npm run build
```

## Install from npm into the local Web profile

Install the published package from [npm](https://www.npmjs.com/package/@edwardhamu/dsh-glassmorphism-theme):

```powershell
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.