Issue reporter scrollbar is non-standard/looks out of place, fixes #42568

src/vs/code/electron-browser/issue/issueReporterMain.ts

@@ -168,6 +168,18 @@ export class IssueReporter extends Disposable {
 			content.push(`a { color: ${styles.textLinkColor}; }`);
 		}
 
+		if (styles.sliderBackgroundColor) {
+			content.push(`body::-webkit-scrollbar-thumb { background-color: ${styles.sliderBackgroundColor}; }`);
+		}
+
+		if (styles.sliderActiveColor) {
+			content.push(`body::-webkit-scrollbar-thumb:active { background-color: ${styles.sliderActiveColor}; }`);
+		}
+
+		if (styles.sliderHoverColor) {
+			content.push(`body::-webkit-scrollbar-thumb:hover { background-color: ${styles.sliderHoverColor}; }`);
+		}
+
 		styleTag.innerHTML = content.join('\n');
 		document.head.appendChild(styleTag);
 		document.body.style.color = styles.color;

src/vs/code/electron-browser/issue/media/issueReporter.css

@@ -335,4 +335,12 @@ button {
 	#similar-issues {
 		margin-left: 0;
 	}
-}
\ No newline at end of file
+}
+
+body::-webkit-scrollbar {
+	width: 14px;
+}
+
+body::-webkit-scrollbar-thumb {
+	min-height: 20px;
+}

src/vs/platform/issue/common/issue.ts

@@ -30,6 +30,9 @@ export interface IssueReporterStyles {
 	buttonBackground: string;
 	buttonForeground: string;
 	buttonHoverBackground: string;
+	sliderBackgroundColor: string;
+	sliderHoverColor: string;
+	sliderActiveColor: string;
 }
 
 export interface IssueReporterData {

src/vs/workbench/electron-browser/actions.ts

@@ -46,7 +46,7 @@ import { IExtensionService, ActivationTimes } from 'vs/platform/extensions/commo
 import { getEntries } from 'vs/base/common/performance';
 import { IIssueService, IssueReporterData, IssueType, IssueReporterStyles } from 'vs/platform/issue/common/issue';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
-import { textLinkForeground, inputBackground, inputBorder, inputForeground, buttonBackground, buttonHoverBackground, buttonForeground, inputValidationErrorBorder, foreground, inputActiveOptionBorder } from 'vs/platform/theme/common/colorRegistry';
+import { textLinkForeground, inputBackground, inputBorder, inputForeground, buttonBackground, buttonHoverBackground, buttonForeground, inputValidationErrorBorder, foreground, inputActiveOptionBorder, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import { getGalleryExtensionIdFromLocal } from 'vs/platform/extensionManagement/common/extensionManagementUtil';
 
@@ -875,7 +875,10 @@ export function getIssueReporterStyles(theme: ITheme): IssueReporterStyles {
 		inputErrorBorder: theme.getColor(inputValidationErrorBorder) && theme.getColor(inputValidationErrorBorder).toString(),
 		buttonBackground: theme.getColor(buttonBackground) && theme.getColor(buttonBackground).toString(),
 		buttonForeground: theme.getColor(buttonForeground) && theme.getColor(buttonForeground).toString(),
-		buttonHoverBackground: theme.getColor(buttonHoverBackground) && theme.getColor(buttonHoverBackground).toString()
+		buttonHoverBackground: theme.getColor(buttonHoverBackground) && theme.getColor(buttonHoverBackground).toString(),
+		sliderActiveColor: theme.getColor(scrollbarSliderActiveBackground) && theme.getColor(scrollbarSliderActiveBackground).toString(),
+		sliderBackgroundColor: theme.getColor(scrollbarSliderBackground) && theme.getColor(scrollbarSliderBackground).toString(),
+		sliderHoverColor: theme.getColor(scrollbarSliderHoverBackground) && theme.getColor(scrollbarSliderHoverBackground).toString()
 	};
 }