amadan
web: clean up the dark-mode composer input (#131)
The message input mixed the dark panel 50% toward white, which rendered as a bright grey slab in dark mode. Make the fill theme-aware — keep the subtle lift in light mode, go transparent in dark so the field blends into the composer band. Also drop the border-top above the composer so the bottom bar reads as one surface.
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2 files changed,
+4
−2
changelog/2026-07-03-composer-dark.md+1 −0web/static/style.css+3 −2
diff --git a/changelog/2026-07-03-composer-dark.md b/changelog/2026-07-03-composer-dark.md| new file mode 100644 |
| index 0000000..f33948d |
| --- /dev/null |
| +++ b/changelog/2026-07-03-composer-dark.md |
| @@ -0,0 +1 @@ |
| +The message box now sits cleanly in dark mode — the input has lost its washed-out grey fill, and the dividing line above the composer is gone, so the whole bottom bar reads as one calm surface. |
diff --git a/web/static/style.css b/web/static/style.css| index d1c4dee..8c267e2 100644 |
| --- a/web/static/style.css |
| +++ b/web/static/style.css |
| @@ -976,7 +976,6 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr |
| (see the pointer:coarse rule), which desktop never picks up. */ |
| padding: 12px 16px; |
| padding-bottom: env(safe-area-inset-bottom, 0px); |
| - border-top: 1px solid var(--border); |
| background: var(--panel); |
| } |
| /* Touch: 12px of breathing room ABOVE the Home indicator / swipe bar (the inset), |
| @@ -1017,7 +1016,9 @@ input:focus, textarea:focus { outline: 2px solid var(--accent); border-color: tr |
| border-radius: 20px; |
| font-family: inherit; |
| overflow: hidden; |
| - background: color-mix(in srgb, var(--panel) 50%, white 50%); |
| + /* Light: lift the field a touch above the panel. Dark: no fill — mixing the |
| + dark panel toward white read as a bright grey slab, so blend into the band. */ |
| + background: light-dark(color-mix(in srgb, var(--panel) 50%, white 50%), transparent); |
| } |
| /* circular up-arrow send button, tucked into the bottom-right of the field */ |
| .send-btn { |