jdinhify / vscode-theme-gruvbox

Gruvbox theme for vscode based on https://github.com/morhetz/gruvbox
https://marketplace.visualstudio.com/items?itemName=jdinhlife.gruvbox
MIT License
274 stars 63 forks source link

Tabs/tabs Bar colors and StatusBar border #15

Closed layoaster closed 5 years ago

layoaster commented 5 years ago

Thanks for creating this theme!. I have a proposal regarding the tabs part of the interface. I use the Dark - Medium contrast so the proposed modifications must be tested with this contrast.

// Settings for the theme: Gruvbox Dark Medium
"workbench.colorCustomizations": {
        "tab.activeBackground": "#3c3836",
        "tab.inactiveBackground": "#282828",
        "tab.activeBorder": "#689d6a",
        "tab.unfocusedActiveBorder": "#689d6a",
        "editorGroupHeader.tabsBackground": "#282828",
        "editorGroupHeader.tabsBorder": "#3c3836",
        "statusBar.border": "#3c3836",
    },

My motivation was that I didn't like that every other element of the interface blends in with the same background color except for the tabs. Also, I added line border (lighter color) to visually differentiate the status bar and the tab bar and an extra highlight in the border of the active tab (focused or not).

Before image image

After image image

jdinhify commented 5 years ago

This is very nice. Thanks @layoaster Could I suggest that we don't set the tab.unfocusedActiveBorder? As it will be easier to differentiate the focused and unfocused ones.

Are you comfortable making a PR for this? It would mean that you would do it for all 6 variants. If not, I'm happy to do it.

layoaster commented 5 years ago

Sure! It makes sense to leave tab.unfocusedActiveBorder unset. I'll make the necessary modifications to the other variants to open a PR.

layoaster commented 5 years ago

I found that for light themes the green color of the tab.activeBorder don't highlight as much as it does on dark themes so I switched to orange (#d65d0e) but that breaks with general accent color of the light themes (green) so it kind of force me to also modify the following (light themes only):

"list.activeSelectionForeground": "#af3a03",
"list.inactiveSelectionForeground": "#d65d0e",

So there is a decision to be made from the following choices:

  1. Stick with the green.
  2. Go for Orange only for the tab border.
  3. Also modify to orange the list.[in]activeSelectionForeground but left pending other elements.

Anyways, I'll make the PR with what I made so far (3) since it can be reverted to whatever gets decided.

jdinhify commented 5 years ago

I agree the green isn't highlighting much on the light theme, and the orange for the light theme actually looks great. Let's go with it.

list.[in]activeSelectionForeground is looking good as well, what are those pending elements?

layoaster commented 5 years ago

Never done a theme myself so I can't tell you exactly what might be typically subject of being colored with the "theme accent" but doing a quick search for things colored with #689d6a I found the scrollbarSlider.activeBackground might have to be changed.

Nevertheless, I think further modifications fall out of the scope of this issue/PR

jdinhify commented 5 years ago

PR has been merged & deployed. Thanks @layoaster