fix(collection): add dark-mode hover to the "See all" archive button#3341
Open
Vidminas wants to merge 1 commit into
Open
fix(collection): add dark-mode hover to the "See all" archive button#3341Vidminas wants to merge 1 commit into
Vidminas wants to merge 1 commit into
Conversation
The archive "See all" button set only `hover:bg-gray-50` (a light surface) with no dark-mode counterpart, so hovering it in dark mode painted a near-white background under light-gray text and failed colour contrast. Add `dark:hover:bg-gray-700`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
β Deploy Preview for academic-demo canceled.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The archive "See all" button set only a light surface with no dark-mode counterpart, so hovering it in dark mode painted a near-white background under light-gray text and failed colour contrast.
π What type of change is this?
π― What is the purpose of this change?
The collection block's archive "See all β¦" button sets only
hover:bg-gray-50(a lightsurface) with no dark-mode counterpart. In dark mode the button base is
dark:bg-gray-800 / dark:text-gray-300, so hovering paints a near-white background underlight-gray text β the label becomes unreadable (fails WCAG contrast on hover).
Fix. Add
dark:hover:bg-gray-700β a subtly lighter dark surface that keeps the light-graylabel readable.
Verified on the
academic-cvstarter (with the archive link enabled): the rendered "See allpublications" button carries
dark:hover:bg-gray-700and Tailwind emits the corresponding rule.πΈ Screenshots or Screencast (if applicable)
The archive "See all publications" button in dark mode, shown at rest and on hover. Hover
only changes the button's background colour, so the "Hover" cell renders the exact
:hoverfillusing the theme's own gray tokens (
hover:bg-gray-50before,dark:hover:bg-gray-700after) on thecompiled stylesheet.
Before β
mainβ on hover the background paints near-white (gray-50) under the light-graylabel, so the text washes out:
After β this PR β on hover the background stays a dark
gray-700, so the label remains readable:βΉοΈ Documentation Check
π Contributor Agreement
Thank you for your contribution!