Customisation

How to change colours, fonts, branding, and layout — all through CSS custom properties.

Where to make changes

All visual settings are controlled by CSS custom properties in the :root block at the top of the <style> tag in every page. You don't need to touch JavaScript or HTML structure.

Changing your brand name

Search for GlobalDocs Atlas across all files and replace with your product name. It appears in the <title> tag and the .brand link in the topbar.

Changing the accent colour

:root {
  --accent:      #2a5bd7;  /* light mode */
  --accent-soft: #edf1fd;
}
[data-theme="dark"] {
  --accent:      #4f7ef5;  /* dark mode */
  --accent-soft: #1a2340;
}

Accent colour presets:

Changing fonts

Replace the Google Fonts <link> tags in <head> and update the font-family references in CSS.

body { font-family: 'Sora', sans-serif; }
code, .breadcrumb, .nav-group-label {
  font-family: 'IBM Plex Mono', monospace;
}

Changing sidebar width

:root { --sidebar-w: 272px; }

Global find-and-replace

CSS tokens are duplicated in every file. Use Cmd+Shift+H (Mac) or Ctrl+Shift+H (Windows) in VS Code to replace a value across all files at once.

Customising search appearance

.topbar-search .pagefind-ui {
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--surface-2);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-border-radius: var(--radius);
}