Change:
VSCode Version: 1.21 OS Version: macOS Currently border style for selection and word highlight are dotted. It's possible to make it like it's with which is straight lines? Selection () <img width="36" alt="image" src="https://user-"As you can see it's dotted. Word highlight (/) <img width="264" alt="image" src="https://user-"As you can see it's dotted. Find match () <img width="64" alt="image" src="https://user-"As you can see border lines are straight, this is how it needs to look like in selection and word highlight borders.
Same problem is with . As I can see only is working as expected.
Same issue on ubuntu 17.10, since the recent update (1.21) the styling's been broken.
This issue is theme specific, doesn't exist on Monokai or other themes. I reckon this only concerns OneDark Pro.
This doesn't exist in Monokai because Monokai theme doesn't use border for search since there's no such color specified in theme. As you can see in this issue I'm talking about new colors introduced in VS Code 1.21 which borders text, but the problem is border are dotted instead of straight line. So this isn't OS or theme specified, the problem is VS Code and only one color works properly () which uses lines for border instead of dots.
I found here it's . Should I make a PR in proper places to change from to ? /cc
I also see is while others are . Is that correct? I would also like to suggest to use border solid for . /cc
! With different border styles, we get this issue above in the screenshot. We definitely need solid style. Right now it looks like garland :D
since you're working with colors, what do you think? The idea is from Atom with plugin. It's really weird to see the dotted or dashed border styles. If needed I can create a PR.
We can do solid border styles for anything except high contrast. In the high contrast theme, the same color is used for all of these decorations and the only distinguishable trait is the border style.
I'm very happy!!! What about which have , it's correct? Also, you forgot to set to too. If you want I can create a PR.
:+1: for a PR
Thanks. I will start to work on it right now!
Already done in Please review If everything is OK with PR please include it in next release (1.22.0).
this won't make it into 1.22. Only critical fixes at this point.
Maybe 1.22.1? Anyways thanks for explaining it, I really appreciate your and your team work on VS Code.

Discussion:
} registerThemingParticipant((theme, collector) => { <del> let added = theme.getColor(diffInserted); </del> <ins> const added = theme.getColor(diffInserted); </ins> if (added) { collector.addRule(`.monaco-editor .line-insert, .monaco-editor .char-insert { background-color: ${added}; }`); collector.addRule(`.monaco-diff-editor .line-insert, .monaco-diff-editor .char-insert { background-color: ${added}; }`); collector.addRule(`.monaco-editor .inline-added-margin-view-zone { background-color: ${added}; }`); } <del> let removed = theme.getColor(diffRemoved); </del> <ins> const removed = theme.getColor(diffRemoved); </ins> if (removed) { collector.addRule(`.monaco-editor .line-delete, .monaco-editor .char-delete { background-color: ${removed}; }`); collector.addRule(`.monaco-diff-editor .line-delete, .monaco-diff-editor .char-delete { background-color: ${removed}; }`); collector.addRule(`.monaco-editor .inline-deleted-margin-view-zone { background-color: ${removed}; }`); } <del> let addedOutline = theme.getColor(diffInsertedOutline); </del> <ins> const addedOutline = theme.getColor(diffInsertedOutline); </ins> if (addedOutline) { <del> collector.addRule(`.monaco-editor .line-insert, .monaco-editor .char-insert { border: 1px dashed ${addedOutline}; }`); </del> <ins> collector.addRule(`.monaco-editor .line-insert, .monaco-editor .char-insert { border: 1px ${theme.type === 'hc' ? 'dashed' : 'solid'} ${addedOutline}; }`); </ins> } <del> let removedOutline = theme.getColor(diffRemovedOutline); </del> <ins> const removedOutline = theme.getColor(diffRemovedOutline); </ins> if (removedOutline) { <del> collector.addRule(`.monaco-editor .line-delete, .monaco-editor .char-delete { border: 1px dashed ${removedOutline}; }`); </del> <ins> collector.addRule(`.monaco-editor .line-delete, .monaco-editor .char-delete { border: 1px ${theme.type === 'hc' ? 'dashed' : 'solid'} ${removedOutline}; }`); </ins> } <del> let shadow = theme.getColor(scrollbarShadow); </del> <ins> const shadow = theme.getColor(scrollbarShadow); </ins> if (shadow) { collector.addRule(`.monaco-diff-editor.side-by-side .editor.modified { box-shadow: -6px 0 5px -5px ${shadow}; }`); }

// contains all color rules that used to defined in editor/browser/widget/editor.css registerThemingParticipant((theme, collector) => { <del> let background = theme.getColor(editorBackground); </del> <ins> const background = theme.getColor(editorBackground); </ins> if (background) { collector.addRule(`.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input { background-color: ${background}; }`); } <del> let foreground = theme.getColor(editorForeground); </del> <ins> const foreground = theme.getColor(editorForeground); </ins> if (foreground) { collector.addRule(`.monaco-editor, .monaco-editor .inputarea.ime-input { color: ${foreground}; }`); } <del> let gutter = theme.getColor(editorGutter); </del> <ins> const gutter = theme.getColor(editorGutter); </ins> if (gutter) { collector.addRule(`.monaco-editor .margin { background-color: ${gutter}; }`); } <del> let rangeHighlight = theme.getColor(editorRangeHighlight); </del> <ins> const rangeHighlight = theme.getColor(editorRangeHighlight); </ins> if (rangeHighlight) { collector.addRule(`.monaco-editor .rangeHighlight { background-color: ${rangeHighlight}; }`); } <del> let rangeHighlightBorder = theme.getColor(editorRangeHighlightBorder); </del> <ins> const rangeHighlightBorder = theme.getColor(editorRangeHighlightBorder); </ins> if (rangeHighlightBorder) { <del> collector.addRule(`.monaco-editor .rangeHighlight { border: 1px dotted ${rangeHighlightBorder}; }`); </del> <ins> collector.addRule(`.monaco-editor .rangeHighlight { border: 1px ${theme.type === 'hc' ? 'dotted' : 'solid'} ${rangeHighlightBorder}; }`); </ins> } <del> let invisibles = theme.getColor(editorWhitespaces); </del> <ins> const invisibles = theme.getColor(editorWhitespaces); </ins> if (invisibles) { collector.addRule(`.vs-whitespace { color: ${invisibles} !important; }`); }

// theming registerThemingParticipant((theme, collector) => { <del> function addBackgroundColorRule(selector: string, color: Color): void { </del> <ins> const addBackgroundColorRule = (selector: string, color: Color): void => { </ins> if (color) { collector.addRule(`.monaco-editor ${selector} { background-color: ${color}; }`); } <del> } </del> <ins> }; </ins> addBackgroundColorRule('.findMatch', theme.getColor(editorFindMatchHighlight)); addBackgroundColorRule('.currentFindMatch', theme.getColor(editorFindMatch)); addBackgroundColorRule('.findScope', theme.getColor(editorFindRangeHighlight)); <del> let widgetBackground = theme.getColor(editorWidgetBackground); </del> <ins> const widgetBackground = theme.getColor(editorWidgetBackground); </ins> addBackgroundColorRule('.find-widget', widgetBackground); <del> let widgetShadowColor = theme.getColor(widgetShadow); </del> <ins> const widgetShadowColor = theme.getColor(widgetShadow); </ins> if (widgetShadowColor) { collector.addRule(`.monaco-editor .find-widget { box-shadow: 0 2px 8px ${widgetShadowColor}; }`); } <del> let findMatchHighlightBorder = theme.getColor(editorFindMatchHighlightBorder); </del> <ins> const findMatchHighlightBorder = theme.getColor(editorFindMatchHighlightBorder); </ins> if (findMatchHighlightBorder) { <del> collector.addRule(`.monaco-editor .findMatch { border: 1px dotted ${findMatchHighlightBorder}; -moz-box-sizing: border-box; box-sizing: border-box; }`); </del> <ins> collector.addRule(`.monaco-editor .findMatch { border: 1px ${theme.type === 'hc' ? 'dotted' : 'solid'} ${findMatchHighlightBorder}; box-sizing: border-box; }`); </ins> } <del> let findMatchBorder = theme.getColor(editorFindMatchBorder); </del> <ins> const findMatchBorder = theme.getColor(editorFindMatchBorder); </ins> if (findMatchBorder) { <del> collector.addRule(`.monaco-editor .currentFindMatch { border: 2px solid ${findMatchBorder}; padding: 1px; -moz-box-sizing: border-box; box-sizing: border-box; }`); </del> <ins> collector.addRule(`.monaco-editor .currentFindMatch { border: 2px solid ${findMatchBorder}; padding: 1px; box-sizing: border-box; }`); </ins> } <del> let findRangeHighlightBorder = theme.getColor(editorFindRangeHighlightBorder); </del> <ins> const findRangeHighlightBorder = theme.getColor(editorFindRangeHighlightBorder); </ins> if (findRangeHighlightBorder) { <del> collector.addRule(`.monaco-editor .findScope { border: 1px dashed ${findRangeHighlightBorder}; }`); </del> <ins> collector.addRule(`.monaco-editor .findScope { border: 1px ${theme.type === 'hc' ? 'dashed' : 'solid'} ${findRangeHighlightBorder}; }`); </ins> } <del> let hcBorder = theme.getColor(contrastBorder); </del> <ins> const hcBorder = theme.getColor(contrastBorder); </ins> if (hcBorder) { collector.addRule(`.monaco-editor .find-widget { border: 2px solid ${hcBorder}; }`); } <del> let error = theme.getColor(errorForeground); </del> <ins> const error = theme.getColor(errorForeground); </ins> if (error) { collector.addRule(`.monaco-editor .find-widget.no-results .matchesCount { color: ${error}; }`); } <del> let border = theme.getColor(editorWidgetBorder); </del> <ins> const border = theme.getColor(editorWidgetBorder); </ins> if (border) { collector.addRule(`.monaco-editor .find-widget .monaco-sash { background-color: ${border}; width: 3px !important; margin-left: -4px;}`); }

registerEditorAction(PrevWordHighlightAction); registerThemingParticipant((theme, collector) => { <del> let selectionHighlight = theme.getColor(editorSelectionHighlight); </del> <ins> const selectionHighlight = theme.getColor(editorSelectionHighlight); </ins> if (selectionHighlight) { collector.addRule(`.monaco-editor .focused .selectionHighlight { background-color: ${selectionHighlight}; }`); collector.addRule(`.monaco-editor .selectionHighlight { background-color: ${selectionHighlight.transparent(0.5)}; }`); } <del> let wordHighlight = theme.getColor(editorWordHighlight); </del> <ins> const wordHighlight = theme.getColor(editorWordHighlight); </ins> if (wordHighlight) { collector.addRule(`.monaco-editor .wordHighlight { background-color: ${wordHighlight}; }`); } <del> let wordHighlightStrong = theme.getColor(editorWordHighlightStrong); </del> <ins> const wordHighlightStrong = theme.getColor(editorWordHighlightStrong); </ins> if (wordHighlightStrong) { collector.addRule(`.monaco-editor .wordHighlightStrong { background-color: ${wordHighlightStrong}; }`); } <del> let selectionHighlightBorder = theme.getColor(editorSelectionHighlightBorder); </del> <ins> const selectionHighlightBorder = theme.getColor(editorSelectionHighlightBorder); </ins> if (selectionHighlightBorder) { <del> if (theme.type === 'hc') { collector.addRule(`.monaco-editor .selectionHighlight { border: 1px dotted ${selectionHighlightBorder}; box-sizing: border-box; }`); } else { collector.addRule(`.monaco-editor .selectionHighlight { border: 1px solid ${selectionHighlightBorder}; box-sizing: border-box; }`); } </del> <ins> collector.addRule(`.monaco-editor .selectionHighlight { border: 1px ${theme.type === 'hc' ? 'dotted' : 'solid'} ${selectionHighlightBorder}; box-sizing: border-box; }`); </ins> } <del> let wordHighlightBorder = theme.getColor(editorWordHighlightBorder); </del> <ins> const wordHighlightBorder = theme.getColor(editorWordHighlightBorder); </ins> if (wordHighlightBorder) { <del> if (theme.type === 'hc') { collector.addRule(`.monaco-editor .wordHighlight { border: 1px dashed ${wordHighlightBorder}; box-sizing: border-box; }`); } else { collector.addRule(`.monaco-editor .wordHighlight { border: 1px solid ${wordHighlightBorder}; box-sizing: border-box; }`); } </del> <ins> collector.addRule(`.monaco-editor .wordHighlight { border: 1px ${theme.type === 'hc' ? 'dashed' : 'solid'} ${wordHighlightBorder}; box-sizing: border-box; }`); </ins> } <del> let wordHighlightStrongBorder = theme.getColor(editorWordHighlightStrongBorder); </del> <ins> const wordHighlightStrongBorder = theme.getColor(editorWordHighlightStrongBorder); </ins> if (wordHighlightStrongBorder) { <del> if (theme.type === 'hc') { collector.addRule(`.monaco-editor .wordHighlightStrong { border: 1px dashed ${wordHighlightStrongBorder}; box-sizing: border-box; }`); } else { collector.addRule(`.monaco-editor .wordHighlightStrong { border: 1px solid ${wordHighlightStrongBorder}; box-sizing: border-box; }`); } </del> <ins> collector.addRule(`.monaco-editor .wordHighlightStrong { border: 1px ${theme.type === 'hc' ? 'dashed' : 'solid'} ${wordHighlightStrongBorder}; box-sizing: border-box; }`); </ins> } });

const diffInsertedOutlineColor = theme.getColor(diffInsertedOutline); if (diffInsertedOutlineColor) { <del> collector.addRule(`.monaco-workbench .search-view .replaceMatch:not(:empty) { border: 1px dashed ${diffInsertedOutlineColor}; }`); </del> <ins> collector.addRule(`.monaco-workbench .search-view .replaceMatch:not(:empty) { border: 1px ${theme.type === 'hc' ? 'dashed' : 'solid'} ${diffInsertedOutlineColor}; }`); </ins> } const diffRemovedOutlineColor = theme.getColor(diffRemovedOutline); if (diffRemovedOutlineColor) { <del> collector.addRule(`.monaco-workbench .search-view .replace.findInFileMatch { border: 1px dashed ${diffRemovedOutlineColor}; }`); </del> <ins> collector.addRule(`.monaco-workbench .search-view .replace.findInFileMatch { border: 1px ${theme.type === 'hc' ? 'dashed' : 'solid'} ${diffRemovedOutlineColor}; }`); </ins> } const findMatchHighlightBorder = theme.getColor(editorFindMatchHighlightBorder); if (findMatchHighlightBorder) { <del> collector.addRule(`.monaco-workbench .search-view .findInFileMatch { border: 1px dashed ${findMatchHighlightBorder}; }`); </del> <ins> collector.addRule(`.monaco-workbench .search-view .findInFileMatch { border: 1px ${theme.type === 'hc' ? 'dashed' : 'solid'} ${findMatchHighlightBorder}; }`); </ins> } });