StackExchange / StackExchange/Stacks
Ensure conditional hover/focus classes override conditional dark mode classes
Open
Nobody has claimed this yet.
bug
dark-mode
- Dominant language
- TypeScript
- Stars
- 672
- Forks
- 107
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 26
Description
Current behavior: When an element has a conditional dark mode class and a conditional hover or focus class, the dark mode styling overrides the hover style.
Desired behavior: Hover/focus styling should apply over dark mode styling when hovering.
This was prompted by an issue encountered with this markup:
<button id="js-dismiss-articles-btn" class="s-btn fc-black-200 bg-black-600 bc-black-300 h:bg-black-700 d:bg-black-900" type="submit">*</button>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No file or test is named. Start by reproducing the provided button markup and tracing how conditional dark-mode, hover, and focus classes are generated and ordered. Done means hover and focus styles take precedence over dark-mode styles while the other conditional styling remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100