Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

BBButton: subtle variant with neutral color has an opaque white background, so it renders white on white in dark mode

Open Beginner friendly
  • Is something wrong?
#100 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start by reading the button variant definitions shown from dist/components/Button.js and locate the corresponding source and tests for BBButton's subtle neutral variant. Compare it with subtle.default and check the existing theme-variable behavior. Done means the neutral subtle button has a transparent background, readable text, and the specified light-gray hover background without changing other variants.

Written by the indexing model from the issue text.

Description

bug
Description

The subtle + neutral combination uses the same colours as primary.neutral: an opaque --color-neutral-white background with --color-gray text. Every other subtle button has a transparent background, as in subtle.default.

In the BigBlueButton HTML5 client's dark theme, --color-gray turns white. --color-neutral-white is deliberately left alone, because the library also uses it as the label colour over brand backgrounds. The button ends up white on white.

Found on the pre-flight "Settings" button (bigbluebutton/bigbluebutton#25842).

Steps to reproduce
  1. Render <BBButton variant="subtle" color="neutral" label="Settings" onClick={...} /> on a dark surface.
  2. Override --color-gray with a light colour, as the client's dark theme does.

Expected: a transparent background, as on the other subtle buttons, with readable text.

Actual: a white pill with near-invisible text. In the light theme the white pill also stands out on any surface that isn't white.

Cause

From dist/components/Button.js (0.8.0):

subtle: {
  default: { color: R, iconColor: N, background: "transparent", border: !1, hoverColor: R, hoverBackground: E, hoverBorder: !1, outline: N },
  neutral: { color: C, background: k, border: !1, hoverColor: C, hoverBackground: S, hoverBorder: !1, outline: B }, // same as primary.neutral
}
// k = --color-neutral-white, C = --color-gray, S = --color-brand-aux, E = --color-light-gray
Suggested fix

Make subtle.neutral transparent like subtle.default and change only the text colour:

neutral: { color: C, iconColor: C, background: "transparent", border: !1, hoverColor: C, hoverBackground: E, hoverBorder: !1, outline: N },

The hover then uses --color-light-gray, which themes can already override.

Workaround

The client uses variant="subtle" without color.

Dominant language
TypeScript
Stars
2
Forks
5
Avg merge
2d 5h
Merged PRs (30d)
9

Getting set up

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from bigbluebutton/bbb-ui-components-react

All issues in bigbluebutton/bbb-ui-components-react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.