Skip to content

dreamcoder-theme-preview.md

Latest commit

 

History

History
231 lines (195 loc) · 13.4 KB

dreamcoder-theme-preview.md

File metadata and controls

231 lines (195 loc) · 13.4 KB

Dreamcoder Theme Preview

Generated from themes/dreamcoder/tokens.json.

Design rationale

Dreamcoder light themes follow a cocoa/lúcuma identity: warm parchment backgrounds, graphite-brown text, and restrained accents. Unlike generic light themes that jump from white to mid-gray surfaces, Dreamcoder uses a flat surface ladder (~10 luminance points between steps) so panels feel layered without looking muddy.

Dreamcoder dark uses an Ember Noir identity: espresso/cacao glass surfaces, warm silver text, refined orange and maple red protagonists, and gold as the support accent. The opencode theme keeps the main background as none so the terminal's semi-transparent background remains visible while panels and selections carry the autumn glass color.

Semantic tokens are intentionally distinct:

  • comment is softer and lower-chroma than subtle (syntax vs UI chrome).
  • Dark accent (refined ember orange), accent_2 (maple red), error (soft coral red), and warning (lúcuma gold) form the orange/red/gold signature.
  • focus follows the orange protagonist instead of a separate cyan ring; diagnostic stays warm amber so the palette remains autumnal.
  • Dusk bridges daytime light and night dark for late-afternoon sessions on Arch.

Palette

Dreamcoder Ember Noir OLED

Role Color
bg #12100e
bg_soft #1b1612
surface0 #211c18
surface1 #2e241f
surface2 #3e3129
text #e8dfd0
muted #c7b9aa
subtle #938274
comment #b8a99a
accent #d99555
accent_2 #c96a45
diagnostic #5f95ca
sage #388c48
lavender #c9a8dc
mauve #d98aa9
error #e98272
warning #e8b866
border #594d46
border_ui #806754
border_hi #c8b195
focus #d99555

Dreamcoder Light

Role Color
bg #f3eadc
bg_soft #e6d7c4
surface0 #fff7ea
surface1 #decbb1
surface2 #c8ad89
text #17120d
muted #352e22
subtle #554638
comment #725e4c
accent #824f16
accent_2 #a7471c
diagnostic #0d4a68
sage #3d723d
lavender #57478b
mauve #7d3e64
error #842f24
warning #654300
border #8a7358
border_ui #66513b
border_hi #3e2f20
focus #0f6570

Dreamcoder Dusk

Role Color
bg #ebe4d6
bg_soft #dfd5c4
surface0 #f1eadf
surface1 #d8cbb8
surface2 #c6b6a0
text #1a1713
muted #4c443a
subtle #5a4f43
comment #615548
accent #8a5520
accent_2 #96411e
diagnostic #104b67
sage #466b41
lavender #5b4e86
mauve #784762
error #773126
warning #604000
border #a7947a
border_ui #665845
border_hi #4a3f32
focus #216a73

Contrast audit

Dreamcoder Ember Noir OLED contrast (WCAG 2)

Token Ratio vs bg Target
text 14.37:1 AAA
muted 9.90:1 AA
comment 8.30:1 AA
accent 7.58:1 AA
accent_2 5.09:1 AA
diagnostic 6.00:1 AA
sage 4.53:1 AA
error 7.14:1 AA
warning 10.38:1 AA

Dreamcoder Ember Noir OLED APCA

Token Lc vs bg Target
text 90.6 ≥75 (body)
muted 71.0 ≥75 (FAIL)
comment 63.0 ≥75 (FAIL)
accent 59.2 ≥75 (FAIL)
accent_2 44.2 ≥75 (FAIL)
diagnostic 50.0 ≥75 (FAIL)
sage 40.3 ≥75 (FAIL)
error 56.8 ≥75 (FAIL)
warning 73.3 ≥75 (FAIL)
border_ui 33.2 ≥60 (FAIL)
focus 59.2 ≥60 (FAIL)

Dreamcoder Ember Noir OLED UI affordance contrast

Token Ratio vs bg Target
border_ui 3.60:1 PASS
border_hi 9.20:1 PASS
focus 7.58:1 PASS

Dreamcoder Light contrast (WCAG 2)

Token Ratio vs bg Target
text 15.60:1 AAA
muted 11.25:1 AA
comment 5.15:1 AA
accent 5.72:1 AA
accent_2 4.95:1 AA
diagnostic 8.02:1 AA
sage 4.80:1 AA
error 7.30:1 AA
warning 7.48:1 AA

Dreamcoder Light APCA

Token Lc vs bg Target
text 96.0 ≥75 (body)
muted 87.3 ≥75 (body)
comment 67.8 ≥75 (FAIL)
accent 70.7 ≥75 (FAIL)
accent_2 66.7 ≥75 (FAIL)
diagnostic 79.2 ≥75 (body)
sage 65.8 ≥75 (FAIL)
error 76.9 ≥75 (body)
warning 77.5 ≥75 (body)
border_ui 73.1 ≥60 (UI)
focus 70.4 ≥60 (UI)

Dreamcoder Light UI affordance contrast

Token Ratio vs bg Target
border_ui 6.28:1 PASS
border_hi 10.79:1 PASS
focus 5.65:1 PASS

Dreamcoder Dusk contrast (WCAG 2)

Token Ratio vs bg Target
text 14.12:1 AAA
muted 7.56:1 AA
comment 5.72:1 AA
accent 4.88:1 AA
accent_2 5.40:1 AA
diagnostic 7.46:1 AA
sage 4.83:1 AA
error 7.37:1 AA
warning 7.44:1 AA

Dreamcoder Dusk APCA

Token Lc vs bg Target
text 91.1 ≥75 (body)
muted 75.7 ≥75 (body)
comment 68.7 ≥75 (FAIL)
accent 64.4 ≥75 (FAIL)
accent_2 67.2 ≥75 (FAIL)
diagnostic 75.3 ≥75 (body)
sage 64.1 ≥75 (FAIL)
error 75.0 ≥75 (body)
warning 75.3 ≥75 (body)
border_ui 67.4 ≥60 (UI)
focus 64.6 ≥60 (UI)

Dreamcoder Dusk UI affordance contrast

Token Ratio vs bg Target
border_ui 5.45:1 PASS
border_hi 8.10:1 PASS
focus 4.92:1 PASS

Usage

./scripts/dreamcoder auto
./scripts/dreamcoder light
./scripts/dreamcoder dusk
./scripts/dreamcoder dark
./scripts/dreamcoder verify
./scripts/dreamcoder preview

Design notes

  • Main backgrounds avoid pure black and pure white.
  • Main text targets AAA (WCAG 2) and APCA Lc ≥ 75 for long coding sessions.
  • Cocoa/Lúcuma accents are identity colors in light/dusk; Ember Noir uses refined orange, maple red, soft coral, and gold for dark-mode personality.
  • UI affordance tokens (border_ui, border_hi, focus) target at least 3:1 against the main background.
  • opencode uses one canonical theme: dreamcoder; its main background is generated as none for terminal transparency.