Expose additional styles when crafting a custom theme

[johnpapa]

As per conversation with @chrisdias and @seanmcbreen , here is a list of style settings I'd love to see exposed in VS Code.

Font settings for the VS Code Shell

The font-family for the shell itself, so we can change the title bar, sidebar, status bar, file tabs, and more. This would be the default for the shell and help match the code.

.monaco-shell {
  font-family: 'Operator Mono', 'Fira code', 'Inconsolata', monospace;
  letter-spacing: 0.5px;
}

Selection Highlight and Find Match

Expose border, and background for selectionHighlight and findMatch

/*
  This puts a thin yellow border around the found items like Sublime did it
*/
.monaco-editor .findMatch,
.monaco-editor .selectionHighlight {
  border-top: 0.1px solid #f7ecb5;
  border-bottom: 0.1px solid #f7ecb5;
  background: transparent;
}

Panel headers

Expose the color, font settings and letter spacing for the panel header titles. Letter spacing is sometimes needed as the titles' letters are very close and more difficult to read in some fonts.

.vs-dark .monaco-panel-view .panel > .panel-header > .title {
  font-weight: normal;
  letter-spacing: 1px;
}

Window titles

Expose color, font settings, and letter spacing for window titles

.vs-dark .monaco-workbench > .part.titlebar > .window-title {
  color: #fafafa;
  letter-spacing: 1px;
  font-weight: 200;
}

File Tabs

Expose color, font settings, and letter spacing for tabs (file tabs)

.monaco-workbench .tabs-container .tab * {
  font-style: italic;
}

Debug bar

Expose the border for the debug bar. I find this helps make it stand out, kinda like the border for peek view.

.vs-dark .monaco-workbench .debug-actions-widget {
  border-top: 1px solid #b15a91;
  border-bottom: 1px solid #b15a91;
}

Git Diffs

Expose the margin, border, box shadow and background color for the git diff indicators. We currently have the background color, but the others are not. This would allow a cool effect like this:

.monaco-editor .dirty-diff-added {
  margin-left: 16pt;
  box-shadow: -4pt 0 4pt 2pt #27ff00;
  border-left: 4pt solid #00ff00;
  background-color: #00ff00;
}

.monaco-editor .dirty-diff-modified {
  margin-left: 16pt;
  box-shadow: -4pt 0 4pt 2pt #4fb4d8;
  border-left: 4pt solid #4fb4d8;
  background-color: #4fb4d8;
}

[aeschli]

@johnpapa Thanks for the suggestion and the nice screenshots and examples.
To be able to act on this we need separate issues. Each one has its own challenges and not all are within reach.
Font theming is #26128
Selection highlight and find borders is #30793

[johnpapa]

Moved to ...

#30793

#39324

#26128

#39325