Theme gallery: contribute a skin

[7akob]

Skood ships with three themes: Classic 2008 (default), Neon 90s, and Midnight. The theming system makes new ones cheap, and this issue is the front door for contributing a skin.

How a theme works

Everything lives in public/style.css:

1. A token block at the top: html[data-theme="yourtheme"] { --bg-page: ...; } overriding the ~60 custom properties defined on :root (colors, fonts, borders, shadows, radii). See the neon90s and midnight blocks for the two reference implementations.
2. Structural overrides (only if your theme reshapes things) in a section above the mobile media query. Midnight rounds the cards and turns system messages into left-accent notices there, for example.
3. Wiring, one line each: an <option> in both .theme-selects in index.html, entries in THEMES and THEME_COLORS in script.js, the head snippet's VALID list in index.html, a service-worker cache-name bump in sw.js, and a screenshot for the README table.

The one hard rule: theme blocks change look only (color, background, border, shadow, font, alignment, radius), never layout properties the mobile media query owns. The full checklist is in CONTRIBUTING.md.

Free starter: "Daylight" (modern light)

A light sibling of Midnight was designed but not shipped. Same indigo accent, light surfaces, contrast checked. If you want a nearly-done first contribution, build it from this token delta (for the structural section, reuse Midnight's rules with daylight added to the selectors):

html[data-theme="daylight"] {
  color-scheme: light;
  --bg-page: #F6F7F9;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-page: 14px;  --page-align: left;
  --text-main: #1E293B;  --text-muted: #64748B;  --text-faint: #64748B;
  --text-empty: #64748B;  --emph: #0F172A;
  --h1-color: #0F172A;  --h1-shadow: none;  --h1-size: 24px;
  --h2-color: #1E293B;  --h2-shadow: none;  --fav-h2: #1E293B;
  --control-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --control-size: 13px;  --control-padding: 6px 14px;
  --btn-bg: #FFFFFF;  --btn-bg-hover: #F1F5F9;  --btn-border: 1px solid #CBD5E1;
  --btn-small-border-w: 1px;  --btn-text: #1E293B;  --btn-radius: 8px;
  --btn-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --input-bg: #FFFFFF;  --input-border: 1px solid #CBD5E1;  --input-text: #0F172A;
  --loop-on-bg: #4F46E5;  --loop-on-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.2);
  --panel-bg: #FFFFFF;
  --panel-border: 1px solid #E2E8F0;  --panel-border-heavy: 1px solid #E2E8F0;
  --panel-fav-border: 1px solid #E2E8F0;
  --glow-panel: 0 1px 3px rgba(15, 23, 42, 0.08);
  --glow-panel-fav: 0 1px 3px rgba(15, 23, 42, 0.08);
  --glow-box: 0 8px 24px rgba(15, 23, 42, 0.08);
  --chat-inset: 0 1px 3px rgba(15, 23, 42, 0.08);
  --panel-head-bg: none;
  --divider-bg: #E5E7EB;
  --row-line: 1px solid rgba(15, 23, 42, 0.06);  --row-line-fav: 1px solid rgba(15, 23, 42, 0.06);
  --msg-line: none;
  --thumb-border: 1px solid rgba(15, 23, 42, 0.08);  --thumb-border-fav: 1px solid rgba(15, 23, 42, 0.08);
  --player-border: 1px solid #E2E8F0;  --player-glow: 0 8px 24px rgba(15, 23, 42, 0.10);
  --ok: #059669;  --ok-glow: 0 0 0 3px rgba(5, 150, 105, 0.15);
  --warn: #D97706;  --warn-glow: 0 0 0 3px rgba(217, 119, 6, 0.15);
  --danger: #DC2626;
  --star: #D97706;  --star-hover: #B45309;
  --icon-btn: #64748B;  --icon-btn-hover: #4F46E5;  --now-color: #0F172A;
  --chat-time: #64748B;  --chat-name: #1E293B;  --chat-name-self: #4F46E5;
  --chat-text: #334155;
  --sys-bg: rgba(79, 70, 229, 0.05);  --sys-border-color: #6366F1;  --sys-text: #64748B;
  --tip-bg: #0F172A;  --tip-text: #F8FAFC;  --tip-border: none;
}

Other ideas

Vaporwave, CRT terminal green, high-contrast accessibility, seasonal skins. Go wild, it's a party app.

PR checklist

• Token block covers every :root token
• Structural mirrors for anything the base look hardcodes (see the Midnight section for the list)
• Both <select>s, THEMES, THEME_COLORS, head-snippet VALID, sw cache bump
• Look-only changes in theme blocks (mobile layout untouched)
• Screenshot added to docs/screenshots/ and the README table