UI Customization
Customize the drydock dashboard appearance with themes, icon libraries, fonts, and layout preferences.
All UI preferences are configured in Config > Appearance and persisted in the browser's localStorage. No server-side environment variables are needed.
Themes
Drydock ships with 6 color themes, each available in dark and light variants:
| Theme | Style |
|---|---|
| One Dark (default) | Clean and balanced |
| GitHub | Clean, familiar |
| Dracula | Bold purple |
| Catppuccin | Warm pastels |
| Gruvbox | Retro earthy warmth |
| Ayu | Soft golden tones |
Switch themes in Config > Appearance. A circle-reveal transition animation plays when changing themes.
Icon Libraries
7 icon libraries are available:
| Library | Notes |
|---|---|
| Phosphor Duotone (default) | Two-tone style |
| Phosphor | Solid style |
| Lucide | |
| Tabler | |
| Heroicons | |
| Iconoir | |
| Font Awesome |
An icon size slider in Config > Appearance adjusts icon scale across the UI.
Font Families
6 monospace fonts are supported:
| Font | Notes |
|---|---|
| IBM Plex Mono (default) | Bundled offline |
| JetBrains Mono | Lazy-loaded from local /fonts/ |
| Source Code Pro | Lazy-loaded from local /fonts/ |
| Inconsolata | Lazy-loaded from local /fonts/ |
| Commit Mono | Lazy-loaded from local /fonts/ |
| Comic Mono | Lazy-loaded from local /fonts/ |
All non-default fonts are served locally from the container's /fonts/ directory — no external network requests are made. In internetless mode, all fonts fall back to IBM Plex Mono which is bundled in the image.
Font Size
An adjustable font size slider in Config > Appearance scales text across the entire UI. The setting is persisted in localStorage.
Command Palette
Open the command palette with Cmd+K (macOS) or Ctrl+K (Windows/Linux).
Scope prefixes
Type a prefix character to filter results:
| Prefix | Scope | Includes |
|---|---|---|
/ | Pages | Pages and settings navigation |
@ | Runtime | Agents, triggers, watchers |
# | Config | Registries, auth providers, notification rules |
Use arrow keys to navigate results, Enter to select, and Escape to close. Recent search history is persisted across sessions.
Border Radius
5 border radius presets control the roundness of UI elements:
| Preset | Description |
|---|---|
| None | No rounding (0px) |
| Sharp | Subtle rounding |
| Modern | Balanced rounding |
| Soft | Gentle rounding |
| Round | Maximum rounding |
Select a preset in Config > Appearance. The choice is persisted in localStorage.
Dashboard
The dashboard displays 4 stat cards: Containers, Updates, Security, and Registries. Cards are drag-reorderable and the layout is persisted in localStorage.
Update and security stats are color-coded based on severity ratio.
View Modes
All data views (Containers, Watchers, Registries, Triggers, Auth, Agents, Security) support three display modes:
| Mode | Description |
|---|---|
| Table (default) | Rows with interactive column resizing |
| Cards | Grid layout |
| List | Accordion-style |
Toggle between modes using the view mode buttons in the toolbar.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Cmd/Ctrl+K | Open command palette |
| Escape | Close detail panel or dialog |
| Enter | Confirm dialog action |
| Arrow keys | Navigate command palette results |
Announcement Banner
A dismissible banner appears at the top of the dashboard to surface release notes and important notices after upgrades. Once dismissed, the banner does not reappear until the next release. No configuration is needed — the banner is managed automatically by the UI.
Detail Panels
Clicking any row in a data view opens a slide-in detail panel with contextual information and actions. Detail panels are available on all views: Containers, Watchers, Registries, Triggers, Auth, Agents, and Security.