Skip to content

fix(collection): add dark-mode hover to the "See all" archive button#3341

Open
Vidminas wants to merge 1 commit into
HugoBlox:mainfrom
Vidminas:fix/see-all-dark-hover
Open

fix(collection): add dark-mode hover to the "See all" archive button#3341
Vidminas wants to merge 1 commit into
HugoBlox:mainfrom
Vidminas:fix/see-all-dark-hover

Conversation

@Vidminas

Copy link
Copy Markdown

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?

  • πŸ› Bug fix (A non-breaking change that fixes an issue)
  • ✨ New feature (A non-breaking change that adds functionality)
  • πŸ’… Style change (A change that only affects formatting, visuals, or styling)
  • πŸ“š Documentation update (Changes to documentation only)
  • 🧹 Refactor or chore (A code change that neither fixes a bug nor adds a feature)
  • πŸ’₯ Breaking change (A fix or feature that would cause existing functionality to not work as expected)

🎯 What is the purpose of this change?

The collection block's archive "See all …" button sets only hover:bg-gray-50 (a light
surface) 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 under
light-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-gray
label readable.

Verified on the academic-cv starter (with the archive link enabled): the rendered "See all
publications" button carries dark:hover:bg-gray-700 and 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 :hover fill
using the theme's own gray tokens (hover:bg-gray-50 before, dark:hover:bg-gray-700 after) on the
compiled stylesheet.

Before β€” main β€” on hover the background paints near-white (gray-50) under the light-gray
label, so the text washes out:

before: dark-mode hover paints the button near-white and the label disappears

After β€” this PR β€” on hover the background stays a dark gray-700, so the label remains readable:

after: dark-mode hover keeps the button dark and the label readable

ℹ️ Documentation Check

  • No, this change does not require a documentation update.
  • Yes, I have updated the documentation accordingly (or will in a follow-up PR).

πŸ“œ Contributor Agreement

Thank you for your contribution!

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>
@Vidminas Vidminas requested a review from gcushen as a code owner July 12, 2026 09:30
@netlify

netlify Bot commented Jul 12, 2026

Copy link
Copy Markdown

βœ… Deploy Preview for academic-demo canceled.

Name Link
πŸ”¨ Latest commit 30a9fd2
πŸ” Latest deploy log https://app.netlify.com/projects/academic-demo/deploys/6a535ecea696380008f83011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant