Change:
Ruler background is set to black with 50% transparency, but vscode shows solid black! ! ! Description for editorOverviewRuler.background also says: , but vscode use this background if minimap is enabled or not!
The color description is out of date. We changed the behavior of via so we now always respect . However, it never supported transparency, so we could add support for that.

Discussion:
return Color.Format.CSS.parseHex(hex) || Color.red; } <ins> static equals(a: Color | null, b: Color | null): boolean { if (!a && !b) { return true; } if (!a || !b) { return false; } return a.equals(b); } </ins> readonly rgba: RGBA; private _hsla?: HSLA; get hsla(): HSLA {

public readonly cursorColor: string | null; public readonly themeType: 'light' | 'dark' | 'hcLight' | 'hcDark'; <del> public readonly backgroundColor: string | null; </del> <ins> public readonly backgroundColor: Color | null; </ins> public readonly top: number; public readonly right: number;

const minimapSide = minimapOpts.side; const themeColor = theme.getColor(editorOverviewRulerBackground); const defaultBackground = TokenizationRegistry.getDefaultBackground(); <del> let backgroundColor: Color | null = null; if (themeColor !== undefined) { backgroundColor = themeColor; } else if (minimapEnabled) { backgroundColor = defaultBackground; } if (backgroundColor === null || minimapSide === 'left') { this.backgroundColor = null; </del> <ins> if (themeColor) { this.backgroundColor = themeColor; } else if (minimapEnabled && minimapSide === 'right') { this.backgroundColor = defaultBackground; </ins> } else { <del> this.backgroundColor = Color.Format.CSS.formatHex(backgroundColor); </del> <ins> this.backgroundColor = null; </ins> } const layoutInfo = options.get(EditorOption.layoutInfo);

&& this.hideCursor === other.hideCursor && this.cursorColor === other.cursorColor && this.themeType === other.themeType <del> && this.backgroundColor === other.backgroundColor </del> <ins> && Color.equals(this.backgroundColor, other.backgroundColor) </ins> && this.top === other.top && this.right === other.right && this.domWidth === other.domWidth

} private _render(): void { <ins> const backgroundColor = this._settings.backgroundColor; </ins> if (this._settings.overviewRulerLanes === 0) { // overview ruler is off <del> this._domNode.setBackgroundColor(this._settings.backgroundColor ? this._settings.backgroundColor : ''); </del> <ins> this._domNode.setBackgroundColor(backgroundColor ? Color.Format.CSS.formatHexA(backgroundColor) : ''); </ins> this._domNode.setDisplay('none'); return; }

const halfMinDecorationHeight = (minDecorationHeight / 2) | 0; const canvasCtx = this._domNode.domNode.getContext('2d')!; <del> if (this._settings.backgroundColor === null) { canvasCtx.clearRect(0, 0, canvasWidth, canvasHeight); </del> <ins> if (backgroundColor) { if (backgroundColor.isOpaque()) { // We have a background color which is opaque, we can just paint the entire surface with it canvasCtx.fillStyle = Color.Format.CSS.formatHexA(backgroundColor); canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight); } else { // We have a background color which is transparent, we need to first clear the surface and // then fill it canvasCtx.clearRect(0, 0, canvasWidth, canvasHeight); canvasCtx.fillStyle = Color.Format.CSS.formatHexA(backgroundColor); canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight); } </ins> } else { <del> canvasCtx.fillStyle = this._settings.backgroundColor; canvasCtx.fillRect(0, 0, canvasWidth, canvasHeight); </del> <ins> // We don't have a background color canvasCtx.clearRect(0, 0, canvasWidth, canvasHeight); </ins> } const x = this._settings.x;

export const editorBracketMatchBorder = registerColor('editorBracketMatch.border', { dark: '#888', light: '#B9B9B9', hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('editorBracketMatchBorder', 'Color for matching brackets boxes')); export const editorOverviewRulerBorder = registerColor('editorOverviewRuler.border', { dark: '#7f7f7f4d', light: '#7f7f7f4d', hcDark: '#7f7f7f4d', hcLight: '#666666' }, nls.localize('editorOverviewRulerBorder', 'Color of the overview ruler border.')); <del> export const editorOverviewRulerBackground = registerColor('editorOverviewRuler.background', null, nls.localize('editorOverviewRulerBackground', 'Background color of the editor overview ruler. Only used when the minimap is enabled and placed on the right side of the editor.')); </del> <ins> export const editorOverviewRulerBackground = registerColor('editorOverviewRuler.background', null, nls.localize('editorOverviewRulerBackground', 'Background color of the editor overview ruler.')); </ins> export const editorGutter = registerColor('editorGutter.background', { dark: editorBackground, light: editorBackground, hcDark: editorBackground, hcLight: editorBackground }, nls.localize('editorGutter', 'Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.'));