Six palettes, each with a light half and a dark one

The theme was one enum -- system, light, dark, ihasmail -- where one value
carried a whole palette and implied dark. That works for exactly one
palette. The two questions now come apart: which palette, and which side.

Classic is the plain light and dark this app has always had. ihasmail's
own palette gains a day version, so the background of the dark one becomes
the text of the light one and the two read as one palette from either end.
Dracula, Gruvbox, Rosé Pine and Tokyo Night are the work of their own
projects, used under the MIT licence, and taken from each project's own
repository rather than from anyone's reimplementation. What was fetched is
recorded in .palette-sources/ and credited in NOTICE.

Giving ihasmail's palette a light half removed a whole special case.
Nothing is one-sided any more, so a palette can no longer override the
mode, the toggle no longer has to set a palette aside on the way to light
and remember it, and the greyed-out control that explained all that is
gone. The old lastDarkTheme, which existed only for that, is gone with it.

The shades between the published colours are derived rather than guessed:
these projects publish twelve to twenty values and ihasmail needs about
thirty. scripts/build-palettes.py computes the tiers and then measures
every text colour against the surface it sits on -- 4.5:1 for prose, 3:1
for borders and marks -- lifting anything short towards white on a dark
ground and towards black on a light one, so a lifted tier keeps its hue.
It refuses to write a palette that would not pass.

Every one of the nine halves needed at least one lift. These palettes are
built for code editors, not for prose at this size: Dracula's comment grey
is 3.03:1 on its own background and Rosé Pine's gold is 2.7:1 on Dawn.
Shipping them as published would have quietly ended the WCAG AA claim.

Two things caught while checking rather than while writing. The generated
blocks were appended to the end of the stylesheet, which put them after
the accent variants at equal specificity -- so choosing an accent over one
of the new palettes did nothing at all. They now sit before those rules,
where the existing ihasmail block's own comment says they have to. And
that block was unqualified, so it would have shadowed the new light half;
it is now explicitly the dark one.

Settings written before this carry `theme` and no palette, and are read
through the old enum. `theme` is still written back, derived, because a
device on an older build reads it and would otherwise be stranded on a
theme nobody chose.

web/src/lib/__tests__/palette.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { effectiveMode, legacyTheme, migrateTheme, paletteMeta, PALETTES, toggleTarget } from "@/lib/palette";
+
+describe("the palettes themselves", () => {
+  it("has a light and a dark half for every one of them", () => {
+    // The reason there is no "this palette is dark only" machinery: there is
+    // no such palette. ihasmail's own gained a light half, and the override,
+    // the toggle's memory and a greyed-out control all went with it.
+    expect(PALETTES.map((p) => p.id)).toEqual(["default", "ihasmail", "dracula", "gruvbox", "rose-pine", "tokyo-night"]);
+  });
+
+  it("credits every borrowed palette and neither of ihasmail's own", () => {
+    for (const p of PALETTES) {
+      if (p.id === "default" || p.id === "ihasmail") expect(p.credit).toBeUndefined();
+      else expect(p.credit).toMatch(/MIT/);
+    }
+  });
+
+  it("falls back to the default for an id it does not know", () => {
+    expect(paletteMeta("nonsense").id).toBe("default");
+    expect(paletteMeta(null).id).toBe("default");
+  });
+});
+
+describe("effectiveMode", () => {
+  it("follows the system when asked to", () => {
+    expect(effectiveMode("system", true)).toBe("dark");
+    expect(effectiveMode("system", false)).toBe("light");
+  });
+
+  it("takes an explicit mode over the system", () => {
+    expect(effectiveMode("light", true)).toBe("light");
+    expect(effectiveMode("dark", false)).toBe("dark");
+  });
+});
+
+describe("migrateTheme, which has to keep working indefinitely", () => {
+  it("reads every value the old enum could hold", () => {
+    expect(migrateTheme("ihasmail")).toEqual({ palette: "ihasmail", mode: "dark" });
+    expect(migrateTheme("light")).toEqual({ palette: "default", mode: "light" });
+    expect(migrateTheme("dark")).toEqual({ palette: "default", mode: "dark" });
+    expect(migrateTheme("system")).toEqual({ palette: "default", mode: "system" });
+  });
+
+  it("gives a new account what it would have got anyway", () => {
+    // Absent, unknown, or written by something newer.
+    for (const v of [undefined, null, "", "gruvbox-ish", "whatever"]) {
+      expect(migrateTheme(v)).toEqual({ palette: "ihasmail", mode: "dark" });
+    }
+  });
+});
+
+describe("legacyTheme, read by a device still on an older build", () => {
+  it("round-trips the four values the old enum had", () => {
+    for (const v of ["ihasmail", "light", "dark", "system"] as const) {
+      expect(legacyTheme(migrateTheme(v))).toBe(v);
+    }
+  });
+
+  it("expresses a new palette as the light or dark it actually is", () => {
+    // It cannot say "Gruvbox", but it can say dark, which is the half that
+    // stops an older device showing a theme nobody chose.
+    expect(legacyTheme({ palette: "gruvbox", mode: "dark" })).toBe("dark");
+    expect(legacyTheme({ palette: "rose-pine", mode: "light" })).toBe("light");
+    expect(legacyTheme({ palette: "tokyo-night", mode: "system" }, true)).toBe("dark");
+    expect(legacyTheme({ palette: "tokyo-night", mode: "system" }, false)).toBe("light");
+    // ihasmail's light half is new and has no old name, so an older build is
+    // told "light" rather than being handed a word it would read as dark.
+    expect(legacyTheme({ palette: "ihasmail", mode: "light" })).toBe("light");
+    expect(legacyTheme({ palette: "ihasmail", mode: "dark" })).toBe("ihasmail");
+  });
+});
+
+describe("toggleTarget", () => {
+  it("flips the mode and keeps the colours, whatever the palette", () => {
+    for (const palette of ["default", "ihasmail", "gruvbox", "dracula", "rose-pine", "tokyo-night"] as const) {
+      expect(toggleTarget({ palette, mode: "dark" }, false)).toEqual({ palette, mode: "light" });
+      expect(toggleTarget({ palette, mode: "light" }, false)).toEqual({ palette, mode: "dark" });
+    }
+  });
+
+  it("reads the system when the mode is system", () => {
+    expect(toggleTarget({ palette: "default", mode: "system" }, true).mode).toBe("light");
+    expect(toggleTarget({ palette: "default", mode: "system" }, false).mode).toBe("dark");
+  });
+});

web/src/lib/__tests__/settingsSync.test.ts

@@ -43,20 +43,27 @@ describe("which settings follow the account", () => {
 });
 
 describe("applying a settings file", () => {
+  /*
+   * A file carrying the old `theme` and no palette is read through the old
+   * enum, so these gain the two fields it resolves to. That is the migration,
+   * not a leak: see the palette tests for the rule itself.
+   */
+  const MIGRATED_DARK = { theme: "dark", palette: "default", mode: "dark" };
+
   it("takes known, non-device keys", () => {
     const applied = acceptRemote({ theme: "dark", weekStart: 0, locale: "de-DE" });
-    expect(applied).toEqual({ theme: "dark", weekStart: 0, locale: "de-DE" });
+    expect(applied).toEqual({ ...MIGRATED_DARK, weekStart: 0, locale: "de-DE" });
   });
 
   it("ignores keys it has never heard of", () => {
     // A newer ihasmail's settings, or a hand-edited file.
-    expect(acceptRemote({ theme: "dark", somethingNewer: 42 })).toEqual({ theme: "dark" });
+    expect(acceptRemote({ theme: "dark", somethingNewer: 42 })).toEqual(MIGRATED_DARK);
   });
 
   it("refuses device keys even when the file carries them", () => {
     // An earlier build wrote the whole settings object up; that file must not
     // now drag one machine's pane width onto every other one.
-    expect(acceptRemote({ theme: "dark", listPaneWidth: 900, fontSize: "large" })).toEqual({ theme: "dark" });
+    expect(acceptRemote({ theme: "dark", listPaneWidth: 900, fontSize: "large" })).toEqual(MIGRATED_DARK);
   });
 
   it("does not invent keys from an empty file", () => {

web/src/lib/__tests__/theme.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
-import { DEFAULT_SETTINGS, DEVICE_KEYS, acceptRemote, isDarkTheme, syncedPart, toggleTarget, useSettings, type Theme } from "@/store/settings";
+import { DEFAULT_SETTINGS, DEVICE_KEYS, acceptRemote, isDarkTheme, syncedPart, useSettings, type Theme } from "@/store/settings";
+import { toggleTarget, type Mode, type PaletteId } from "@/lib/palette";
 import { loadJson, saveJson, setDeviceTrusted } from "@/lib/storage";
 
 /**
@@ -98,55 +99,49 @@ describe("the default theme", () => {
 
 describe("the top-bar toggle", () => {
   it("goes to light from anything dark", () => {
-    expect(toggleTarget("dark", "ihasmail")).toBe("light");
-    expect(toggleTarget("dark", "dark")).toBe("light");
-    expect(toggleTarget("dark", "system")).toBe("light");
+    expect(toggleTarget({ palette: "ihasmail", mode: "dark" }, false).mode).toBe("light");
+    expect(toggleTarget({ palette: "default", mode: "dark" }, false).mode).toBe("light");
+    expect(toggleTarget({ palette: "default", mode: "system" }, true).mode).toBe("light");
   });
 
-  it("comes back to the theme you were actually on", () => {
-    // The whole point: two clicks from ihasmail must return to ihasmail, not
+  it("comes back to the palette you were actually on", () => {
+    // The whole point: two presses from ihasmail must return to ihasmail, not
     // deposit you on plain dark.
-    expect(toggleTarget("light", "ihasmail")).toBe("ihasmail");
-    expect(toggleTarget("light", "dark")).toBe("dark");
-  });
-
-  it("can bring back \"match system\", which the toggle used to strand", () => {
-    expect(toggleTarget("light", "system")).toBe("system");
-  });
-
-  it("round-trips every dark theme there is", () => {
-    for (const t of ["dark", "ihasmail", "system"] as const) {
-      expect(toggleTarget(toggleTarget("light", t) === "light" ? "light" : "dark", t), t).toBe("light");
-      expect(toggleTarget("light", t), t).toBe(t);
-    }
+    const away = toggleTarget({ palette: "ihasmail", mode: "dark" }, false);
+    expect(toggleTarget(away, false).palette).toBe("ihasmail");
+    expect(toggleTarget({ palette: "default", mode: "light" }, false)).toMatchObject({ palette: "default", mode: "dark" });
   });
 });
 
-describe("remembering which dark theme you were on", () => {
-  const setTheme = (t: Theme) => {
-    useSettings.getState().update({ theme: t });
+describe("remembering the palette you were on", () => {
+  const set = (palette: PaletteId, mode: Mode) => {
+    useSettings.getState().update({ palette, mode });
     return useSettings.getState().settings;
   };
 
-  it("records a dark theme chosen from Settings, not just from the toggle", () => {
-    // update() is the single path every way of choosing a theme goes through,
-    // which is why the remembering lives there rather than at the call sites.
-    expect(setTheme("dark").lastDarkTheme).toBe("dark");
-    expect(setTheme("ihasmail").lastDarkTheme).toBe("ihasmail");
-    expect(setTheme("system").lastDarkTheme).toBe("system");
-  });
-
-  it("does not let light overwrite it — that is the theme being toggled away from", () => {
-    setTheme("ihasmail");
-    expect(setTheme("light").lastDarkTheme).toBe("ihasmail");
+  it("derives the legacy theme from whatever set the palette or mode", () => {
+    // `theme` is no longer chosen; it is kept in step so a device on an older
+    // build is not stranded on a theme nobody picked.
+    expect(set("default", "dark").theme).toBe("dark");
+    expect(set("ihasmail", "dark").theme).toBe("ihasmail");
+    expect(set("default", "system").theme).toBe("system");
+    expect(set("gruvbox", "light").theme).toBe("light");
+    expect(set("dracula", "dark").theme).toBe("dark");
   });
 
   it("survives a there-and-back through the toggle", () => {
-    setTheme("ihasmail");
-    const away = setTheme(toggleTarget("dark", useSettings.getState().settings.lastDarkTheme));
-    expect(away.theme).toBe("light");
-    const back = setTheme(toggleTarget("light", away.lastDarkTheme));
-    expect(back.theme).toBe("ihasmail");
+    // Two presses return you exactly where you started, and the palette never
+    // moves -- which is the whole of what the old lastDarkTheme existed for.
+    set("ihasmail", "dark");
+    const away = toggleTarget({ palette: "ihasmail", mode: "dark" }, false);
+    expect(away).toEqual({ palette: "ihasmail", mode: "light" });
+    expect(toggleTarget(away, false)).toEqual({ palette: "ihasmail", mode: "dark" });
+  });
+
+  it("keeps the colours when the palette has both sides", () => {
+    const away = toggleTarget({ palette: "gruvbox", mode: "dark" }, false);
+    expect(away.palette).toBe("gruvbox");
+    expect(away.mode).toBe("light");
   });
 });
 
@@ -159,12 +154,30 @@ describe("where the theme settings live", () => {
     // its expectation would move too.
     const synced = syncedPart(DEFAULT_SETTINGS);
     expect(synced).toHaveProperty("theme");
-    expect(synced).toHaveProperty("lastDarkTheme");
-    expect(DEVICE_KEYS.has("theme")).toBe(false);
-    expect(DEVICE_KEYS.has("lastDarkTheme")).toBe(false);
+    expect(synced).toHaveProperty("palette");
+    expect(synced).toHaveProperty("mode");
+    for (const k of ["theme", "palette", "mode"] as const) {
+      expect(DEVICE_KEYS.has(k)).toBe(false);
+    }
   });
 
   it("is applied from a settings file another device wrote", () => {
-    expect(acceptRemote({ theme: "dark", lastDarkTheme: "dark" })).toEqual({ theme: "dark", lastDarkTheme: "dark" });
+    expect(acceptRemote({ palette: "gruvbox", mode: "light" })).toEqual({ palette: "gruvbox", mode: "light" });
+  });
+
+  it("reads a file written before palettes existed through the old enum", () => {
+    // Settings live in the account's Files and are opened by whatever version
+    // runs next, so this is not a one-release migration.
+    expect(acceptRemote({ theme: "ihasmail" })).toMatchObject({ palette: "ihasmail", mode: "dark" });
+    expect(acceptRemote({ theme: "light" })).toMatchObject({ palette: "default", mode: "light" });
+  });
+
+  it("prefers the new fields when a file carries both", () => {
+    // A file with both is newer, and its `theme` is the derived copy rather
+    // than the choice -- so it must not overrule the palette beside it.
+    expect(acceptRemote({ theme: "dark", palette: "rose-pine", mode: "light" })).toMatchObject({
+      palette: "rose-pine",
+      mode: "light",
+    });
   });
 });