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

Circle controls don't play nice with white accent color #1312

Open
NyxCode opened this issue Jan 18, 2024 · 2 comments
Open

Circle controls don't play nice with white accent color #1312

NyxCode opened this issue Jan 18, 2024 · 2 comments
Labels
GH - Bug Something isn't working

Comments

@NyxCode
Copy link

NyxCode commented Jan 18, 2024

Fluidd Version

v1.27.1

Browser

Chrome

Device

Desktop PC

Operating System

Linux

What happened

With a white accent color, parts of the circle controls are unreadable.

Homed:
image

Not homed:
image

What did you expect to happen

All elements of the controls remain readable

How to reproduce

  1. Set color scheme to rgb(255, 255, 255)
  2. Enable circle controls

Additional information

Setting the font to black if the background is bright enough might be an option.
Not entirely sure how to implement this - maybe by converting the background color to HSL, and setting a threshold for the lightness value at which the text color is changed?

edit: seems like this can be done purely in CSS - cool!

@NyxCode NyxCode added GH - Bug Something isn't working GH - Evaluation Needed This topic needs to be discussed to evaluate it's aspects and feasability labels Jan 18, 2024
@pedrolamas pedrolamas removed the GH - Evaluation Needed This topic needs to be discussed to evaluate it's aspects and feasability label Jan 18, 2024
@pedrolamas pedrolamas self-assigned this Jan 19, 2024
@pedrolamas pedrolamas added this to the 1.27.2 milestone Jan 19, 2024
@pedrolamas
Copy link
Member

Hi @NyxCode, thank you for reporting this issue.

I can indeed reproduce the problem and will try to somehow improve the situation; however, I have a feeling this will always be a bit of a problem when using colors near white or black...

@NyxCode
Copy link
Author

NyxCode commented Jan 23, 2024

@pedrolamas Yeah, no pressure, this is not a dealbreaker for me.
I did attempt to fix it, but I got a bit overwhelmed by all the vuetify classes. Any css-only approach wont work, since they rely on having the colors in HSL. One approach might be to calculate the text color for a background of the accent color, store that in a css variable in JS, and use it in the styling.

@pedrolamas pedrolamas removed this from the 1.28 milestone Feb 5, 2024
@pedrolamas pedrolamas removed their assignment Feb 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
GH - Bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants