Skip to content

dark-theme-reference.md

Latest commit

 

History

History
72 lines (53 loc) · 4.52 KB

dark-theme-reference.md

File metadata and controls

72 lines (53 loc) · 4.52 KB
Raw

Dark theme reference (correct baseline)

Verified against device screenshots (Aug 2026). Dark mode is the design source of truth. Light mode should mirror this structure and contrast relationships — only luminance/inversion changes, not layout or accent semantics.

Reference screenshots: Settings (Dark selected), Calc tab, Bitwise tab.

Global tokens (darkAppTheme / palette)

Token Hex Use
screen #14161B App background
card #171A21 Segment track, gear button, nav header
control #1C1F26 Keypad keys, input shells, settings rows
border #262A33 Hairline borders
ink #ECEEF1 Primary text, numeric values
muted #8B92A0 Secondary labels, inactive segment text, gear icon
inkFaint #4B505C Timestamps, faint hints
accentTeal #5DCAA5 Word pills, BIN accent, bit-on cells, footer link
accentPurple #7F77DD Active segment label, sign pills, armed ops, = key
accentCoral #F0997B 0x prefix, HEX accent, operator keys
violetDim #2A2749 Active segment indicator fill
segmentIndicatorBorder #453F7A Segment indicator border
danger #E24B4A AC key, Reset row label
dangerDim #501313 OVF badge background

Base row label colors: DEC #B4B2A9, BIN teal, OCT purple, HEX coral.

Status bar: light content on dark background.

Shell (all main screens)

  • Header: 0x coral + RADIXEL white ink; gear in circular card + border, muted icon.
  • Segment control: card track + border; sliding indicator violetDim + purple border; active label purple, inactive muted.
  • Screen fill: uniform screen — no stray white bands.

Calc tab

  • Base rows: Left accent bar per base; subtle tinted border; values bright ink; labels in base colors; copy icon muted. Selected row (Calc only): slightly lifted #171B22 background + stronger accent border.
  • Expression line: Bordered input shell on control; label EXPR; placeholder/cursor visible but muted.
  • Keypad: Keys on control + border; digit/func text ink; operators coral; = full-width purple fill; AC red label; disabled . visibly dimmed; hex row A–F present above grid.

Bitwise tab

  • Base rows: Same as Calc but not selectable (no highlight).
  • Hex input (IN): Purple-accent bordered shell; “KEYPAD ENTRY” hint; inset field.
  • Word / Sign pills: Word active = teal tint #1C3B33; Sign active = violetDim + purple text.
  • Bit grid: On-bits teal fill; off-bits outlined muted; MSB→LSB label faint.
  • Op grid + hex keypad: Compact keys on control; AC red; operand banner above grid when armed.

Settings

  • Section labels: Monospace uppercase, muted, small tracking.
  • Option pills: Row on control + border; active fills: theme neutral, word teal, sign purple, copy #3A2424 + coral text.
  • Menu rows: control cards + border; primary ink, subtitle muted; chevron on History; Reset label danger red.
  • Footer: Radixel v1.0.0 · muted; By AstraX teal + underlined (links to astrax.dev).
  • Nav header: card bar, back arrow ink, title Settings.

History (dark)

  • Section headers: uppercase muted monospace.
  • Entry cards: control + border; expression muted monospace; result bright monospace; timestamp inkFaint.

What must not regress when fixing light mode

  1. Accent roles stay the same (teal=word/bin, purple=sign/segment, coral=hex/operators).
  2. Selected vs inactive states remain clearly distinguishable.
  3. Danger (AC, Reset) stays red, not gray.
  4. Base row left accent bars and per-base label colors preserved.
  5. Keypad docked bottom; segment/header unchanged layout.
  6. Settings footer link styling (teal + underline).

Light theme file: lightAppTheme in src/constants/theme.ts — currently a stub; fixes should adjust tokens there without changing dark tokens.