Theming

Search Overlay

Themes

The search overlay is rendered by the CMS core (css/search.css) and is always present regardless of whether the search icon is visible in your navigation. Its visual appearance is controlled entirely through CSS custom properties that your theme defines in :root.

How it works

css/search.css is loaded before your theme's style.css via synaptikCSS.php. It uses CSS custom properties for every color and shape value — none are hardcoded. Your theme's :root declarations always win due to load order.

If a variable is missing from your theme, the overlay will render without that property (likely invisible or broken). All variables listed below are required.

Required CSS custom properties

Define these in the :root block of your theme's css/style.css:

:root {
  /* ── Search Overlay ─────────────────────────────── */
  --search-overlay-bg:        #1a1a18;        /* Full-screen overlay background + backdrop */
  --search-card-bg:           #2a2a25;        /* Result card background + input background */
  --search-card-bg-hover:     #111009;        /* Result card background on hover */
  --search-accent:            #3ea34e;        /* Input border, checkbox fill, clear button, scrollbar icon */
  --search-accent-dark:       #2d8a3d;        /* Close button background, scrollbar thumb, clear button hover */
  --search-accent-light:      #52c463;        /* Input border on focus, result title links */
  --search-text:              rgba(255,255,255,.85); /* Excerpt text, filter labels, count */
  --search-section-heading:   rgba(255,255,255,.35); /* "Articles" / "Projects" section headings */
  --search-radius:            4px;            /* Border radius for close button and UI elements */
}

Variable reference

Variable	Used on	Notes
`--search-overlay-bg`	Overlay background, `backdrop-filter` container	Should be semi-transparent or dark to create contrast with the page
`--search-card-bg`	Result card background, input field background	Should contrast against `--search-overlay-bg`
`--search-card-bg-hover`	Result card background on `:hover`	Typically darker than `--search-card-bg`
`--search-accent`	Input border, checkbox checked state, clear button background, nav icon	Your theme's primary accent color
`--search-accent-dark`	Close button background, scrollbar thumb, clear button `:hover`	Darker variant of `--search-accent`
`--search-accent-light`	Input border on `:focus`, result title link color	Lighter variant of `--search-accent`
`--search-text`	Excerpt text, filter checkbox labels, results count	Should be readable against `--search-card-bg`
`--search-section-heading`	"Articles", "Projects", "Pages" section headings	Usually muted — visually subordinate to result titles
`--search-radius`	Close button, UI controls	Set to match your theme's global border radius style

Light theme example

:root {
  --search-overlay-bg:        rgba(245, 243, 238, 0.97);
  --search-card-bg:           #eeeae0;
  --search-card-bg-hover:     #ffffff;
  --search-accent:            #e05522;
  --search-accent-dark:       #b83e15;
  --search-accent-light:      #ff7043;
  --search-text:              #1a1814;
  --search-section-heading:   #6b6660;
  --search-radius:            6px;
}

Dark theme example

:root {
  --search-overlay-bg:        #18181c;
  --search-card-bg:           #1a1a1f;
  --search-card-bg-hover:     #0c0c0e;
  --search-accent:            #8aff5e;
  --search-accent-dark:       #6ee048;
  --search-accent-light:      #a0ff7a;
  --search-text:              #e8e8ec;
  --search-section-heading:   #9090a0;
  --search-radius:            3px;
}

Referencing theme tokens

Rather than hardcoding colors, point the search variables at your existing theme tokens:

:root {
  /* ... your theme tokens ... */
  --color-primary:  #ff9e00;
  --color-primary-dark:  #f08700;
  --color-primary-light: #ffb84c;
  --bg-darker: #2e294e;

  /* Search — mapped to theme tokens */
  --search-overlay-bg:      var(--bg-darker);
  --search-card-bg:         rgba(255, 255, 255, 0.07);
  --search-card-bg-hover:   rgba(255, 255, 255, 0.03);
  --search-accent:          var(--color-primary);
  --search-accent-dark:     var(--color-primary-dark);
  --search-accent-light:    var(--color-primary-light);
  --search-text:            rgba(255, 255, 255, 0.85);
  --search-section-heading: rgba(255, 255, 255, 0.35);
  --search-radius:          var(--border-radius-sm);
}

Result type badge colors

The article, page, and project type badges use hardcoded colors in search.css and are not currently themeable via CSS custom properties:

Type	Default color
Article	`#489e64` (green)
Page	`#e6972f` (amber)
Project	`#3f82c5` (blue)

To override these in your theme, add rules with higher specificity:

.result-type.article { background-color: var(--color-primary); }
.result-type.page    { background-color: var(--color-secondary); }
.result-type.project { background-color: var(--color-accent); }

Highlight color

Matched search terms are highlighted with a hardcoded yellow (#fcf04c) on a dark text. This is intentionally fixed for readability and is not part of the theme palette.

Notes

--search-border-radius-sm (old name) and --search-secondary (unused) appeared in earlier theme templates — both are obsolete and should be removed from your theme.
The search overlay uses z-index: 1000. If your theme's navigation uses backdrop-filter, call render_adminbar() as the first child of <body> to avoid stacking context conflicts — the same pattern applies here.