Dark mode is not an inversion

Dark grays, off-white text, softer accents, and lighter raised surfaces.

From refactoring-ui: Theming & Dark Mode.

Inverted vs designed

Flip the source, then Tab into each dashboard.

InvertedBad
DesignedGood

Shadows vanish, surfaces don't

Open the menu, then raise the shadow.

Shadow onlyBad
#09090b + box-shadow
Lighter per levelGood
#09090b → #18181b → #27272a → #3f3f46

Swap tokens, not components

Pick a theme; the card only reads tokens.

Weekly digest

Summary of open bills every Monday.

Changes apply to every workspace.

Semantic tokens in light and dark
TokenLightDarkvs bg

Why it matters, pros and cons

Why it matters

Pure black under white text glows, and saturated accents vibrate. Shadows have nothing darker to fall on.

Pros

  • Easier on the eyes in dim rooms.
  • Surface steps keep the hierarchy.
  • Components never branch on theme.

Cons

  • Doubles contrast checks: charts, images, focus rings.
  • Surface steps cap depth at about four levels.
  • True #000 saves OLED battery; media apps choose it.