Split the "white/black" theme into two separate White and Black themes

User feedback after delivery 26: "wheres white and black themes?" -
the previous "Light" theme (white bg, black text) was a reasonable
literal reading of "have white/black" as one combined theme, but the
user meant two distinct named themes.

Renamed that theme's id/label from "light" to "White" and added a
genuinely new "Black" theme: a true near-black background with a
deliberately grayscale accent (light neutral grays instead of any
hue), so it reads as an actual black-and-white theme rather than
"Aurora but darker" - Aurora already covers the teal/green-accented
dark look. White keeps its colorful green/cyan/lilac accents, which
is now the visual difference between the two beyond just background
color. Settings now lists 5 themes total (Aurora/White/Black/Ocean/
Sunset); the picker grid moved from 2 to 3 columns to fit them
better.

Verified with an expanded Playwright script (12 checks, up from 10):
confirms all 5 themes list correctly, White and Black each apply
their real computed background color (not just the data-theme
attribute) and persist via save_theme, and the rest of the boot-time/
persistence behavior from delivery 26 still holds. All prior
verification suites (47 checks), `cargo test --workspace` (162
tests), and `npm run build` still pass clean.

src/App.tsx

@@ -11,7 +11,7 @@ import ListPanel from "./components/ListPanel";
 import PanelStub from "./components/PanelStub";
 import { applyTheme, DEFAULT_THEME, type ThemeId } from "./components/SettingsModal";
 
-const THEME_IDS: ThemeId[] = ["aurora", "light", "ocean", "sunset"];
+const THEME_IDS: ThemeId[] = ["aurora", "white", "black", "ocean", "sunset"];
 
 export default function App() {
   const [selected, setSelected] = useState(PANELS[0].id);

src/components/SettingsModal.css

@@ -1,6 +1,6 @@
 .theme-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   margin: 4px 0 4px;
 }

src/components/SettingsModal.tsx

@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import "./SettingsModal.css";
 
-export type ThemeId = "aurora" | "light" | "ocean" | "sunset";
+export type ThemeId = "aurora" | "white" | "black" | "ocean" | "sunset";
 
 export const DEFAULT_THEME: ThemeId = "aurora";
 
@@ -24,7 +24,8 @@ interface ThemeDef {
 
 const THEMES: ThemeDef[] = [
   { id: "aurora", name: "Aurora", description: "The original dark teal & green look.", swatch: ["#08252b", "#55d7a9", "#52c7db"] },
-  { id: "light", name: "Light", description: "Clean white background, black text.", swatch: ["#ffffff", "#1f9d74", "#157e9c"] },
+  { id: "white", name: "White", description: "White background, black text, colorful accents.", swatch: ["#ffffff", "#1f9d74", "#157e9c"] },
+  { id: "black", name: "Black", description: "True black background, white text, grayscale accents.", swatch: ["#000000", "#e5e5e5", "#bfbfbf"] },
   { id: "ocean", name: "Ocean", description: "A cool blue-toned dark theme.", swatch: ["#071c2e", "#4fd0e8", "#5aa9ff"] },
   { id: "sunset", name: "Sunset", description: "A warm amber-toned dark theme.", swatch: ["#2b1408", "#f0955a", "#f0b66b"] },
 ];

src/theme.css

@@ -2,7 +2,7 @@
    the original FB-Mod fork's AuroraTheme.java / HeaderPanel.java / MainFrame.java so
    the rewrite looks like a continuation of that design rather than a random restyle
    (the app takes its name, "Aurora Curator", from this same Aurora theme) - it stays
-   the default. The other three theme blocks below (light/ocean/sunset) are Aurora
+   the default. The other four theme blocks below (white/black/ocean/sunset) are Aurora
    Curator's own additions, picked via Settings (gear icon, sidebar footer) and applied
    as a `data-theme` attribute on <html>; every visible color in the app is meant to
    flow through one of these custom properties so switching theme is just switching
@@ -53,12 +53,14 @@
   --header-height: 68px;
 }
 
-/* Light - a clean white/black theme, the most literal reading of "white/black" from
+/* White - a clean white-background/black-text theme, the literal "white" half of the
-   the theming request. --dock-deep doubles as "the text color that sits well on top
+   theming request. --dock-deep doubles as "the text color that sits well on top of
-   of --aurora-green" (see RenamePanel.css's .action-button.primary) - here that's
+   --aurora-green" (see RenamePanel.css's .action-button.primary) - here that's white,
-   white, since this theme's --aurora-green is deliberately darkened for contrast on a
+   since this theme's --aurora-green is deliberately darkened for contrast on a white
-   white page, the opposite of the dark themes' light-green-on-dark-text pairing. */
+   page, the opposite of the dark themes' light-green-on-dark-text pairing. Keeps
-:root[data-theme="light"] {
+   colorful accents (green/cyan/lilac) unlike Black below, which is deliberately
+   grayscale - that's the visual difference between the two beyond just background. */
+:root[data-theme="white"] {
   --dock: #eef2f3;
   --dock-deep: #ffffff;
   --dock-mist: #dde7e9;
@@ -89,6 +91,42 @@
   --tint-16: rgba(0, 0, 0, 0.14);
 }
 
+/* Black - a true near-black/white theme, the literal "black" half of the theming
+   request. Deliberately grayscale (no hue in --aurora-green/cyan/lilac, unlike every
+   other theme including White above) so it reads as an actual black-and-white theme
+   rather than just "Aurora but darker" - --aurora-green here is a light neutral gray
+   that still works as the primary-button accent against --dock-deep's pure black. */
+:root[data-theme="black"] {
+  --dock: #0a0a0a;
+  --dock-deep: #000000;
+  --dock-mist: #1a1a1a;
+  --dock-line: #2e2e2e;
+  --surface: #000000;
+  --surface-alt: #0d0d0d;
+  --surface-deep: #262626;
+  --card: #111111;
+  --text: #f5f5f5;
+  --muted-text: #9a9a9a;
+  --aurora-green: #e5e5e5;
+  --aurora-cyan: #d0d0d0;
+  --aurora-lilac: #bfbfbf;
+  --sunset: #cfcfcf;
+  --list-selection: #262626;
+  --dock-selection: #202020;
+  --btn-bg: #141414;
+  --btn-bg-hover: #1f1f1f;
+  --btn-bg-active: #2a2a2a;
+  --popup-bg: #0d0d0d;
+  --accent-hover: #ffffff;
+  --header-grad-a: #050505;
+  --header-grad-b: #000000;
+  --tint-02: rgba(255, 255, 255, 0.02);
+  --tint-03: rgba(255, 255, 255, 0.03);
+  --tint-05: rgba(255, 255, 255, 0.05);
+  --tint-06: rgba(255, 255, 255, 0.06);
+  --tint-16: rgba(255, 255, 255, 0.16);
+}
+
 /* Ocean - a cool blue-toned dark variant. */
 :root[data-theme="ocean"] {
   --dock: #071c2e;