normalize table hover colors

[Christopher Pfohl]

Tables look NICE by default with styles/normalize setup:

Unfortunately they're totally illegible when you hover on them:

Color is dark:

And on hover the background is too:

I will add that my root stylesheet right now is:

@import "open-props/postcss/style";
@import "open-props/postcss/normalize";

body {
    --gap: var(--size-3);
    --header-width: calc(var(--size-header-3) + (2 * var(--gap)));
}

And oddly the app is still rendering in light mode. I was relying on open-props' @media (prefers-color-schema: light) to detect that I'm in dark mode on my machine, but it is not doing that.

Possible solutions:

• Add color: var(--gray-1); to the dark background on hover.
• Lighten the dark background in light mode to var(--gray-3) to dark consistent with light mode.
• Make hover row-highlighting opt-in.

This also might secretly be a completely different bug: You're using it wrong, Chris. Here's why...I'm totally cool with that too.

[Christopher Pfohl]

ATM I fixed it by not worrying about dark mode at all and adding

tr:hover td {
    background-color: var(--gray-3);
}

To my root stylesheet...but, I imagine something is off here.

[Brian Michael Poblete]

Not saying that this is definitely the issue, but you posted "@media (perfers-color-**schema**: light)"

schema with an 'a' instead of scheme

Also, do you think you could post a link to a minimal reproduction? And maybe your environment details as well? (OpenProps and normalize versions, browser + version, OS + version, etc)

I'm not seeing the issue on the Normalize CodePen demo on a Chromium browser on Mac.

Edit: Also just tested on Chromium and Firefox on Windows 11 with no issues.

CleanShot.2024-03-24.at.03.04.56.mp4

[Adam Argyle]

was gonna ask for a minimal reproduction too (or go make one), but it's already covered here! thanks!

[Christopher Pfohl]

I bet I know what's going on...Gimme five! This is almost certainly a PEBKAC error...

EDIT 1 minute later

Dear Reader, he did not in fact know.

I had thought I maybe had specifically set the background color to white on one section.

[roycw]

hi guys, how can i addapt notmalize to read from a toffle button in the app ?

[Christopher Pfohl]

@roycw inappropriate spot to ask this. Fresh issue, read the docs, poke the code, lots of legitimate ways to ask this. You've already asked the question in issue #499, if it's not getting the attention you want you ought to improve the question or check out the source of The Docs website

[roycw]

Understood.
For what its worth found some bugs in the themes. where colors are hardcoded
Will ask in the approproate channels.