components/theme-switch/theme-server.ts

Functions

Imports

It imports no other module of this repo. Imported by components/theme-switch/theme-switch.ts.

Source

1// The theme switch's server half: what a server-rendered site needs so the first byte already carries the person's
2// theme. Read the cookie, write it, and the one-line pre-paint script for a site that remembers the choice in
3// localStorage instead. No DOM and no framework, so it runs in a Worker, in Node and in the browser alike.
4// dustinedwards.info, Foxhound and txasm each wrote this for themselves; it lives here once.
5
6export type ThemeChoice = "light" | "dark";
7
8/** The localStorage key the theme switch remembers the choice under, unless a switch names its own (data-cap-pref). */
9export const THEME_PREF = "cap-theme";
10
11/** The cookie a site remembers the choice in, unless it has its own (txasm's "txasm_theme", Foxhound's "fh_theme"). */
12export const THEME_COOKIE = "theme";
13/** A year: the choice should outlast any visit gap a person would expect it to survive. */
14export const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
15
16export function isThemeChoice(value: unknown): value is ThemeChoice {
17  return value === "light" || value === "dark";
18}
19
20// The person's remembered choice from a Cookie header (or the request carrying one), or null when they never chose,
21// so the page follows the system. Anything unreadable is null too: a bad cookie costs the default theme, never a 500.
22export function readThemeCookie(source: Request | string | null | undefined, name = THEME_COOKIE): ThemeChoice | null {
23  const header = typeof source === "string" || source == null ? source : source.headers.get("cookie");
24  if (!header) return null;
25  for (const part of header.split(";")) {
26    const at = part.indexOf("=");
27    if (at < 0 || part.slice(0, at).trim() !== name) continue;
28    try {
29      const value = decodeURIComponent(part.slice(at + 1).trim());
30      return isThemeChoice(value) ? value : null;
31    } catch {
32      return null;
33    }
34  }
35  return null;
36}
37
38// The Set-Cookie value that remembers a choice: a year, the whole site, SameSite=Lax and Secure. A local http dev
39// server passes secure: false.
40export function themeCookie(choice: ThemeChoice, opts: { name?: string; maxAge?: number; secure?: boolean } = {}): string {
41  const { name = THEME_COOKIE, maxAge = THEME_COOKIE_MAX_AGE, secure = true } = opts;
42  return `${name}=${choice}; Path=/; Max-Age=${maxAge}; SameSite=Lax${secure ? "; Secure" : ""}`;
43}
44
45// The content of <meta name="color-scheme">: the choice, or "light dark" with none. data-theme means nothing until
46// the CSS parses, so without this the canvas the browser paints between pages is light.
47export function colorSchemeContent(choice: ThemeChoice | null): "light" | "dark" | "light dark" {
48  return choice ?? "light dark";
49}
50
51// The pre-paint script for a site that remembers the choice in localStorage: run inline in the head, before the
52// stylesheet, or the page flashes the other theme. A site with a Content Security Policy allows it by its hash, so
53// the text must be exactly this.
54export function themeScript(key = THEME_PREF): string {
55  return `try{var t=localStorage.getItem(${JSON.stringify(key)});if(t==="light"||t==="dark")document.documentElement.setAttribute("data-theme",t)}catch(e){}`;
56}