Add separator for sidebar sections?
I have been using Catppuccin themes in VSCode for a few months now and although I really enjoy them, the sidebar has been bugging me for a while.
Mainly, because the sections in the sidebar are scrollable boxes, when there is too much text around I find myself unable to quickly find the subsection headers. I realize there's the stylized arrowhead to tell you where the section starts, but it would still give me pause trying to figure out the separators. I ended up overriding the border color using palette.surface2:
"workbench.colorCustomizations": {
"[Catppuccin Latte]": {
"sideBarSectionHeader.border": "#acb0be" // palette.surface2
},
"[Catppuccin Frappé]": {
"sideBarSectionHeader.border": "#626880" // palette.surface2
},
"[Catppuccin Macchiato]": {
"sideBarSectionHeader.border": "#5b6078" // palette.surface2
},
"[Catppuccin Mocha]": {
"sideBarSectionHeader.border": "#585b70" // palette.surface2
},
}
and I think it works well:
I am by no means an expert on theme design, and if the lack of separating bar is known and loved by all, I'm happy to keep my overrides in my setting.json! Also happy to put a PR up if the change is wanted.
Thanks for the theme!
Source: catppuccin/vscode