Visual Code Theme Color Reference setup

[calebeaires]

Would be great to have this extension with Theme Color Reference configuration to Visual Code. We can start from here:

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#D9C679"
    }
}

[Geri-Borbas]

Thanks! I may look into this later on, with a low priority, however. The default UI theme has not much annoying details.

If only the tab guide lines are a bit overly brightened. But I did not found the corresponding property for that. Is there at all?

[ghost]

Did some modification
You can change that indent guide line color by changing editorIndentGuide.background color value

[Geri-Borbas]

Wow, looks fine!

I'll put it into an update anytime soon. I think I can make them an extension contribution via contributes.configuration.

These are simple settings entries, right?

[ghost]

Yep, those are settings overrides in setting.json.

[moskal91]

@eppz Awesome theme, but it would be great to include workbench colors too. Activity bar does not blend with the bluish rest and it looks pretty bad. I hope you fix it! Below is my suggestion.

For example

• Added dimmed indent guide color
• Added inactive tab color
• Added activity bar color
• Added sidebar background color

With sidebar open:

With sidebar closed:

Colors:

"workbench.colorCustomizations": {
    "activityBar.background": "#32353E",
    "editorIndentGuide.background": "#32353E",
    "sideBar.background": "#23252C",
    "tab.inactiveBackground": "#32353E"
}

[Geri-Borbas]

@moskal91 Thanks! I have to upgrade the entire theme to a newer JSON notation to use workbench.colorCustomizations, so I will be roll out these changes alongside with other updates later on.

[nicovain]

In case someone is interested.. here's my current configuration that I'm working on.

"workbench.colorCustomizations": {
    "activityBar.background": "#23252C",

    "badge.background":"#5C6273",

    "dropdown.background": "#343740",

    "focusBorder":"#353a51",

    "editor.hoverHighlightBackground":"#3A3D47",
    "editorCodeLens.foreground": "#393d4b",
    "editorGroup.border": "#23252C",
    "editorGroupHeader.tabsBackground":"#23252C",
    "editorIndentGuide.background": "#32353E",

    "editorWidget.background":"#3E424D",
    "editorWidget.border": "#3E424D",

    "input.background": "#3E424D",
    "input.foreground": "#ffffff",
    "input.placeholderForeground": "#dddcd344",
    "inputOption.activeBorder": "#ff0000",

    "list.activeSelectionBackground": "#343740",
    "list.activeSelectionForeground": "#dddcd3",
    "list.hoverBackground": "#32353E",
    "list.focusBackground": "#343740",
    "list.focusForeground": "#dddcd3",
    "list.highlightForeground": "#ffffff",

    "peekView.border": "#32353E",
    "peekViewEditor.background": "#1F2026",
    "peekViewEditor.matchHighlightBackground": "#36363a",
    "peekViewEditorGutter.background": "#1F2026",
    "peekViewResult.background": "#23252C",
    "peekViewResult.matchHighlightBackground": "#3E424D",
    "peekViewResult.selectionBackground": "#3E424D",
    "peekViewResult.selectionForeground": "#dddcd3",
    "peekViewTitle.background": "#32353E",

    "scrollbar.shadow": "#23252C",
    "sideBar.background": "#23252C",
    "statusBar.background": "#23252C",

    "tab.border": "#23252C",
    "tab.activeBorder": "#2b2d35",
    "tab.activeBackground": "#2b2d35",
    "tab.inactiveBackground": "#23252C",

    "titleBar.activeBackground": "#23252C",
    "titleBar.inactiveBackground": "#23252C",

    "widget.shadow":"#23252C"
}

Note that this is on a Mac so I can't do everything you guys can and vice versa :)

[humidair1999]

Wanted to bump this, as I installed this theme the other day and noticed the indent guides are blindingly bright. Super easy fix/tweak, but it'd be nice if it was part of the theme itself.