Dark theme has some areas where text is dark


(Eric Berry) #1

When viewing the Settings using the dark theme the form labels are not very visible


(Jeff Atwood) #2

That color means you have overridden those values; this is not the default label color. I wonder @awesomerobot if we could simplify this and drop the label color here because the field color carries OK and less is generally better.


(Eric Berry) #3

I didn’t manually override these colors. Was it done via the boot script?


(Jeff Atwood) #4

Those site settings are overridden that is what the color means.


(Eric Berry) #5

Gotcha. I wonder if there’s a better default color for overridden values. I’d love to take a stab at some dark theme refinements :smiley:


(Régis Hanol) #6

You mean the wizard, right?


(Eric Berry) #7

Yes. :grin: I did not realize that those colors are the default. I suggest we make some tweaks to the default dark theme colors, although it may be affecting me more than others (I’m mildly colorblind)


(Joe) #8

I also have a dark background in the settings menu, I modified the color / style of the overridden settings to show a small bright icon instead of displaying in a different color.

Here’s what that looks like:

And here is the CSS I used to get that result:

.settings .setting.overridden h3 {
    color: inherit;
}

.setting.overridden h3:before {
    content: "\f042";
    font-family: fontawesome;
    color: red;
    padding-right: 5px;
}

(Kris) #9

It’s generally better in the input field, but not all settings have an input field

I think @lll’s icon suggestion is good, though I’d use the pencil because we already use it to convey “edited” elsewhere


(Eric Berry) #10

I’m not sure we want the pencil. Anytime I see a pencil, I think it’s an edit button. Perhaps an asterisk might be better, or a dot?

Here’s an interesting conversation on the topic: gui design - Is there a better character than the asterisk to indicate a modified document? - User Experience Stack Exchange


(Kris) #11

That’s fair, iconography can be a bit of a minefield — you could also worry that an asterisk might signify “required” to some people when associated with inputs. A dot could work; there’s a wrench available in font-awesome, maybe that could signify that you changed a setting (we represent settings with a gear already?)

Could also reiterate the meaning through the toggle on the upper right


(Joe) #12

I looked through FontAwesome, here is a non-exhaustive list of icons that caught my attention for reference:


(Sam Saffron) #13

Isn’t addressing this with a different solution kind of bypassing the issue that the dark theme has some serious contrast problems in certain cases? Should it not be “shiny orange” in that case?


(Jeff Atwood) #14

I think an even simpler solution is warranted, just take away the text color from the keys, and let the value background color carry. Less is more.


(Kris) #15

Yep, that’s a fair way to look at it. I’ll fix the contrast, I was also looking at it as an enhancement because signifying this with only color makes it mildly less accessible.


(Kris) #16

@coderberry I just pushed a fix for the contrast issue to master