diff --git a/src/App.tsx b/src/App.tsx
index 2dd67da..df391e5 100644
--- a/src/App.tsx
+++ b/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);
diff --git a/src/components/SettingsModal.css b/src/components/SettingsModal.css
index 35426c2..d57a0db 100644
--- a/src/components/SettingsModal.css
+++ b/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;
 }
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index f2e70e8..95e3833 100644
--- a/src/components/SettingsModal.tsx
+++ b/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"] },
 ];
diff --git a/src/theme.css b/src/theme.css
index 8458e53..cd7b0a8 100644
--- a/src/theme.css
+++ b/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
-   the theming request. --dock-deep doubles as "the text color that sits well on top
-   of --aurora-green" (see RenamePanel.css's .action-button.primary) - here that's
-   white, since this theme's --aurora-green is deliberately darkened for contrast on a
-   white page, the opposite of the dark themes' light-green-on-dark-text pairing. */
-:root[data-theme="light"] {
+/* White - a clean white-background/black-text theme, the literal "white" half of the
+   theming request. --dock-deep doubles as "the text color that sits well on top of
+   --aurora-green" (see RenamePanel.css's .action-button.primary) - here that's white,
+   since this theme's --aurora-green is deliberately darkened for contrast on a white
+   page, the opposite of the dark themes' light-green-on-dark-text pairing. Keeps
+   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;