No white buttons in dark mode: primary buttons, the chosen profile tab, feed chip, new-posts pill, till tip and hat take a lifted grey there (the accent still fills them in light mode).

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_013ZDf1cyCQLkfjftYhymZAg

1 files changed, 18 insertions, 9 deletions

diff --git a/src/style.css b/src/style.css
index 70745cd..9547ab0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -30,6 +30,12 @@
   --accent-fg: #ffffff; /* text on accent */
   --accent-ink: #000000;
   --accent-soft: #ececef;
+  /* a button's fill (primary, chosen chip or tab): the accent in light; in
+     dark a lifted grey, not a white slab (Adam, 2026-10-18: "Probably
+     shouldn't have white buttons in dark mode") */
+  --fill: var(--accent);
+  --fill-hover: var(--accent-hover);
+  --fill-fg: var(--accent-fg);
   --green: #14935a;
   --green-soft: #e7f6ee;
   --green-line: #c4e7d4;
@@ -65,6 +71,9 @@
   --accent-fg: #0f1216; /* text on accent */
   --accent-ink: #e7e9ee;
   --accent-soft: #262b33;
+  --fill: #353b45;
+  --fill-hover: #404753;
+  --fill-fg: #f3f5f8;
   --green: #2dbd80;
   --green-soft: #14271d;
   --green-line: #235340;
@@ -230,8 +239,8 @@ button, .btn {
 button:hover { background: var(--surface2); }
 button:active { transform: translateY(1px); }
 button:disabled { opacity: .5; cursor: not-allowed; }
-.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
-.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
+.btn-primary { background: var(--fill); border-color: var(--fill); color: var(--fill-fg); }
+.btn-primary:hover { background: var(--fill-hover); border-color: var(--fill-hover); }
 .btn-ghost { background: transparent; }
 .btn-sm { padding: 7px 11px; font-size: 13px; border-radius: 9px; }
 .btn-sm.on { border-color: var(--accent); color: var(--accent); }
@@ -296,7 +305,7 @@ textarea.send-dest::placeholder { font-family: var(--sans); }
    colour matched the posts under it). So these take the feed chips' look:
    the chosen tab solid accent, the other one quiet (Adam, 2026-10-16). */
 .prof-tabs button { background: var(--surface2); color: var(--muted); }
-.prof-tabs button.active { background: var(--accent); color: var(--accent-fg); }
+.prof-tabs button.active { background: var(--fill); color: var(--fill-fg); }
 
 /* ---- address / qr ---- */
 .qr { width: 220px; height: 220px; display: block; border-radius: 12px; border: 1px solid var(--line); }
@@ -726,7 +735,7 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
 .pos-big { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; }
 .pos-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
 .pos-tip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); color: var(--ink); cursor: pointer; }
-.pos-tip.on { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); }
+.pos-tip.on { border-color: var(--fill); background: var(--fill); color: var(--fill-fg); }
 .pos-tip.on .muted { color: inherit; opacity: .8; }
 .pos-tip-label { font-size: 20px; font-weight: 600; }
 .pos-total { font-size: 22px; font-weight: 600; margin-top: 4px; }
@@ -735,7 +744,7 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
 .pos-sale.faint { opacity: .55; }
 .pos-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
 .pos-key { padding: 14px 0; font-size: 22px; font-weight: 600; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); color: var(--ink); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
-.pos-key:active { background: var(--accent); color: var(--accent-fg); }
+.pos-key:active { background: var(--fill); color: var(--fill-fg); }
 .pos-key.del { font-weight: 400; }
 /* the feeds row: pills that scroll sideways, the one on screen filled */
 .feed-chips { gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
@@ -749,7 +758,7 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; }
   .feed-chips.dragging .feed-chip { pointer-events: none; }
 }
 .feed-chip { flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface2); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: 14px; line-height: 1.2; cursor: pointer; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
-.feed-chip.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+.feed-chip.on { background: var(--fill); color: var(--fill-fg); border-color: var(--fill); }
 .feed-chip.add { font-weight: 600; padding: 5px 11px; }
 .note-act {
   background: none; border: 0; padding: 4px 6px; margin: 0; line-height: 1;
@@ -952,7 +961,7 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
   position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
   left: 50%; transform: translateX(-50%);
   z-index: 30; width: auto; padding: 12px 24px; border-radius: 999px;
-  background: var(--accent); color: var(--accent-fg); border: none;
+  background: var(--fill); color: var(--fill-fg); border: none;
   font-size: 16px; font-weight: 650; cursor: pointer;
   touch-action: none; user-select: none; -webkit-user-select: none; /* it swipes away */
   box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
@@ -961,7 +970,7 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 /* the generic button hover (a light surface) and press (a 1px drop, which
    REPLACED the centring transform and threw the pill half its width to the
    right, out from under the pointer, so the tap never landed) stay off it */
-.feed-new-pill:hover { background: var(--accent-hover); color: var(--accent-fg); }
+.feed-new-pill:hover { background: var(--fill-hover); color: var(--fill-fg); }
 .feed-new-pill:active { transform: translate(-50%, 1px); }
 /* the count bumps each time it changes: a fresh node per value replays it */
 .feed-new-pill .n { display: inline-block; min-width: 1.1em; text-align: center; animation: pill-bump .32s cubic-bezier(.2,.9,.3,1.4); }
@@ -1187,7 +1196,7 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 .hat-demo { position: relative; display: inline-flex; width: 34px; height: 34px; flex-shrink: 0; margin-top: 12px; }
 .hat-demo-head { width: 100%; height: 100%; border-radius: 50%; background: var(--accent-soft); }
 .hat-btn { white-space: nowrap; flex-shrink: 0; }
-.hat-btn.wearing { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.hat-btn.wearing { background: var(--fill); border-color: var(--fill); color: var(--fill-fg); }
 .hat-btn.confirm { border-color: var(--green); color: var(--green); }
 
 /* a small centered confirm popup over a dimmed page */