Theming linkding to match the network

linkding is a small, self-hosted bookmark manager: fast, simple and pleasant to run. It's one of the tools behind the Private Hub. Out of the box it looks like what it is, a well-made default. We wanted it to look like it belonged to the rest of the network.

Start with the variables

Recent versions of linkding describe their colours, borders and shadows as CSS custom properties, and let you add your own CSS from the settings page. That means most of a theme is just redefining variables, without fighting the app's selectors. The Mallow theme opens with the palette:

:root {
  color-scheme: dark;

  --primary-color: #d9c68f;
  --primary-color-highlight: #eadba9;
  --text-color: #fffdf7;
  --secondary-text-color: rgb(255 253 247 / 68%);
  --link-color: #f0dda5;

  --body-color: #15221d;
  --border-color: rgb(255 255 255 / 20%);
  --input-bg-color: rgb(8 17 14 / 55%);

  --btn-primary-bg-color: #d9c68f;
  --btn-primary-text-color: #18231e;

  --bookmark-title-color: #f0dda5;
  --bookmark-description-color: rgb(255 253 247 / 78%);
  /* …and so on for menus, modals, switches and checkboxes */
}

The colours are the same ones used on this site: a deep forest green for the page, warm parchment for text, and a muted gold for links and primary buttons. Secondary text uses the parchment colour at reduced opacity rather than a separate grey, so everything stays the same hue.

A few targeted overrides

Variables get you most of the way. The rest is a short list of deliberate changes:

• The background. The page uses the same Appalachian ridge photo as this website, under a dark gradient so text stays readable. It's fixed in place on large screens and scrolls normally on phones, where fixed backgrounds tend to be slow.
• Frosted panels. The header, bookmark rows, side panel and settings pages get a translucent green background with backdrop-filter: blur(), rounded corners and a soft shadow, so the landscape shows through faintly.
• Serif headings. Section headings use Georgia, matching the headlines here. It's a system font, so nothing extra is downloaded.
• Gentle hover states. Bookmark rows pick up a faint gold border on hover, the same accent used for focus outlines.
• Reduced motion. If the operating system asks for reduced motion, transitions are switched off.

Using the theme

The theme is a single, public CSS file:

https://mallownetwork.com/assets/mallow-linkding-theme-v1.css

Copy its contents into linkding's custom CSS setting, save, and reload. Pasting the file in, rather than importing it from this site, keeps your linkding instance working even if this site is unreachable.

The v1 in the filename matters. Files under /assets/ are cached for a year (here's why), so any future revision will be published under a new name rather than changing this one underneath you.