Dark Mode?

[SethBurkart123]

It's pretty self explanatory. A lot of applications these days have a dark mode as secondary or even primary option. Without it the picker looks fairly out of place in these UI's.

[hxf31891]

@SethBurkart123 good call, frankly I am surprised this hasn't come up sooner.

Let me ask you this, which would you prefer? I simple version that inherits, would be easily but wonkier. Or a boolean dark/light more? More controllable but project would have to be track and pass in.

[SethBurkart123]

I added a color picker to my Chrome extension, BetterSEQTA+. But to get dark mode working, I had to write complex code to change the colors. I think a simple boolean toggle between dark and light mode would be good. Also, if specific classes could be added to each element, so that in the future if somebody using it really wanted to override the styles they wouldn't have to make css selectors that look like this:

.dark #rbgcp-wrapper [style="height\:\ 28px\;\ background\:\ rgb\(233\,\ 233\,\ 245\)\;\ border-radius\:\ 6px\;\ padding\:\ 2px\;\ display\:\ flex\;\ justify-content\:\ center\;\ align-items\:\ center\;\ box-sizing\:\ border-box\;"] [style="padding-left\:\ 8px\;\ padding-right\:\ 8px\;\ line-height\:\ 1\;\ border-radius\:\ 4px\;\ font-weight\:\ 700\;\ color\:\ rgb\(86\,\ 140\,\ 245\)\;\ font-size\:\ 12px\;\ height\:\ 24px\;\ transition\:\ all\ 160ms\ ease\ 0s\;\ display\:\ flex\;\ align-items\:\ center\;\ justify-content\:\ center\;\ background\:\ white\;\ box-shadow\:\ rgba\(0\,\ 0\,\ 0\,\ 0\.2\)\ 1px\ 1px\ 3px\;"] {}

(P.S. That's currently how I added dark mode. It was painful, and would obviously break as soon as the styling of the picker gets changed - view the full file)

[hxf31891]

@SethBurkart123 starting with v2.3.1 the picker should automatically update to reflect the users dark mode preferences.