Workbench theming

[skbolton]

Avid user of nord palettes here!
I was wondering if you are putting in any work towards the new workbench theming that is going to come to vscode.
microsoft/vscode#3112

I would love to see nord more integrated into vscode like it is in atom with Nord UI. I would be willing to help you on this as well?

[arcticicestudio]

I definitely planned to add UI support or, if the VS Code team splits up theming into multiple theme packages like Atom, to create a new UI theme package.
I try to keep up-to-date with relevant VS Code repo issues and also replied in other issues about it:

• #5
• arcticicestudio/nord #13

I scrolled through the issue you linked and it seems like the UI API will be added to the March release.

Yes, we are just wrapping up for the March release and plan to document theming soon. We still expect many changes to the theming API though (color keys) during April.

Maybe I'll wait until the April release is ready so I can update to the whole new theming API I've also mentioned in one of the comments linked above 😄

[octref]

@arcticicestudio It'd be great if you could start adapting Nord to the new API after the March release. It seems the new API will be available in Insiders during April.

The "many changes" to the API is a reaction to the feedback VSCode has gotten. So if you need something for Nord that is not available through API yet, you can leave feedback to VSCode and they will probably change the API to adapt needs. This is more work, but it benefits all VSCode theme authors (a better theming API) and makes Nord a well-integrated theme to VSCode.

I'm using Nord for Vim and iTerm, and I really want it for VSCode.
Let me know how I might help.

[nomenon]

try this config. Share your config too ))
"workbench.experimental.colorCustomizations": {
"statusBarBackground": "#3B4252",
"inactiveTabBackground": "#3B4252",
"tabBorder": "#262B35",
"inputBoxBackground": "#485264",
"panelBackground": "#485264",
"sideBarBackground": "#3B4252",
"activityBarBackground": "#485264",
"tabsContainerBackground": "#485264",
"peekViewResultsBackground": "#3B4252",
"peekViewTitleBackground": "#3B4252"
},

[ghost]

Thanks I tried it and added "titleBarActiveBackground": "#485264" same for Inactive, but can't find the color option for terminal dropdown menu and intellisense.

[arcticicestudio]

Well, version 1.11 has been released, but they've added this to the changelog:

There are still several gaps and we have not finalized the new theme file format. For that reason, there's no documentation and we ask theme authors to not use the new theme format yet.

Users can set some attributes on their own to adjust the workbench to fit the syntax theme as posted by @nomenon and also mentioned in the changelog:

However, if you want to play around with new colors, use the setting workbench.experimental.colorCustomizations to customize the currently selected theme.

@octref I've added a project card to keep track of the new theming API changes and will start to work on it as soon as the changes are merged into the Insider version for theme authors to adapt the API.

[octref]

Sounds great. Really looking forward to next month's release and nord's update :D

[arcticicestudio]

🔀 Pull Request: #11

I've created #11 which implements the new workbench theming- and JSON theme format API.
Please feel free to check out 🌱 branch and post improvement suggestions and bugs.
The PR is 👷 work in progress and there are some unresolved tasks. Some of them are blocker which needs to be addressed, maybe someone got more information about it.

[fabricioanciaes]

I also tried to theme the workbench, is not complete but here's my take on it:

"workbench.colorCustomizations": {
    "activityBar.background": "#1e2126",
    "activityBar.foreground": "#ecf0f1",
    "activityBarBadge.foreground": "#ecf0f1",
    "activityBarBadge.background": "#2e3440",
    "sideBar.background": "#272c34",
    "sideBarSectionHeader.background":"#23272d",
    "tab.border": "#23272d",
    "tab.activeBackground":"#2e3440",
    "tab.inactiveBackground":"#23272d",
    "editorGroupHeader.tabsBackground":"#23272d",
    "foreground":"#d8dee9",
    "focusBorder":"#1e2126",
    "panelTitle.activeForeground":"#1e2126",
    "button.background":"#8fbcbb",
    "button.hoverBackground":"#9ecccb",
    "dropdown.background":"#1e2126",
    "dropdown.border":"#2e3440",
    "input.background":"#272c34",
    "editorWidget.background":"#23272d",
    "editorSuggestWidget.border":"#2e3440",
    "statusBar.background":"#141518",
    "statusBar.foreground":"#d8dee9",
    "panel.background":"#23272d",
    "widget.shadow":"#2e3440",
    "editorLineNumber.foreground":"#4c566a",
    "list.hoverBackground":"#252930",
    "list.focusBackground":"#1e2126",
    "list.highlightForeground":"#a3be84",
    "list.inactiveSelectionBackground":"#2e3440",
    "pickerGroup.foreground":"#4c566a",
}