dark-mode-discipline

name	dark-mode-discipline
description	Use when implementing dark mode. Don't just invert — design a separate dark palette with intentional choices.

Dark Mode Discipline

Dark mode = separate palette, not auto-inverted. Maintain brand integrity and accessibility. Cream/ink → off-white/near-black; accent stays similar.

Dark mode color pairs

Light mode	Dark mode
Cream (#fbf6ec)	Near-black (#0d0807)
Ink (#0d0807)	Off-white (#f0ebe1)
Ink-70	Off-white 70%
Accent	Same accent (may need slight desaturation)
Border	15% off-white

Avoid auto-inversion — re-author palette.

System preference detection

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0807;
    --fg: #f0ebe1;
    --fg-70: rgba(240, 235, 225, 0.7);
    /* ... */
  }
}

User preference toggle: persist in localStorage.

Photography in dark mode

Photos shouldn't auto-darken. Either:

1. Maintain original treatment (recommended)
2. Provide dark-mode-aware alternative photos
3. Apply subtle vignette in dark mode

Avoid filter() that darkens photos — looks unnatural.

Where this fits in the X3 empire

Implementation rule for dark mode across CardPrepAI.