search

fluidd-core / fluidd

Fluidd, the klipper UI.
https://docs.fluidd.xyz
GNU General Public License v3.0
1.34k stars 401 forks source link

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

Open NyxCode opened 6 months ago

NyxCode commented 6 months ago

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!

pedrolamas commented 5 months ago

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 commented 5 months ago

@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.