mattermost-community/focalboard

Bug: Assignee field text on card not visible in dark theme

Open

#4621 opened on Mar 8, 2023

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (26,187 stars) (2,542 forks)user submission
BugHelp WantedUp for grabs

Description

Steps to reproduce the behavior

  1. Set the theme to dark theme (not an issue in light/default theme)
  2. Open a board where cards use the Assignee field
  3. Select/create a card and note the text in the Assignee field matches the background color

Expected behavior

In the dark theme, most text should inherit its color using the CSS variable --center-channel-color-rgb: 220, 220, 220;. However, this does not seem to be the case for the Assignee field. In my testing, the text in this field is visible in lighter themes. It appears as if the RGB value of 51,51,51 is hardcoded in the styling for that item rather than using the theme variable.

I tried hard reloading with a clean cache, new browsers, and incognito windows, and the issue persisted.

Screenshots (optional)

Original

image image image image

Modified Using Developer Tools

image image

Default Theme

image image

Light Theme

image image

Edition and Platform

  • Edition: Focalboard Server (Debian)
  • Version: 7.8.2
  • Browser and OS: Chome, Windows 10

Additional context (optional)

Add any other context about the problem here, and any notes about the severity:

  • Sev 3: Affects minor, non-critical functionality

Text still "legible" if you hover over the field, workaround exists by using a light theme.

Contributor guide

Tech stack
reacttypescriptcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
understanding of CSS variablesFocalboard theming basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
90
Research direction
The issue is that the Assignee field in card view uses a hardcoded color (#333) instead of the CSS variable center channel color rgb for dark theme. To fix, locate the Assignee field component (likely in webapp/src/components/cardDetail/ or similar) and replace the hardcoded color with the appropriate CSS variable. Ensure the fix respects theme changes. Refer to other components that correctly use the variable for guidance.