Admin UI: CSS theme and base templates

Nobody has claimed this yet.

Parent: #69
Depends on: #70

Scope

CSS (`admin/static/style.css`)

Dark-first design using CSS custom properties. Inspired by the Oxide Console — dense, functional, monospace data typography, minimal chrome.

Design tokens:

:root, [data-theme="dark"] {
  --bg-primary: #0e1015;
  --bg-secondary: #1a1d24;
  --bg-tertiary: #24272e;
  --border: #30343c;
  --text-primary: #e0e2e6;
  --text-secondary: #9ba1ad;
  --text-muted: #6b7280;
  --accent: #48d597;
  --accent-dim: #2a7d58;
  --danger: #ef4444;
  --font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", monospace;
  --font-sans: "Inter", system-ui, sans-serif;
}

[data-theme="light"] {
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f1f3;
  --border: #d1d5db;
  --text-primary: #1a1d24;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;
  --accent: #059669;
  --accent-dim: #d1fae5;
}

Components to style:

Tables: Dense rows (~36px height), monospace font for patterns/values, subtle --border row separators, no zebra striping, sticky header
Cards/stat boxes: --bg-secondary background, thin --border, no shadows, compact padding
Navigation sidebar: Fixed left, --bg-secondary background, --accent active state, collapses to top bar at @media (max-width: 768px)
Badges/pills: Small inline elements for group names, --bg-tertiary background, rounded
Forms: Minimal input styling for login page
Buttons: Primary uses --accent, secondary is ghost/outline

Templates

templates/layout.html — Base HTML shell:

{{define "layout"}}
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gadget Admin{{if .PageTitle}} — {{.PageTitle}}{{end}}</title>
  <link rel="stylesheet" href="/admin/static/style.css">
</head>
<body>
  {{template "nav" .}}
  <main>{{template "content" .}}</main>
  <script>/* theme toggle, ~15 lines */</script>
</body>
</html>
{{end}}

templates/partials/nav.html — Sidebar navigation:

Links: Dashboard, Routes, Groups, Users, Config
Active state via .ActivePage template variable
Theme toggle button (dark/light/system cycle)
"Gadget" brand text at top

templates/pages/login.html — Login page:

Centered card with "Sign in with Slack" button
Optional error message for failed auth

Theme toggle (inline script in layout.html)

// ~15 lines: read localStorage('gadget-theme'), fall back to prefers-color-scheme,
// set data-theme on <html>, button click cycles dark → light → system

Template parsing strategy

In NewHandler(), parse each page template individually so each gets the layout + partials:

templates["dashboard"] = template.Must(
    template.ParseFS(embeddedFS,
        "templates/layout.html",
        "templates/partials/nav.html",
        "templates/pages/dashboard.html",
    ),
)

Store in AdminHandler.templates map, keyed by page name.

Review parent issue #69 and dependency #70 first, then inspect admin/static/style.css, the templates/layout.html and templates/partials/nav.html paths, and NewHandler(). Implement the listed theme, navigation, login, and component requirements, with each page template parsed into AdminHandler.templates. Done means the named pages share the layout and the responsive dark/light/system theme behavior works.

Written by the indexing model from the issue text.

Description

Scope

CSS (`admin/static/style.css`)

Templates

Theme toggle (inline script in layout.html)

Template parsing strategy

Contributor guide

First steps

Research direction

Assessment

Admin UI: CSS theme and base templates

Description

Scope

CSS (admin/static/style.css)

Templates

Theme toggle (inline script in layout.html)

Template parsing strategy

Contributor guide

First steps

Research direction

Assessment

Get new issues in your inbox

CSS (`admin/static/style.css`)