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 by default. No server-side environment variables are needed. Signed-in users can optionally turn on cross-device sync — see Sync across devices below.
Installable App (PWA)
Drydock is an installable Progressive Web App. Browsers that support installation (Chromium-based desktop and Android browsers, and Safari on iOS/iPadOS via "Add to Home Screen") can add Drydock as a standalone app with its own icon, launching in its own window without browser chrome.
On supported desktop and Android browsers, a dismissible install banner appears automatically once the browser signals the app is installable. Dismissing it is remembered in the browser's localStorage and the banner won't reappear. You can also trigger installation manually from the browser's own UI (for example, the install icon in Chrome's address bar) at any time, banner or not. iOS/iPadOS has no beforeinstallprompt event, so there the banner never appears — use Safari's Share menu → Add to Home Screen instead.
Offline behavior
The installed app (and the regular browser tab) is backed by a service worker that precaches the SPA shell — the HTML, JS, and CSS needed to boot Drydock — so the dashboard still loads without a network connection. The service worker updates itself automatically in the background and takes over immediately on the next load; there's no "update available" prompt to act on and no way to get stuck on a stale shell.
/api/* requests are always network-only and are never served from the service worker's cache, offline or not. Drydock is a live dashboard — showing stale container/update state would be worse than a request failing outright, so API calls always hit the live server and surface a normal connection error when it's unreachable. The same exclusion covers every other path the server owns rather than the SPA: /auth/* (including the OIDC /auth/oidc/<name>/cb callback), /health, and /metrics. Navigating to one of those always reaches the server, never the cached app shell.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 semantic text tokens across the entire UI. Headings, table headers, card titles, labels, body copy, and metadata use separate tokens so relative hierarchy stays intact as the global scale changes. 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 | Containers, 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 is a customizable grid of 9 widgets — 4 stat cards and 5 detail widgets — with drag-to-reorder, resize, and per-widget visibility controls. v1.6 uses a zero-dependency CSS Grid implementation with natural same-row reorder, touch support, bounded resizing, and separate responsive layouts. See the dedicated Dashboard guide for full details on widgets, edit mode, responsive breakpoints, and real-time updates.
Data Tables
All first-party table surfaces use the shared Drydock data table component. That includes Containers, Security, Audit, Agents, Watchers, Registries, Servers, Triggers, Auth, Notifications, Notification Outbox, dashboard table widgets, and compact configuration tables.
Data tables support:
- Stable column widths driven by each column's content role.
- Drag resizing with mouse or touch.
- Keyboard resizing from the column separator: ArrowLeft / ArrowRight adjust the width, and Shift makes larger steps.
- Double-click autosize on a column separator.
- Sticky action columns where row actions need to remain reachable while horizontally scrolling.
- Per-view width persistence in browser localStorage.
- Responsive column hiding on dense views such as Containers, where lower-priority metadata folds away before primary identifiers become unreadable.
View Modes
Data views that expose view-mode controls toggle between table and card presentation:
| Mode | Description |
|---|---|
| Table (default) | Rows with shared sizing, interactive column resizing, persisted widths, and sticky actions where relevant |
| Cards | Grid layout |
Toggle between modes using the view mode buttons in the toolbar where they are available. The choice is persisted per view. Below ~640px the layout automatically reflows to cards and the now-redundant toggle is hidden. Utility pages with naturally tabular data may use table-only presentation. The old three-way list (accordion) mode was removed in v1.6 — it's table or cards.
Column Visibility
Containers, Agents, Audit, Security, Servers, and Watchers each expose a column show/hide picker in the toolbar, letting you hide low-priority columns from the table. Hidden columns are persisted per view and have no effect in card mode.
On Containers, a column you still have checked "on" but that responsive sizing folded away to fit the viewport stays checked in the picker with a muted "{column} — hidden to fit" annotation, and the toolbar's "+N" hidden-columns badge tooltip names the auto-hidden columns — the picker never silently claims a column is showing when it isn't. At constrained laptop widths the secondary Software Version metadata column folds before Host, keeping the selected host identity visible while the Tag column still shows current and newer tags.
Container grouping
Turn on stack grouping in the Containers toolbar to organize rows by group. Docker-derived group priority is dd.group → Compose project → Swarm namespace → ungrouped.
To change the presentation without redeploying a container, open its More menu and choose Set group. Enter an existing or new group name, or clear the override to return to the Docker-derived group. Browser overrides take precedence only in this UI; they do not write Docker labels or change the container-groups API response. They are stored with the rest of the UI preferences and sync to other signed-in devices when Sync across devices is enabled.
Card Sorting
Containers, Agents, and Security cards include a sort-field and ascending/descending control in the toolbar when in card mode, so cards can be ordered the same way table rows can.
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.
Language / Locale
Drydock ships with 17 locales in v1.5.0. Switch language in Config > Appearance.
| Locale | Language |
|---|---|
en | English (default) |
zh-CN | Simplified Chinese |
zh-TW | Traditional Chinese |
it | Italian |
es | Spanish |
de | German |
fr | French |
pt-BR | Brazilian Portuguese |
nl | Dutch |
pl | Polish |
tr | Turkish |
ja | Japanese |
ko | Korean |
ru | Russian |
vi | Vietnamese |
uk | Ukrainian |
ar | Arabic |
Translation strings are managed via Crowdin. Want to help translate Drydock into your language? See the Translations guide.
Sync across devices
Preferences are local to the browser by default. Signed-in users can turn on Sync across devices, a toggle at the top of Config > Appearance, to also store the full preference set (theme, icon library, font, font size, border radius, dashboard layout, data table column choices, container group overrides, view mode, language, and this toggle's own state) server-side, keyed to the signed-in account.
- Off by default. Nothing changes until the toggle is turned on.
- Live propagation. Once enabled, changes push to the server and are pushed out to every other signed-in device or open tab in real time, so a change made on one device shows up on others without a manual refresh.
- Turning it off stops syncing but keeps the server-side copy — localStorage becomes authoritative on that device again. Turning it back on overwrites the server copy with the device's current local state.
- Not available in anonymous mode. With authentication disabled or an anonymous session, the toggle doesn't appear — there's no durable per-user identity to key a synced copy on.
- Conflict handling. If two devices change preferences around the same time, the last write wins; there's no merge.