Expose theming for Git Diffs

[johnpapa]

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

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;
}

cc #38990

[usernamehw]

This looks like an overkill. The only thing I want to configure is its width (because 3px is too distracting):

1px:

2px:

3px:

4px:

5px:

Folding icons with 5px border width:

[joaomoreno]

Actually these colors are already themeable. We won't support customising the width.

[johnpapa]

I am currently using an extension that allows us to override css soon camndonthis and many other overrides. I’d like to stop using that as it may have other implications. Just to give some context as to why i am requesting more Css control in vs code.

I see this issue has been closed. Could we have a discussion about exposing these css properties?

[usernamehw]

@joaomoreno, what is the reasoning behind not customizing the width? It's not clashing with line numbers to the left and with folding controls to the right (providing 1-5px range).

[joaomoreno]

@johnpapa As I said, those specific colors are already themeable, no need to override CSS. The theme color names are:

• editorGutter.modifiedBackground
• editorGutter. addedBackground
• editorGutter. deletedBackground

@usernamehw Yeah the only way we could make it work is to limit it in that 1-5px range... Would you like to attempt a PR for that? If so, we can extract your comment about the width into a separate issue.

[usernamehw]

Another thing: I can registerThemingParticipant, but if it does it every onDidChangeConfiguration then css just stops applying.

Is there a way to explicitly dispose registered theming participant?

[joaomoreno]

Try to disconnect the two parts. Themeing is all about colors, leave it be. You can find another way to create a dynamic CSS rule which changes every time the configuration changes. The DirtyDiffWorkbenchController could create such a stylesheet element and update it accordingly.

[ramya-rao-a]

@joaomoreno The PR to customize the width has not been merged. Is this planned for the January milestone? If not, can we move it to February?

[joaomoreno]

It's a separate issue. To verify this, just verify the colors.

[usernamehw]

But this issue was about additional diff styling and wasn't implemented.

[joaomoreno]

Sure.

[joaomoreno]

Fixed by #43334