Sidebar coloring

[bluetidepro]

I just recently switched to using VS Code from Sublime, and wanted to continue to use Boxy with VS Code.

In the Sublime version, https://github.com/ihodev/sublime-boxy, their theme extends to the sidebar. Is that something you are planning to add for this VS Code port?

[Fred-Vatin]

Theme support in VS Code is still in process to be improved. Please vote for this issue to speed up the VS Code theme enhancement.

Thus theme author have currently limited means.

[trongthanh]

I just voted. :)

[dganoff]

I've added my own custom colors for the newly supported theme-able components for the "Boxy Ocean" color scheme. Sorry I don't have time to submit a pull request, but here they are:

"activityBar.background": "#1b2b34",
"activityBar.foreground": "#99dc9e",
"activityBarBadge.background": "#ec5f67cc",
"sideBar.background": "#1b2b34cc",
"list.activeSelectionBackground": "#0e1f29",
"list.inactiveSelectionBackground": "#0e1f29",
"list.hoverBackground": "#0e1f29",
"editorWhitespace.foreground": "#1b2b34",
"tab.inactiveBackground": "#0e1f29",
"titleBar.activeBackground": "#0e1f29"

[trongthanh]

Ok, let me set it for the Boxy Ocean scheme.

[dganoff]

@trongthanh You may want to omit the "editorWhitespace.foreground": "#1b2b34", line since that's more of my own preference. Thanks!

[trongthanh]

@dganoff Noted. Your workbench customization is now published in 0.1.1.

[dganoff]

@trongthanh Thank you so much!!!

[KillyMXI]

And now, how can I unset this in settings?
I really prefer the way it was before.

[trongthanh]

Ouch. I didn't see this coming.

Personally, I think the workbench color suggested by @dganoff looks harmonious with the scheme.

Anyway, if you want your default workbench theme back, you can override those color in your settings:

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#333333",
        "activityBar.foreground": "#cccccc",
        "activityBarBadge.background": "#007acc",
        "editor.background": "#1E1E1E",
        "editor.foreground": "#D4D4D4",
        "editor.inactiveSelectionBackground": "#3A3D41",
        "editor.selectionHighlightBackground": "#ADD6FF26",
        "editorIndentGuide.background": "#404040",
        "list.dropBackground": "#383B3D",
        "list.hoverBackground": "#2a2d2d",
        "sideBar.background": "#252525",
        "sideBarTitle.foreground": "#BBBBBB",
        "tab.inactiveBackground": "#2d2d2d"
    }
}

If you want to keep editor background of the scheme, just remove the editor.background and editor.foreground from the settings above.

[KillyMXI]

Why suggested workbench colors don't work for me:

• sidebar is pretty much blended into editor - I found it really inconvenient;
• activityBar.foreground and activityBarBadge.background are not that harmonious - they are better default.

Thanks to this incident, I put some effort into color customizations (not a proposal, just as an example):

    // "sideBar.background": "#1b2b34cc",
    // "sideBar.border": "#ffffff22",
    // "activityBar.border": "#ffffff22",

    "activityBar.foreground": "#ffffffbb",
    "activityBarBadge.background": "#007acc",
    "activityBar.border": "#132026",
    "sideBar.background": "#132026",
    "sideBar.foreground": "#ffffff99",
    //"sideBar.border": "#132026",
    "sideBarSectionHeader.background": "#ffffff1c",
    "list.activeSelectionBackground": "#ffffff1c",
    "list.inactiveSelectionBackground": "#ffffff13",
    "list.hoverBackground": "#ffffff0c",
    "tab.inactiveBackground": "#00000022"

Darker sidebar is better separated from editor, but it becomes more contrast than editor, which is somewhat annoying. I see no way to dim down just the list foreground, so I left it with default background in the end.
UPD: VS Code update 1.13 arrived just in time, with new colors. Now it all comes together.

[KillyMXI]

Much more refined now. Although not everything can be styled yet.
Commented section is for lighter version, which is usable now with borders.
I've also darkened the terminal. I guess it can be disabled for lighter version.

"workbench.colorCustomizations": {
    "activityBar.foreground": "#ffffffbb",
    "activityBarBadge.background": "#007acc",
    "activityBar.border": "#132026",
    "sideBar.background": "#132026",
    "sideBar.foreground": "#ffffff99",
    "sideBar.border": "#1b2b34",
    "sideBarSectionHeader.background": "#ffffff1c",
    "list.activeSelectionBackground": "#ffffff1c",
    "list.inactiveSelectionBackground": "#ffffff13",
    "list.hoverBackground": "#ffffff0c",
    "tab.inactiveBackground": "#00000022",
    "tab.activeForeground": "#ffffffdd",
    "statusBar.background": "#132026",
    "statusBar.border": "#1b2b34",
    "statusBar.foreground": "#ffffffaa",
    "input.background": "#132026",
    "input.border": "#ffffff29",
    "badge.background": "#ffffff22",
    "badge.foreground": "#ffffff99",
    "dropdown.background": "#132026",
    "dropdown.foreground": "#ffffffdd",
    "dropdown.border": "#ffffff29",
    "panel.background": "#1b2b34",
    "panel.border": "#ffffff22",
    "panelTitle.activeForeground": "#ffffffdd",

    // "sideBar.background": "#1b2b34cc",
    // "sideBar.border": "#ffffff22",
    // "activityBar.border": "#ffffff22",
    // "statusBar.background": "#1b2b34",
    // "statusBar.border": "#ffffff22",

    "terminal.background": "#132026",
    "terminal.foreground": "#ffffffaa",
    "terminal.ansiYellow": "#aaaa0b",
    "terminal.ansiBrightYellow": "#d3d33b",
    "terminal.ansiWhite": "#cccccc",
    "terminal.ansiBrightWhite": "#e3e3e3",
    // "terminal.ansiBlack": "#000000",
    // "terminal.ansiBrightBlack": "#666666",
    // "terminal.ansiBlue": "#2472c8",
    // "terminal.ansiBrightBlue": "#3b8eea",
    // "terminal.ansiCyan": "#11a8cd",
    // "terminal.ansiBrightCyan": "#29b8db",
    // "terminal.ansiGreen": "#0dbc79",
    // "terminal.ansiBrightGreen": "#23d18b",
    // "terminal.ansiMagenta": "#bc3fbc",
    // "terminal.ansiBrightMagenta": "#d670d6",
    // "terminal.ansiRed": "#cd3131",
    // "terminal.ansiBrightRed": "#f14c4c"
}

I found yellow way too bright for a dark theme, so I dimmed it down.
Also, ansiWhite and ansiBrightWhite were the same, but since ansiWhite is mapped to PowerShell Gray, I adjusted it for that (not much of effect though, since both of them overridden by foreground color when on default background).
Not sure how things might change in future, but I guess, if including into theme, it will be better to add all of them at once, so there are other values included.

[rdlaner]

Hi, would it be possible to update the Solarized Dark theme to so that the sidebar matches the Sublime version? Thanks!

[trongthanh]

Hi @rdlaner,

I'm commenting just to let you know that I've read your request, but am really tied-up right now. I'll find some time to update the side bar ASAP using settings from the official Solarized Dark which can be found here.

In the mean time, you may copy the color settings with // workbench... sections in the above config to the user settings "workbench.colorCustomizations".

[rdlaner]

@trongthanh, Thanks for the FYI. I did end up copying many of the settings from the official Solarized Dark, that ended up working fine for me.

[trongthanh]

Someone has help updated (#6) workbench customization for Solarized Dark theme (ver 0.2.0).
I guess this has address @rdlaner request and this issue can be closed.