Change:
I opened the Settings editor, hovered over a setting, and noticed a new grey line appear to the left of the settings. This issue occurs with the default light and dark themes. !
I found that when calling , if we don't pass in the style override anymore, it will be reset to default I put this fix for notebook but I wonder if it's unexpected
Thanks for figuring that out. We shouldn't update options that are not set, that a regression. I fixed that with and updated your code to back what it was. Is different, it's about the indent guides which were disabled previously by not providing any colors. With my change we complete your colors with the default colors, which IMO is the right thing to do. is a simple fix. But I think we should not use the colors for that but the already existing option. I'm working on a follow up PR, but that needs to be reviewed by who is out today.

Discussion:
override updateOptions(options: IWorkbenchListOptionsUpdate): void { super.updateOptions(options); <del> this.updateStyles(options.overrideStyles); </del> <ins> if (options.overrideStyles !== undefined) { this.updateStyles(options.overrideStyles); } </ins> if (options.multipleSelectionSupport !== undefined) { this.listSupportsMultiSelect.set(!!options.multipleSelectionSupport);

override updateOptions(options: IWorkbenchListOptionsUpdate): void { super.updateOptions(options); <del> if (options.overrideStyles) { </del> <ins> if (options.overrideStyles !== undefined) { </ins> this.updateStyles(options.overrideStyles); }

override updateOptions(options: IWorkbenchTableOptionsUpdate): void { super.updateOptions(options); <del> this.updateStyles(options.overrideStyles); </del> <ins> if (options.overrideStyles !== undefined) { this.updateStyles(options.overrideStyles); } </ins> if (options.multipleSelectionSupport !== undefined) { this.listSupportsMultiSelect.set(!!options.multipleSelectionSupport);

override updateOptions(options: IWorkbenchDataTreeOptionsUpdate = {}): void { super.updateOptions(options); <del> if (options.overrideStyles) { </del> <ins> if (options.overrideStyles !== undefined) { </ins> this.internals.updateStyleOverrides(options.overrideStyles); }

private _shadowElement?: HTMLElement; private _shadowElementViewInfo: { height: number; width: number; top: number; left: number } | null = null; <del> private _listStyleOverride = { listBackground: notebookEditorBackground, listActiveSelectionBackground: notebookEditorBackground, listActiveSelectionForeground: foreground, listFocusAndSelectionBackground: notebookEditorBackground, listFocusAndSelectionForeground: foreground, listFocusBackground: notebookEditorBackground, listFocusForeground: foreground, listHoverForeground: foreground, listHoverBackground: notebookEditorBackground, listHoverOutline: focusBorder, listFocusOutline: focusBorder, listInactiveSelectionBackground: notebookEditorBackground, listInactiveSelectionForeground: foreground, listInactiveFocusBackground: notebookEditorBackground, listInactiveFocusOutline: notebookEditorBackground, }; </del> private readonly _editorFocus: IContextKey<boolean>; private readonly _outputFocus: IContextKey<boolean>; private readonly _editorEditable: IContextKey<boolean>;

transformOptimization: false, //(isMacintosh && isNative) || getTitleBarStyle(this.configurationService, this.environmentService) === 'native', initialSize: this._dimension, styleController: (_suffix: string) => { return this._list; }, <del> overrideStyles: this._listStyleOverride, </del> <ins> overrideStyles: { listBackground: notebookEditorBackground, listActiveSelectionBackground: notebookEditorBackground, listActiveSelectionForeground: foreground, listFocusAndSelectionBackground: notebookEditorBackground, listFocusAndSelectionForeground: foreground, listFocusBackground: notebookEditorBackground, listFocusForeground: foreground, listHoverForeground: foreground, listHoverBackground: notebookEditorBackground, listHoverOutline: focusBorder, listFocusOutline: focusBorder, listInactiveSelectionBackground: notebookEditorBackground, listInactiveSelectionForeground: foreground, listInactiveFocusBackground: notebookEditorBackground, listInactiveFocusOutline: notebookEditorBackground, }, </ins> accessibilityProvider: { getAriaLabel: (element: CellViewModel) => { if (!this.viewModel) {

const newCellListHeight = Math.max(newBodyHeight - topInserToolbarHeight, 0); if (this._list.getRenderHeight() < newCellListHeight) { // the new dimension is larger than the list viewport, update its additional height first, otherwise the list view will move down a bit (as the `scrollBottom` will move down) <del> this._list.updateOptions({ additionalScrollHeight: this._allowScrollBeyondLastLine() ? Math.max(0, (newCellListHeight - 50)) : topInserToolbarHeight, overrideStyles: this._listStyleOverride }); </del> <ins> this._list.updateOptions({ additionalScrollHeight: this._allowScrollBeyondLastLine() ? Math.max(0, (newCellListHeight - 50)) : topInserToolbarHeight }); </ins> this._list.layout(newCellListHeight, dimension.width); } else { // the new dimension is smaller than the list viewport, if we update the additional height, the `scrollBottom` will move up, which moves the whole list view upwards a bit. So we run a layout first. this._list.layout(newCellListHeight, dimension.width); <del> this._list.updateOptions({ additionalScrollHeight: this._allowScrollBeyondLastLine() ? Math.max(0, (newCellListHeight - 50)) : topInserToolbarHeight, overrideStyles: this._listStyleOverride }); </del> <ins> this._list.updateOptions({ additionalScrollHeight: this._allowScrollBeyondLastLine() ? Math.max(0, (newCellListHeight - 50)) : topInserToolbarHeight }); </ins> } this._overlayContainer.style.visibility = 'visible';