Change:
Not sure how this wasn't filed earlier, but based on the : So the SCM indicators for /modified along the gutter are using the same shape but with different colors: <img width="198" alt="CleanShot 2022-02-10 at 22 09 44 src="https://user-"In addition to that, the deleted icon (dark) and /modified (light) do not pass : <img width="402" alt="CleanShot 2022-02-11 at 08 11 46 src="https://user-"<img width="89" alt="CleanShot 2022-02-11 at 08 12 35 src="https://user-"<hr<img width="402" alt="CleanShot 2022-02-11 at 08 14 35 src="https://user-"<img width="402" alt="CleanShot 2022-02-11 at 08 14 46 src="https://user-"! cc
A couple of different ideas to solve this: For modified lines we could use a 1px line instead of 3px (we can still increase the line on hover) <img width="198" src="https://user-"This changes the shape type so that it's not solid <img width="198" src="https://user-"Similar to the dashed line but with a zig zag pattern <img width="198" src="https://user-"For lines we could use two lines to signify new additions <img width="198" src="https://user-"
good catch. We should fix this. 1px sounds like too thin and some users with bad sight might not be able to see it. I personally like the dashed or the pattern line. Let's see what thinks
Here's an example if we did the pattern, also to achieve the pattern with just css: https://user-
+1 to the dashed or pattern line. Still has an approchable hit area compared to the 1px option and feels visually distinct. The other potential problem with the 1px option is that it could be mistaken for a bracket pair guide.
I agree with and about the 1px option. I think both the dashed and pattern line helps differentiate, but I prefer the dashed line more because it can do this with more simplicity. Love what it does over hover!
+1 on the dashed line. That should be something that we can easily address. What about?
Here are some color changes to help pass the color contrast ratio: <img width="240" alt="CleanShot 2022-02-15 at 13 43 41 src="https://user-"<img width="261" alt="CleanShot 2022-02-16 at 08 48 05 src="https://user-"
Cool stuff Should we assign this to February or March, just that we do not loose track of this?
PR updated the SCM colors to pass the color contrast ratio, last thing needed is the adding the dashed line for modified lines
I can take a look at that if you want. Also, should the pattern apply for the modified lines in the minimap?
yea if you wanted to try to add that, that'd be great. I tried adding it but because we are using borders and the pattern works best with background colors (from what I've seen) it wasn't that straight forward. I think extending this to the minimap makes sense if it's doable but not a high priority since the primary area is the gutter.
This is now merged into main https://user-
Looks very cool!
this is super annoying :/ and it doesn't have a off switch
please subscribe to
Sorry.. but this triggers my OCD, hard. Even if smooth transition is between stripes it's still distracting. I want to concentrate on the code and this does exactly the opposite. Please add ability to revert back to default as currently all I can do is monkey patch the css on each window reload. !
I do not like this at all!!! but I understand that some will... So, whoewer was in charge of making this happen: why not add an option to toggle this on/off?!
The decorator pattern looks corrupted: !

Discussion:
import { ISCMService, ISCMRepository, ISCMProvider } from 'vs/workbench/contrib/scm/common/scm'; import { ModelDecorationOptions } from 'vs/editor/common/model/textModel'; import { registerThemingParticipant, IColorTheme, ICssStyleCollector, themeColorFromId, IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService'; <del> import { editorErrorForeground, registerColor, transparent } from 'vs/platform/theme/common/colorRegistry'; </del> <ins> import { editorBackground, editorErrorForeground, registerColor, transparent } from 'vs/platform/theme/common/colorRegistry'; </ins> import { ICodeEditor, IEditorMouseEvent, MouseTargetType } from 'vs/editor/browser/editorBrowser'; import { registerEditorAction, registerEditorContribution, ServicesAccessor, EditorAction } from 'vs/editor/browser/editorExtensions'; import { PeekViewWidget, getOuterEditor, peekViewBorder, peekViewTitleBackground, peekViewTitleForeground, peekViewTitleInfoForeground } from 'vs/editor/contrib/peekView/browser/peekView';

registerEditorContribution(DirtyDiffController.ID, DirtyDiffController); registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { <ins> const editorBackgroundColor = theme.getColor(editorBackground); </ins> const editorGutterModifiedBackgroundColor = theme.getColor(editorGutterModifiedBackground); <ins> const linearGradient = `-45deg, ${editorGutterModifiedBackgroundColor} 25%, ${editorBackgroundColor} 25%, ${editorBackgroundColor} 50%, ${editorGutterModifiedBackgroundColor} 50%, ${editorGutterModifiedBackgroundColor} 75%, ${editorBackgroundColor} 75%, ${editorBackgroundColor}`; </ins> if (editorGutterModifiedBackgroundColor) { collector.addRule(` .monaco-editor .dirty-diff-modified { <del> border-left: 3px solid ${editorGutterModifiedBackgroundColor}; </del> <ins> background-size: 3px 3px; background-repeat-x: no-repeat; background-image: linear-gradient(${linearGradient}); </ins> transition: opacity 0.5s; } .monaco-editor .dirty-diff-modified:before { <del> background: ${editorGutterModifiedBackgroundColor}; </del> <ins> transform: translateX(3px); background-size: 3px 3px; background-image: linear-gradient(${linearGradient}); </ins> } .monaco-editor .margin:hover .dirty-diff-modified { opacity: 1;

height: 100%; width: 0; left: -2px; <del> transition: width 80ms linear, left 80ms linear; </del> <ins> transition: width 80ms linear, left 80ms linear, transform 80ms linear; </ins> } .monaco-editor .dirty-diff-deleted:before {