Normalize dark or light only

[stefanonepa]

Hello,

Thank you for your fantastic work.

I like that you offer the normalize, but then because you provide theme handling it becomes more challenging to use the nice defaults that you provide within an app.

Is there a way to have a normalize.light or normalize.dark? Or to opt-in or out of the theme handling?

Thank you in advance for your help!

[argyleink]

Hi, thanks!

Interesting and reasonable request 🙂

so like, offer a open-props/normalize.lite import which is all the normalize work without any light/dark/theme values used/included. then offer the normalize theme files as separate imports, so folks could import open-props/normalize.lite + open-props/normalize.theme.light and only get the light theme from OP

is that what you're after, or some of it?

or maybe i can help more with the problem and less about the proposed solution, where the problem is "challenging to use the nice defaults that you provide within an app". can you be more specific here? are you struggling to override the provided light/dark themes? i don't think i've documented that specifically yet, how to use normalize and override your way to your own light/dark themes. like "integrating with the built-in props instead of not using/importing them".

[stefanonepa]

Hi @argyleink,

TLDR; That's exactly what I am looking for 👍

open-props/normalize.lite + open-props/normalize.theme.light

Or something like:

• open-props/style
• open-props/normalize.lite
• open-props/normalize.theme.light or open-props/normalize.theme.dark (this could be also an easy way to customize the normalize theme by replacing the variables defined within the theme)
• open-props/buttons+ ...

The reason of my request is that my current projects don't include light/dark theming options. I think that both your themes are a nice starting point. But because it is becoming more and usual to set the preferred system color to something that suit the user, then I end up with elements that are prefers-color-scheme aware and other not.

Again thank you for your work, it is a pleasure to work with it. 🙏

Extra: I have a last extra suggestion about the button shadow on hover in dark mode. my thinking is that usually in dark mode you tend to have dark backgrounds and I think that a glow (not sure that's the right word here, what I mean is a light shadow) might work in more use cases and it could be a new type of props 👀 .

[argyleink]

Cool, glad that's on track. The work is being done in that PR and should be ready soon 👍🏻

I have a last extra suggestion about the button shadow on hover in dark mode.

i'm against "light" shadows, because they dont really occur in the real world. you should be able to extend it and add that tho if you like!

[stefanonepa]

I tried the new version on https://codepen.io/argyleink/pen/KKvRORE and when replacing normalize.min.css by normalize.light.min.css I end up with dark backgrounds in the inputs.

It seems to come from a specificity issue with the following rules:

@media (prefers-color-scheme: dark) {
    :where(textarea,select,input:not(button,button[type],input[type=button],input[type=submit],input[type=reset])) {
        background-color:#171a1c;
    }
}

[argyleink]

i see it too, captured some of the issues here in #299