Layout & Themes

Editing the layout

Click Edit Layout in the header (or press e) to enter edit mode.

In edit mode you can:

• Drag widgets by their title bar handle to reposition them
• Resize widgets by dragging any corner handle
• Collapse widgets to a single title bar row by clicking the chevron icon

Click Save Layout (or press Ctrl+S) to exit edit mode and persist positions.

Layout data is saved to the database immediately on drag-stop and resize-stop, so changes are not lost if you close the tab before clicking Save.

Responsive breakpoints

The grid adapts to screen width automatically:

Breakpoint	Min width	Columns
lg	1400px	24
md	1100px	20
sm	768px	12
xs	480px	8
xxs	0px	4

On smaller screens, widgets stack vertically into one or two columns. Layout editing is recommended on a desktop-width screen.

Enabling and disabling widgets

Go to Settings → Widgets to toggle widgets on or off. Disabled widgets are hidden from the grid but retain their configuration and position.

Collapsing widgets

Click the chevron (^) in any widget's header to collapse it to a single row. Collapsed state is saved per-widget and persists across page loads.

To set a widget to start collapsed by default, set defaultCollapsed: true in its config via Settings → Widgets → (widget) → Edit Config.

Themes

Seven built-in themes are available:

Theme	Variants
Default	Light, Dark
Nord	Light, Dark
Dracula	Dark
Solarized	Light, Dark

Switch themes via Settings → Appearance or click the palette icon in the header.

Custom themes

1. Go to Settings → Appearance → Create Theme
2. Name the theme and choose light or dark
3. Set colours for each CSS variable:
   • primary / primaryHover — accent colour
   • background / backgroundSecondary / backgroundTertiary — surface colours
   • textPrimary / textSecondary — text colours
   • border — border colour
4. Save — the theme is stored in the database and available immediately

Custom themes can be edited or deleted; built-in themes cannot be modified.

Header widgets

You can pin any widget to the header for always-visible access. Go to Settings → Preferences → Header Widgets and choose a widget for the left, centre, or right slot.

The centre slot has a configurable width (in pixels) so you can control how much space it occupies.

Useful candidates: Search, Weather, Time, Mastodon compose.