Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatic Light/Dark theming using HSLuv #57

Open
erlandsona opened this issue Jul 29, 2021 · 2 comments
Open

Automatic Light/Dark theming using HSLuv #57

erlandsona opened this issue Jul 29, 2021 · 2 comments

Comments

@erlandsona
Copy link

Just throwing this into the world... are there invertLightness & widen functions planned to add to the library?

Given HSLuv is so programable it's pretty easy to think up a way to properly "invert" the brightness of a color scheme while maintaining WCAG Accessibility ratings. Not that Accessbility ratings are things people writing colorschemes care about much, but personally I'd love to be able to just pick my favorite additive colors for certain bits of syntax, editor features, and then be able to flip a switch and have all those colors adjust their relative brightness to the background (grayscale light/dark) without having to re-specify each of the colors for both themes.

I've done this in Elm for a personal project already using elm-hsluv but when I noticed Lush supports hsluv I was like, "I wonder if I can do this in my neovim config too!"

I'll prolly port my "invertLightness" & "widen" (flips a color to 49 / 51 then extends the lightness till it meets AA against a bottom layer) from my side project otherwise.

@rktjmp
Copy link
Owner

rktjmp commented Jul 29, 2021

Not against adding more operators if they have a clear use and are ergonomic.

Could you post a bit of sample code for what you're talking about with invert and widen specifically?

Just off the top of my head:

  • Immediately I wonder what the term and "short" name would be, which is kind of silly but it's part of "the feel" of lush. "invert" may be confused with "opposite", which is probably why you wrote "invertLightness".
  • Also not sure if I want to add operators for only one color type or not (not sure how reliable the operations would be for HSL).

@erlandsona
Copy link
Author

Forgot to post my side project
https://bitbucket.org/erlandsona/resourcery/src/7ec5cf57f783d872a936ea6afe28b97de6bdee81/lib/Colors.elm#lines-435

There's my implementation of "widen". invert should be in there too.

Weirdly enough what I wanted was to think about colors in hsl (as if I was using the additive colors I learned as a kid) but then I just use hsluv to ensure accessibility by "fudging the brightness" of each "top layer" color (non-greyscale) till it meets accessibility requirements.

You can do it in raw hsl but you have to write a loop/recursion/fold (which is weird to think about with colors) and it gets finicky around the boundary cases...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants