open-props

open-props copied to clipboard

Shouldn't this reference a prop rather than a hardcoded color variable? Yet another thing to switch back and forth between light/dark mode, but could just be a prop change.

https://github.com/argyleink/open-props/blob/0ae2208bb5559773caca93040aedaf76a2e8ddb4/src/extra/normalize.css#L130-L132

it should, but the current gray palette doesnt have a dark enough gray for it, so it's hand rolled. when relative color comes out and OP stops using Open Color, this can be changed to a prop from the palette, but for now it's a solo color.

That makes sense. Saw a video were you showcased the relative colors aswell. Only afraid of how long it will take for it to be implemented by browsers. It will change a lot how I'll style colors on alternative states, hover, focus etc.

Is there a better way of dealing with this right now, other than just copying and overriding the entire selector? I'm actually trying to disable all the dark mode settings (at least temporarily) for a site that's in development, and it feels pretty hacky. Do you have any advice?

there's some thoughts in this PR exploration here https://github.com/argyleink/open-props/issues/204

as for advice, it sounds like you're importing normalize but don't want the dark theme parts? i recommend importing the theme aspects yourself and omitting theme.dark.css. that might work. you'll need postcss setup to handle the nesting and maybe some other stuff, but this idea puts you in the driver's seat for what's in normalize, or in your case, what you import as to normalize.

Thanks so much! This project already has a postcss setup, so I'll look in to that. Of course I should probably just configure a proper dark mode -- as it happens I chanced to listen to the CSS Podcast episode on Accessibility just a few days ago (I know, I'm well behind!) and I'd not thought of dark mode as an accessibility enhancement before. So double thanks!