@@ -60,6 +60,22 @@ export function resolveThemePreference(
  * through the server and comes back via the root loader, and anything that waits
  * for that is at the mercy of whether the revalidation actually lands.
  */
+/**
+ * Write the contrast preference to the document.
+ *
+ * The value is signed: above zero strengthens the palette, below zero fades it
+ * (Black only). The ramps can't take a negative percentage - `color-mix` treats
+ * one as invalid and drops the whole declaration - so it's split into two
+ * always-positive variables. Anything writing this must go through here; the
+ * live preview used to set `--theme-contrast` on its own and silently did
+ * nothing at all below zero.
+ */
+export function applyThemeContrast(contrast: number) {
+  const root = document.documentElement;
+  root.style.setProperty("--theme-contrast", String(Math.max(0, contrast) / 100));
+  root.style.setProperty("--theme-fade", String(Math.max(0, -contrast) / 100));
+}
+
 export function applyThemePreference(
   preference: ThemePreference,
   systemThemes: SystemThemes = DEFAULT_SYSTEM_THEMES
 
@@ -56,6 +56,7 @@ import { prisma } from "~/db.server";
 import { SelectBestEnvironmentPresenter } from "~/presenters/SelectBestEnvironmentPresenter.server";
 import { useFeatureFlags } from "~/hooks/useFeatureFlags";
 import {
+  applyThemeContrast,
   applyThemePreference,
   type ThemeAppearance,
   useThemeAppearance,
@@ -79,6 +80,7 @@ import {
   normalizeThemeContrast,
   normalizeUnderlineLinks,
   normalizeThemePreference,
+  DEFAULT_THEME_CONTRAST_BLACK,
   MIN_THEME_CONTRAST_BLACK,
   SystemDarkTheme,
   SystemLightTheme,
@@ -879,7 +881,12 @@ export default function Page() {
      appearance. Only Black gets the extra travel below the base, so the slider
      needs to know rather than reading the raw preference. */
   const activeTheme = theme === "system" ? systemThemes[appearance] : theme;
-  const minContrast = activeTheme === "black" ? MIN_THEME_CONTRAST_BLACK : MIN_CONTRAST;
+  const isBlack = activeTheme === "black";
+  const minContrast = isBlack ? MIN_THEME_CONTRAST_BLACK : MIN_CONTRAST;
+  /* Black's rules want to sit far fainter than the base palette puts them, so
+     "Default" means something different there - both the tick and the label
+     follow it. */
+  const defaultContrast = isBlack ? DEFAULT_THEME_CONTRAST_BLACK : DEFAULT_CONTRAST_MARK;
 
   const saveSystemTheme = (end: "light" | "dark", value: string) => {
     const fetcher = end === "light" ? systemLightFetcher : systemDarkFetcher;
@@ -898,15 +905,15 @@ export default function Page() {
   useEffect(() => {
     if (contrastFetcher.state === "idle") {
       setContrastPreview(contrast);
-      document.documentElement.style.setProperty("--theme-contrast", String(contrast / 100));
+      applyThemeContrast(contrast);
     }
   }, [contrastFetcher.state, contrast]);
 
   // Dragging previews through the CSS var; releasing (or clicking the default
   // mark) persists it.
   const previewContrast = (value: number) => {
     setContrastPreview(value);
-    document.documentElement.style.setProperty("--theme-contrast", String(value / 100));
+    applyThemeContrast(value);
   };
   const saveContrast = (value: number) =>
     contrastFetcher.submit(
@@ -1105,16 +1112,16 @@ export default function Page() {
                       step={1}
                       marks={[
                         {
-                          value: DEFAULT_CONTRAST_MARK,
+                          value: defaultContrast,
                           label: "Reset to default",
                           onSelect: () => {
-                            previewContrast(DEFAULT_CONTRAST_MARK);
-                            saveContrast(DEFAULT_CONTRAST_MARK);
+                            previewContrast(defaultContrast);
+                            saveContrast(defaultContrast);
                           },
                         },
                       ]}
                       valueTooltip={(value) =>
-                        value === DEFAULT_CONTRAST_MARK ? "Default" : `${value}%`
+                        value === defaultContrast ? "Default" : `${value}%`
                       }
                       value={[Math.max(minContrast, contrastPreview)]}
                       onValueChange={(values) => previewContrast(values[0] ?? 0)}
 
@@ -54,10 +54,21 @@ export function normalizeUnderlineLinks(value: unknown): boolean {
 /** Interface contrast for the System themes, 0 to 100. Missing or invalid
  * values fall back to the default bump. */
 /** Floor of the contrast range on the Black theme, where the slider can also run
- *  *below* the base palette to fade the grid lines back toward the page. Every
- *  other theme floors at 0; a negative value simply has no ramp to act on there,
- *  so it reads as 0. */
-export const MIN_THEME_CONTRAST_BLACK = -50;
+ *  *below* the base palette to fade the grid lines back toward the page. -100
+ *  takes them all the way to the page colour, i.e. gone. Every other theme floors
+ *  at 0; a negative value simply has no ramp to act on there, so it reads as 0. */
+export const MIN_THEME_CONTRAST_BLACK = -100;
+
+/**
+ * Where "Default" sits on the Black theme.
+ *
+ * Chosen to mirror how the light end reads: on White the grid lines measure
+ * 1.16:1 (dimmed) and 1.27:1 (bright) against their page. -40 puts Black's at
+ * 1.15:1 and 1.19:1 against #000 - the same near-invisible weight, from the other
+ * direction. The base palette sits at 1.33:1 and 1.46:1, which is heavier than
+ * this theme wants when the rules are the only structure on the page.
+ */
+export const DEFAULT_THEME_CONTRAST_BLACK = -40;
 
 export function normalizeThemeContrast(value: unknown): number {
   const num = typeof value === "string" ? Number(value) : value;