Scrollbars are not dark in dark theme

[jonrimmer]

They're light:

sprint 43 experimental build 0.43.0-14375 (release 287868769) 
build timestamp: Tue Sep 02 2014 14:40:48 GMT-0700

[Mark-Simulacrum]

They are still dark for me, using Brackets 43 from master (60ce7afb491daa0071fba7e0e44e19f2078b4377).

Are you using the default dark theme?

[jonrimmer]

I am. This in OS X, and I have the "show scroll bars" system preference set to "automatically based on mouse or trackpad" rather than the default "when scrolling", so I am getting more traditional scrollbars than the fancy OS X Lion ones. If I reset the setting, then I get the dark scrollbars, but at the expense of not having the style of scrollbar I prefer in every other app.

However, even with this option enabled, custom scrollbar styles still work in Chrome and Safari on pages that use them, so I'm not sure why they wouldn't work in Brackets?

[Mark-Simulacrum]

@larz0 and @MiguelCastillo may have more thoughts on this, but my guess would be that Brackets' does not style the "special" scrollbars.

[marcelgerber]

According to https://github.com/adobe/brackets/issues/8384#issuecomment-49700920, the Brackets (dark) style is only applied if a mouse is plugged in, in order to not change the behaviour.

[MiguelCastillo]

@MarcelGerber that's correct. We style scrollbars when there is a mouse/trackpad device. The styling we apply matches the system's scrollbars though. I have not taken a look at the setting that @JonRimmer is talking about though, so maybe that's the next step and see how that's affecting brackets.

[pthiess]

@MiguelCastillo I see the same as @JonRimmer with the same scrollbar settings

[MiguelCastillo]

@pthiess Do you see the "old" scrollbars when scrolling anywhere on the document? I only see the bigger scrollbars when I mouse pointer in right on the scrollbar gutter and I scroll, which is the same I see in chrome.

[pthiess]

@MiguelCastillo it seems to appear a little bit random on first use of a view only - i switched to mainline, not sure if split view has any impact here.

[MiguelCastillo]

@pthiess Gotcha. Let me try to reproduce it targeting initial editor load then... I haven't been able to reporoduce this behavior under 'normal' use

[yzwind]

I found that if the mouse is plugged in the macbook, the scrollbar will appear gray with the white background just like the picture above. When I remove the mouse, it disappears and appears when I scrolling with trackpad. BTW, the "automatically based on mouse or trackpad" of OS X setting is on. I'm not sure it's brackets' issue or OS X's.

[nethip]

Possibly related https://github.com/adobe/brackets/issues/10175.

[nethip]

@yzwind We have improved this behavior in 1.3. Can you give it a spin?

[yzwind]

@nethip Still have this issue in 1.3.

[bobrocke]

@nethip I get light colored scrollbars in a dark UI theme, too. It looks out of place.

[bobrocke]

Is there a way to create custom CSS/LESS to fix this?

[RAFA3L]

Paste this in the theme CSS file or using Brackets Custom CSS Injector

::-webkit-scrollbar { width: 10px; background-color: rgb(15, 15, 15); }

::-webkit-scrollbar-thumb { width: 10px; box-shadow: 0 0 0 12px rgb(49, 49, 49) inset; } ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:focus { box-shadow: 0 0 0 12px rgb(89, 89, 89) inset; } ::-webkit-scrollbar-thumb:active { box-shadow: 0 0 0 12px rgb(169, 169, 169) inset; }

.CodeMirror-hscrollbar { height: 10px; }

[dxps]

@RAFA3L

Many thanks for the tip! 👍

On my OSX, using Brackets 1.7 (build 1.7.0-16898 (release b0a363b71)), hover, focus, and active states doesn't have any effect. However, there were two additional white regions that I had to make them dark.

Having this, here is the result that I am currently satisfied with it:

::-webkit-scrollbar {
    width: 10px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    width: 10px;
    box-shadow: 0 0 0 12px rgb(59, 59, 59) inset;
}

.CodeMirror-hscrollbar {
    height: 10px;
}

.platform-mac .CodeMirror-gutter-filler,
.platform-mac .CodeMirror-scrollbar-filler {
    background-color: transparent;
    background-image: none;
}

[JeffryBooher]

I'm seeing white scrollbars on the Dark Theme when using an external mouse. Happens with or without splitview.

[madanbn]

moving it out to 1.9 milestone as we are closer to the release of 1.8 and will need more time for this issue.

[deartet]

I paste the code above into theme.css and not working. hope someone can solve this issue because it is so ugly and obvious in the dark theme. unplugging mouse it will back to dark scrollbar

[swmitra]

We are looking into this issue. @deartet Can you please confirm couple of things? First, which OSX version you see this? Second what's the OS level scroll configuration?

[allenlejeune]

I had the same Issue, Go to your Mac System Preferences, under general, change-- show scroll bar to When Scrolling, This fixed it for me.

[wloibl]

Thanks, @allenlejeune thist did the trick for me!