Improve Regular Member Name Contrast in Dark Mode #776

New issue

Open

opened 2026-06-28 12:43:41 -05:00 by Veilor · 0 comments

Veilor commented

2026-06-28 12:43:41 -05:00

Member

Regular member usernames need better contrast in dark mode anywhere the semantic member role color is rendered.

The current role color system stores member users as text-member, and the CSS theme defines that color as a dark gray-blue. On dark backgrounds this can blend into the surrounding UI, making regular member names difficult to read compared with other roles.

Scope

The semantic text-member role color and any dark-mode variant needed for readable member names.
Public places that render role->color, including profile headers, friends lists, comments, recent gamer updates, favorites, and wishlist/profile-adjacent user links.
Dark theme contrast against existing dark page/card backgrounds.
Existing semantic role color names for other roles.

Acceptance Criteria

Regular member usernames are clearly readable in dark mode.
The member color remains visually distinct from default unstyled usernames and other role colors.
Light mode member styling remains acceptable and does not regress noticeably.
Existing text-member database values continue to work without requiring a role data migration unless the implementation intentionally changes that contract.
Public username links and non-link username fallbacks both receive the improved styling.
The change does not reduce contrast for other semantic role colors.

Test Coverage Required

Add or update coverage that rendered member usernames include the improved dark-mode-safe member color class or CSS token.
Cover at least one public user-facing surface that renders role->color for a member.
Preserve existing role color sync coverage for text-member values if the database value remains unchanged.
Run focused appearance/profile/comment or recent-update tests relevant to the chosen implementation.
Run npm run build if Tailwind/theme CSS changes need asset verification.
Run vendor/bin/pint --dirty --format agent before implementation closeout if PHP files change.

Progress Checklist

Audit where text-member is rendered in dark mode
Choose a higher-contrast member color or dark-mode styling approach
Update the semantic member color styling without breaking stored role values
Verify representative member-name surfaces in dark mode
Add focused regression coverage for member role color rendering
Run focused tests and asset build if CSS changes
Run vendor/bin/pint --dirty --format agent if PHP files changed
Move the issue out of Codex review once verification is complete

Regular member usernames need better contrast in dark mode anywhere the semantic member role color is rendered. The current role color system stores member users as `text-member`, and the CSS theme defines that color as a dark gray-blue. On dark backgrounds this can blend into the surrounding UI, making regular member names difficult to read compared with other roles. ## Scope - The semantic `text-member` role color and any dark-mode variant needed for readable member names. - Public places that render `role->color`, including profile headers, friends lists, comments, recent gamer updates, favorites, and wishlist/profile-adjacent user links. - Dark theme contrast against existing dark page/card backgrounds. - Existing semantic role color names for other roles. ## Acceptance Criteria - Regular member usernames are clearly readable in dark mode. - The member color remains visually distinct from default unstyled usernames and other role colors. - Light mode member styling remains acceptable and does not regress noticeably. - Existing `text-member` database values continue to work without requiring a role data migration unless the implementation intentionally changes that contract. - Public username links and non-link username fallbacks both receive the improved styling. - The change does not reduce contrast for other semantic role colors. ## Test Coverage Required - Add or update coverage that rendered member usernames include the improved dark-mode-safe member color class or CSS token. - Cover at least one public user-facing surface that renders `role->color` for a member. - Preserve existing role color sync coverage for `text-member` values if the database value remains unchanged. - Run focused appearance/profile/comment or recent-update tests relevant to the chosen implementation. - Run `npm run build` if Tailwind/theme CSS changes need asset verification. - Run `vendor/bin/pint --dirty --format agent` before implementation closeout if PHP files change. ## Progress Checklist - [ ] Audit where `text-member` is rendered in dark mode - [ ] Choose a higher-contrast member color or dark-mode styling approach - [ ] Update the semantic member color styling without breaking stored role values - [ ] Verify representative member-name surfaces in dark mode - [ ] Add focused regression coverage for member role color rendering - [ ] Run focused tests and asset build if CSS changes - [ ] Run `vendor/bin/pint --dirty --format agent` if PHP files changed - [ ] Move the issue out of Codex review once verification is complete

brave_hqqpnrrJTe.jpg

70 KiB