Dark Core UI

[larz0]

https://trello.com/c/GjJNtQSX/1381-more-thorough-dark-mode

[larz0]

@redmunds see my comment above regarding the arrows.

[redmunds]

@LarZ I saw your comment about not being able to style the triangle, so I was expecting to see the default one. I'm not sure if people will realize that's a selectable list. You should demo this (and all your other changes) to the team in tomorrow's standup to see what everyone else thinks.

[redmunds]

I just noticed another one: In Dark mode, when I search on something in Find in Files that's not there, it says "no results" but the outline color is still blue:

When I switched out of Brackets, to create the screenshot then it switched to red:

[redmunds]

@larz0 For the triangle, maybe this only works on Windows, but this seems to right-align an image in <sleect> element (needs margin on right, just a test image):

    background: @bc-btn-bg url("images/select-triangles.svg") no-repeat right center;

[mackenza]

I am running on Linux and when I switch to a light theme from a dark theme, the background for the soft menus stays at a medium grey, whereas before this, the menus had a white background.

I didn't see this in the comments above, sorry if this is known already.

edit: I didn't indicate this above, but I am using /larz/dark-ui in the screenshot

[larz0]

@redmunds I've fixed the input error border. Regarding the triangle, using background: @bc-btn-bg url("images/select-triangles.svg") no-repeat right center; makes the triangle stick to the far right but it needs to be ~7px away from the button border and there's no way to set the position from the right.

@mackenza that should be fixed now, thanks!

[redmunds]

@LarZ background: @bc-btn-bg url("images/select-triangles.svg") no-repeat right 7px center;

[mackenza]

@larz0 confirmed menus are OK now when switching between dark and light and back again.

Using your latest changes, the js parameter hints are not readable. light grey text on white background.

[larz0]

@redmunds isn't 7px the y value?

[larz0]

@mackenza could you take a screenshot?

[redmunds]

"each <percentage> or <length> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, ‘background-position: bottom 10px right 20px’ represents a ‘10px’ vertical offset up from the bottom edge and a ‘20px’ horizontal offset leftward from the right edge. If three values are given, the missing offset is assumed to be zero. "

http://www.w3.org/TR/css3-background/#the-background-position

[mackenza]

@larz0 here you go...

[larz0]

@redmunds that's awesome, it worked! I had no idea it works like that.

[larz0]

@redmunds @mackenza fixed and pushed.

[redmunds]

Looks great. Merging.

[lkcampbell]

@larz0, nice work on this, beautiful :).

One question for you. I am running Mac OSX, disable all extensions, with and without theme scrollbars preference checked, and my editor vertical and horizontal scrollbars are still white and gray. Is this by design? Because they don't seem to match the rest of the dark UI:

[larz0]

@lkcampbell Those are the old OS X scrollbars and that's what they look like, go to System Preferences -> General and set "Show scroll bars" to "Automatically based on…" to get the new quiet scroll bars but I have a feeling you don't want that.

The new scroll bars are hard to see on dark themes because for some reason the native scroll bar isn't aware of editor's background; the color should be inverted when the background is dark like how scroll bar colors are inverted on dark websites. This can be solved by customizing the dark scroll bar for Mac (like Windows and Linux) and that should also affect the appearance of old scrollbars. I'm happy to do that but I'll need consensus because the behavior is slightly different, quiet scroll bars disappear when the content is not scrolling and some people prefer that. Hope that makes sense.

[lkcampbell]

@larz0, yes that makes sense. I still get the white and gray scrollbars when I use "Automatically..." but I am sure that is just a configuration issue. I see the quiet scrollbar when I set it to "When scrolling" and I do see what you mean about the quiet scrollbar being very difficult to see. Seems like neither choice is great but the gray on white is at least more practical since you can see it a lot better.

[dangoor]

@pthiess This one won't show up on Waffle because it's closed. If more testing is required, this is one of those cases where a separate tracking issue is required in order to show up in Waffle.