Selected text is barely visible #24

New issue

Closed

opened 2026-10-17 20:59:46 +00:00 by bmt · 1 comment

bmt commented

2026-10-17 20:59:46 +00:00

Member

build: anotherim-js 0.6.0 (Windows)

Night theme: selection is barely visible in incoming messages and in the message field
Day theme: selection is barely visible in the message field.

expected: selected text is clearly visible in both themes

actual: the selection is barely visible

build: anotherim-js 0.6.0 (Windows) Night theme: selection is barely visible in incoming messages and in the message field Day theme: selection is barely visible in the message field. expected: selected text is clearly visible in both themes actual: the selection is barely visible

изображение.png

10 KiB

изображение.png

9.3 KiB

bmt added the

bug

windows

ui/ux

labels

2026-10-17 20:59:46 +00:00

ann referenced this issue from a commit

2026-10-18 10:26:07 +00:00

Selected text is clearly marked in both themes (#24, 0.6.0 on Windows: barely visible in Night's incoming messages and message field, and in Day's message field): the one ::selection rule, in app.css, painted the palette's --selection, which is a picked row's quiet tint -- Night's #2e2e2e on its #2c2c2c incoming bubble and #272727 field, Day's chat side #a9cdf2 on its #f4f7fb field -- and, being the document's, reached the components' shadow roots in no engine for sure, where WebView2 drew its own pale highlight. Two new palette tokens, --text-selection and --text-selection-text, with their chat-side twins, mark selected text: Night a light blue (#8ab4f8) under near-black words, Day's window #1d4fc4 and its chat side ocean's #2c6aa6 under white, each at least 3:1 off every ground it sits on (the backgrounds, surface, field, incoming and red bubbles) and its words at least 4.5:1 off it. sharedStyles carries the same ::selection rule into every component, and our own bubble re-points the tokens to its own two colours swapped, which stand 4.5:1 apart on any accent where a fixed mark could fall on the accent's blue. The palette is twenty-nine tokens now (theme.css, chat-side.ts); theme.test.ts computes those contrasts for every theme and both of Day's sides and checks the rules in app.css, shared-styles.ts and message-row.ts; the changelog says so.

ann commented

2026-10-18 10:35:23 +00:00

Owner

The only text-selection rule used the pale tint meant for a picked row. Both themes now have their own selection colours, with tested contrast, in the bubbles (your own included), the message field and everywhere else.

Fixed in 0.6.1: https://dev.another.im/another-im/anotherim-js/releases/tag/v0.6.1

ann closed this issue

2026-10-18 10:35:24 +00:00