Background color cannot be changed

[markjharvey]

Description

The background color cannot be changed

Steps to reproduce

1. Go to http://leonardocolor.io
2. Click on Create new theme
3. Observe the default Color scale "Gray"
4. Observe the tab "Theme colors" is selected
5. Observe the palette generated from the color scale Gray
6. Observe the Background color cannot be changed
7. Click on the "Theme Settings icon"
8. Click on "Background color"
9. Observe only "Gray" is available to select
10. If you add more colors to the Color scale, selecting those colors as the Background color does not change anything.

Expected behavior

The Background color should have the option to input a custom color value.
Nothing happens when you click on it except copying the current value (#FFFFFF) to clipboard.

Screenshots

Environment

MacBook Pro M1 (16-inch, 2021)
MacOS 12.4
Version 100.0.4896.127 (Official Build) (arm64)

Additional context

N/A

[NateBaldwinDesign]

@markjharvey a few things could be happening here:

1. When the background lightness is set to 100% in the settings menu, regardless of which color scale is selected, the color will always be white (#ffffff). Changing the background lightness to less than 100% will show more color when another scale is selected.
2. Clicking on the square labeled "background color" in the main area of the page will copy the value: those are output colors generated based on the settings you have set.

Some of these details are demonstrated in this introductory video for creating themes: https://youtu.be/d-i18M384Bo

Hope this helps

[markjharvey]

@NateBaldwinDesign So it appears this "Theme Settings" dropdown is actually the "Background color settings"? It's still not clear what the "Background color" dropdown selection does.

[NateBaldwinDesign]

1. The "background color" picker selects which color scale to use for a background. Backgrounds are dynamic, just as with everything else, so you can adjust lightness (this helps for creating light and dark mode themes)

2. Choosing different scales will change the background color appearance. Lightness of the background is independent and determined via the "lightness" slider.

3. To make the background black, slide the "lightness" to zero

[markjharvey]

@NateBaldwinDesign Thank you so much for that explanation. I can see now I just did not understand how to use this. My fault and thanks again for clarifying.

Perhaps I should create an issue for a feature request, a plain "White" and "Black" option in that dropdown. Maybe it disables the other sliders? I'm not sure exactly and don't want to solution. Just a way to explicitly say "Make the background white/black"

[NateBaldwinDesign]

It's no problem @markjharvey! These are good points. There is some difficulty using the tool and it could be improved to help these types of problems.

[njeleniauskas]

@NateBaldwinDesign I just tested this in a few browsers as I had been experiencing the same issue, and the bg theme color does not work in Firefox. I tested Chrome, Edge, Brave, and Firefox (only the last one produces this issue) on Win 11.

[markjharvey]

@NateBaldwinDesign I just tested this in a few browsers as I had been experiencing the same issue, and the bg theme color does not work in Firefox. I tested Chrome, Edge, Brave, and Firefox (only the last one produces this issue) on Win 11.

Did you try adjusting the lightness slider? No matter which theme you have selected, if the lightness slider is 0% or 100%, it will be black or white. To get the color selected in the theme, you have to adjust the lightness to somewhere between 0 and 100.

[njeleniauskas]

Did you try adjusting the lightness slider? No matter which theme you have selected, if the lightness slider is 0% or 100%, it will be black or white. To get the color selected in the theme, you have to adjust the lightness to somewhere between 0 and 100.

Yes, apologies I should have noted this earlier. That said, Firefox does seem to now be responding to the bg color change (with lightness adjustments) when I checked again today. 👍

[ohheyyeahthatsme]

+1 that I also thought I could click the background color chip and set a different hex as the background

I don't prefer to use arbitrary sliders. We already have fixed hex values we're using for backgrounds, so I want to generate a palette using those specific values