Repository: provectus/kafka-ui
Issue: Dark mode scheme interferes with syntax highlighting visibility
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed
area/ux

### Issue submitter TODO list

- [X] I've looked up my issue in [FAQ](https://docs.kafka-ui.provectus.io/faq/common-problems)
- [X] I've searched for an already existing issues [here](https://github.com/provectus/kafka-ui/issues)
- [X] I've tried running `master`-labeled docker image and the issue still persists there
- [X] I'm running a supported version of the application which is listed [here](https://github.com/provectus/kafka-ui/blob/master/SECURITY.md)

### Describe the bug (actual behavior)

Syntax highlighting/text editor for ksql conflicts with dark theme.

### Expected behavior

Either having a solarized color scheme or some lighter tones would help.

### Your installation details

v0.7.0

### Steps to reproduce

Observe dark mode w/syntax highlighting

### Screenshots

![image](https://github.com/provectus/kafka-ui/assets/6597925/95ac79fb-a781-40d3-a411-a4a12fe5d49a)


### Logs

_No response_

### Additional context

_No response_

Issue comments:
Hello there taylorsmithgg! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
I would recommend VS Code theme as a fairly standardized theme:
```
{
	"$schema": "vscode://schemas/color-theme",
	"type": "dark",
	"colors": {
		"activityBar.activeBorder": "#0078d4",
		"activityBar.background": "#181818",
		"activityBar.border": "#ffffff15",
		"activityBar.foreground": "#d7d7d7",
		"activityBar.inactiveForeground": "#ffffff80",
		"activityBarBadge.background": "#0078d4",
		"activityBarBadge.foreground": "#ffffff",
		"badge.background": "#0078d4",
		"badge.foreground": "#ffffff",
		"button.background": "#0078d4",
		"button.border": "#ffffff12",
		"button.foreground": "#ffffff",
		"button.hoverBackground": "#0078d4e6",
		"button.secondaryBackground": "#ffffff0f",
		"button.secondaryForeground": "#cccccc",
		"button.secondaryHoverBackground": "#ffffff15",
		"checkbox.background": "#313131",
		"checkbox.border": "#ffffff1f",
		"debugToolBar.background": "#181818",
		"descriptionForeground": "#8b949e",
		"diffEditor.insertedLineBackground": "#23863633",
		"diffEditor.insertedTextBackground": "#2386364d",
		"diffEditor.removedLineBackground": "#da363333",
		"diffEditor.removedTextBackground": "#da36334d",
		"dropdown.background": "#313131",
		"dropdown.border": "#ffffff1f",
		"dropdown.foreground": "#cccccc",
		"dropdown.listBackground": "#313131",
		"editor.background": "#1f1f1f",
		"editor.findMatchBackground": "#9e6a03",
		"editor.foreground": "#cccccc",
		"editor.inactiveSelectionBackground": "#3a3d41",
		"editor.selectionHighlightBackground": "#add6ff26",
		"editorGroup.border": "#ffffff17",
		"editorGroupHeader.tabsBackground": "#181818",
		"editorGroupHeader.tabsBorder": "#ffffff15",
		"editorGutter.addedBackground": "#2ea043",
		"editorGutter.deletedBackground": "#f85149",
		"editorGutter.modifiedBackground": "#0078d4",
		"editorIndentGuide.activeBackground": "#707070",
		"editorIndentGuide.background": "#404040",
		"editorInlayHint.background": "#8b949e33",
		"editorInlayHint.foreground": "#8b949e",
		"editorInlayHint.typeBackground": "#8b949e33",
		"editorInlayHint.typeForeground": "#8b949e",
		"editorLineNumber.activeForeground": "#cccccc",
		"editorLineNumber.foreground": "#6e7681",
		"editorOverviewRuler.border": "#010409",
		"editorWidget.background": "#1f1f1f",
		"errorForeground": "#f85149",
		"focusBorder": "#0078d4",
		"foreground": "#cccccc",
		"icon.foreground": "#cccccc",
		"input.background": "#2a2a2a",
		"input.border": "#ffffff1f",
		"input.foreground": "#cccccc",
		"input.placeholderForeground": "#ffffff79",
		"inputOption.activeBackground": "#2489db82",
		"inputOption.activeBorder": "#2488db",
		"keybindingLabel.foreground": "#cccccc",
		"list.activeSelectionBackground": "#323232",
		"list.activeSelectionForeground": "#ffffff",
		"list.activeSelectionIconForeground": "#ffffff",
		"list.dropBackground": "#383b3d",
		"menu.background": "#1f1f1f",
		"menu.border": "#454545",
		"menu.foreground": "#cccccc",
		"menu.separatorBackground": "#454545",
		"notificationCenterHeader.background": "#1f1f1f",
		"notificationCenterHeader.foreground": "#cccccc",
		"notifications.background": "#1f1f1f",
		"notifications.border": "#ffffff15",
		"notifications.foreground": "#cccccc",
		"panel.background": "#181818",
		"panel.border": "#ffffff15",
		"panelInput.border": "#ffffff15",
		"panelTitle.activeBorder": "#0078d4",
		"panelTitle.activeForeground": "#cccccc",
		"panelTitle.inactiveForeground": "#8b949e",
		"peekViewEditor.background": "#1f1f1f",
		"peekViewEditor.matchHighlightBackground": "#bb800966",
		"peekViewResult.background": "#1f1f1f",
		"peekViewResult.matchHighlightBackground": "#bb800966",
		"pickerGroup.border": "#ffffff15",
		"pickerGroup.foreground": "#8b949e",
		"ports.iconRunningProcessForeground": "#369432",
		"progressBar.background": "#0078d4",
		"quickInput.background": "#1f1f1f",
		"quickInput.foreground": "#cccccc",
		"scrollbar.shadow": "#484f5833",
		"scrollbarSlider.activeBackground": "#6e768187",
		"scrollbarSlider.background": "#6e768133",
		"scrollbarSlider.hoverBackground": "#6e768145",
		"settings.dropdownBackground": "#313131",
		"settings.dropdownBorder": "#ffffff1f",
		"settings.headerForeground": "#ffffff",
		"settings.modifiedItemIndicator": "#bb800966",
		"sideBar.background": "#181818",
		"sideBar.border": "#ffffff15",
		"sideBar.foreground": "#cccccc",
		"sideBarSectionHeader.background": "#181818",
		"sideBarSectionHeader.border": "#ffffff15",
		"sideBarSectionHeader.foreground": "#cccccc",
		"sideBarTitle.foreground": "#cccccc",
		"statusBar.background": "#181818",
		"statusBar.border": "#ffffff15",
		"statusBar.debuggingBackground": "#0078d4",
		"statusBar.debuggingForeground": "#ffffff",
		"statusBar.foreground": "#cccccc",
		"statusBar.noFolderBackground": "#1f1f1f",
		"statusBarItem.focusBorder": "#0078d4",
		"statusBarItem.prominentBackground": "#6e768166",
		"statusBarItem.remoteBackground": "#0078d4",
		"statusBarItem.remoteForeground": "#ffffff",
		"tab.activeBackground": "#1f1f1f",
		"tab.activeBorder": "#1f1f1f",
		"tab.activeBorderTop": "#0078d4",
		"tab.activeForeground": "#ffffff",
		"tab.border": "#ffffff15",
		"tab.hoverBackground": "#1f1f1f",
		"tab.inactiveBackground": "#181818",
		"tab.inactiveForeground": "#ffffff80",
		"tab.lastPinnedBorder": "#cccccc33",
		"tab.unfocusedActiveBorder": "#1f1f1f",
		"tab.unfocusedActiveBorderTop": "#ffffff15",
		"tab.unfocusedHoverBackground": "#6e76811a",
		"terminal.foreground": "#cccccc",
		"terminal.inactiveSelectionBackground": "#3a3d41",
		"terminal.tab.activeBorder": "#0078d4",
		"textBlockQuote.background": "#010409",
		"textBlockQuote.border": "#ffffff14",
		"textCodeBlock.background": "#6e768166",
		"textLink.activeForeground": "#40a6ff",
		"textLink.foreground": "#40a6ff",
		"textSeparator.foreground": "#21262d",
		"titleBar.activeBackground": "#181818",
		"titleBar.activeForeground": "#cccccc",
		"titleBar.border": "#ffffff15",
		"titleBar.inactiveBackground": "#1f1f1f",
		"titleBar.inactiveForeground": "#8b949e",
		"welcomePage.progress.foreground": "#0078d4",
		"welcomePage.tileBackground": "#ffffff0f",
		"widget.border": "#ffffff15",
		//"activityBar.dropBorder": "#d7d7d7",
		//"banner.background": "#323232",
		//"banner.foreground": "#ffffff",
		//"banner.iconForeground": "#3794ff",
		//"breadcrumb.activeSelectionForeground": "#e0e0e0",
		//"breadcrumb.background": "#1f1f1f",
		//"breadcrumb.focusForeground": "#e0e0e0",
		//"breadcrumb.foreground": "#cccccccc",
		//"breadcrumbPicker.background": "#1f1f1f",
		//"button.separator": "#ffffff66",
		//"charts.blue": "#3794ff",
		//"charts.foreground": "#cccccc",
		//"charts.green": "#89d185",
		//"charts.lines": "#cccccc80",
		//"charts.orange": "#d18616",
		//"charts.purple": "#b180d7",
		//"charts.red": "#f14c4c",
		//"charts.yellow": "#cca700",
		//"checkbox.foreground": "#cccccc",
		//"checkbox.selectBackground": "#1f1f1f",
		//"checkbox.selectBorder": "#cccccc",
		//"commandCenter.activeBackground": "#ffffff14",
		//"commandCenter.activeBorder": "#cccccc4d",
		//"commandCenter.activeForeground": "#cccccc",
		//"commandCenter.background": "#ffffff0d",
		//"commandCenter.border": "#cccccc33",
		//"commandCenter.foreground": "#cccccc",
		//"commandCenter.inactiveBorder": "#8b949e40",
		//"commandCenter.inactiveForeground": "#8b949e",
		//"debugConsole.errorForeground": "#f85149",
		//"debugConsole.infoForeground": "#3794ff",
		//"debugConsole.sourceForeground": "#cccccc",
		//"debugConsole.warningForeground": "#cca700",
		//"debugConsoleInputIcon.foreground": "#cccccc",
		//"debugExceptionWidget.background": "#420b0d",
		//"debugExceptionWidget.border": "#a31515",
		//"debugIcon.breakpointCurrentStackframeForeground": "#ffcc00",
		//"debugIcon.breakpointDisabledForeground": "#848484",
		//"debugIcon.breakpointForeground": "#e51400",
		//"debugIcon.breakpointStackframeForeground": "#89d185",
		//"debugIcon.breakpointUnverifiedForeground": "#848484",
		//"debugIcon.continueForeground": "#75beff",
		//"debugIcon.disconnectForeground": "#f48771",
		//"debugIcon.pauseForeground": "#75beff",
		//"debugIcon.restartForeground": "#89d185",
		//"debugIcon.startForeground": "#89d185",
		//"debugIcon.stepBackForeground": "#75beff",
		//"debugIcon.stepIntoForeground": "#75beff",
		//"debugIcon.stepOutForeground": "#75beff",
		//"debugIcon.stepOverForeground": "#75beff",
		//"debugIcon.stopForeground": "#f48771",
		//"debugTokenExpression.boolean": "#4e94ce",
		//"debugTokenExpression.error": "#f48771",
		//"debugTokenExpression.name": "#c586c0",
		//"debugTokenExpression.number": "#b5cea8",
		//"debugTokenExpression.string": "#ce9178",
		//"debugTokenExpression.value": "#cccccc99",
		//"debugView.exceptionLabelBackground": "#6c2022",
		//"debugView.exceptionLabelForeground": "#cccccc",
		//"debugView.stateLabelBackground": "#88888844",
		//"debugView.stateLabelForeground": "#cccccc",
		//"debugView.valueChangedHighlight": "#569cd6",
		//"diffEditor.diagonalFill": "#cccccc33",
		//"disabledForeground": "#cccccc80",
		//"editor.findMatchHighlightBackground": "#ea5c0055",
		//"editor.findRangeHighlightBackground": "#3a3d4166",
		//"editor.focusedStackFrameHighlightBackground": "#7abd7a4d",
		//"editor.foldBackground": "#264f784d",
		//"editor.hoverHighlightBackground": "#264f7840",
		//"editor.inlineValuesBackground": "#ffc80033",
		//"editor.inlineValuesForeground": "#ffffff80",
		//"editor.lineHighlightBorder": "#282828",
		//"editor.linkedEditingBackground": "#ff00004d",
		//"editor.rangeHighlightBackground": "#ffffff0b",
		//"editor.selectionBackground": "#264f78",
		//"editor.snippetFinalTabstopHighlightBorder": "#525252",
		//"editor.snippetTabstopHighlightBackground": "#7c7c7c4d",
		//"editor.stackFrameHighlightBackground": "#ffff0033",
		//"editor.symbolHighlightBackground": "#ea5c0055",
		//"editor.wordHighlightBackground": "#575757b8",
		//"editor.wordHighlightStrongBackground": "#004972b8",
		//"editor.wordHighlightTextBackground": "#575757b8",
		//"editorActiveLineNumber.foreground": "#c6c6c6",
		//"editorBracketHighlight.foreground1": "#ffd700",
		//"editorBracketHighlight.foreground2": "#da70d6",
		//"editorBracketHighlight.foreground3": "#179fff",
		//"editorBracketHighlight.foreground4": "#00000000",
		//"editorBracketHighlight.foreground5": "#00000000",
		//"editorBracketHighlight.foreground6": "#00000000",
		//"editorBracketHighlight.unexpectedBracket.foreground": "#ff1212cc",
		//"editorBracketMatch.background": "#0064001a",
		//"editorBracketMatch.border": "#888888",
		//"editorBracketPairGuide.activeBackground1": "#00000000",
		//"editorBracketPairGuide.activeBackground2": "#00000000",
		//"editorBracketPairGuide.activeBackground3": "#00000000",
		//"editorBracketPairGuide.activeBackground4": "#00000000",
		//"editorBracketPairGuide.activeBackground5": "#00000000",
		//"editorBracketPairGuide.activeBackground6": "#00000000",
		//"editorBracketPairGuide.background1": "#00000000",
		//"editorBracketPairGuide.background2": "#00000000",
		//"editorBracketPairGuide.background3": "#00000000",
		//"editorBracketPairGuide.background4": "#00000000",
		//"editorBracketPairGuide.background5": "#00000000",
		//"editorBracketPairGuide.background6": "#00000000",
		//"editorCodeLens.foreground": "#999999",
		//"editorCommentsWidget.rangeActiveBackground": "#3794ff1a",
		//"editorCommentsWidget.rangeActiveBorder": "#3794ff66",
		//"editorCommentsWidget.rangeBackground": "#3794ff1a",
		//"editorCommentsWidget.rangeBorder": "#3794ff66",
		//"editorCommentsWidget.resolvedBorder": "#cccccc80",
		//"editorCommentsWidget.unresolvedBorder": "#3794ff",
		//"editorCursor.foreground": "#aeafad",
		//"editorError.foreground": "#f14c4c",
		//"editorGhostText.foreground": "#ffffff56",
		//"editorGroup.dropBackground": "#53595d80",
		//"editorGroup.dropIntoPromptBackground": "#1f1f1f",
		//"editorGroup.dropIntoPromptForeground": "#cccccc",
		//"editorGroupHeader.noTabsBackground": "#1f1f1f",
		//"editorGutter.background": "#1f1f1f",
		//"editorGutter.commentGlyphForeground": "#cccccc",
		//"editorGutter.commentRangeForeground": "#37373d",
		//"editorGutter.commentUnresolvedGlyphForeground": "#cccccc",
		//"editorGutter.foldingControlForeground": "#cccccc",
		//"editorHint.foreground": "#eeeeeeb3",
		//"editorHoverWidget.background": "#1f1f1f",
		//"editorHoverWidget.border": "#454545",
		//"editorHoverWidget.foreground": "#cccccc",
		//"editorHoverWidget.highlightForeground": "#2aaaff",
		//"editorHoverWidget.statusBarBackground": "#252525",
		//"editorInfo.foreground": "#3794ff",
		//"editorInlayHint.parameterBackground": "#8b949e33",
		//"editorInlayHint.parameterForeground": "#8b949e",
		//"editorLightBulb.foreground": "#ffcc00",
		//"editorLightBulbAutoFix.foreground": "#75beff",
		//"editorLink.activeForeground": "#4e94ce",
		//"editorMarkerNavigation.background": "#1f1f1f",
		//"editorMarkerNavigationError.background": "#f14c4c",
		//"editorMarkerNavigationError.headerBackground": "#f14c4c1a",
		//"editorMarkerNavigationInfo.background": "#3794ff",
		//"editorMarkerNavigationInfo.headerBackground": "#3794ff1a",
		//"editorMarkerNavigationWarning.background": "#cca700",
		//"editorMarkerNavigationWarning.headerBackground": "#cca7001a",
		//"editorOverviewRuler.addedForeground": "#2ea04399",
		//"editorOverviewRuler.bracketMatchForeground": "#a0a0a0",
		//"editorOverviewRuler.commonContentForeground": "#60606066",
		//"editorOverviewRuler.currentContentForeground": "#40c8ae80",
		//"editorOverviewRuler.deletedForeground": "#f8514999",
		//"editorOverviewRuler.errorForeground": "#ff1212b3",
		//"editorOverviewRuler.findMatchForeground": "#d186167e",
		//"editorOverviewRuler.incomingContentForeground": "#40a6ff80",
		//"editorOverviewRuler.infoForeground": "#3794ff",
		//"editorOverviewRuler.modifiedForeground": "#0078d499",
		//"editorOverviewRuler.rangeHighlightForeground": "#007acc99",
		//"editorOverviewRuler.selectionHighlightForeground": "#a0a0a0cc",
		//"editorOverviewRuler.warningForeground": "#cca700",
		//"editorOverviewRuler.wordHighlightForeground": "#a0a0a0cc",
		//"editorOverviewRuler.wordHighlightStrongForeground": "#c0a0c0cc",
		//"editorOverviewRuler.wordHighlightTextForeground": "#a0a0a0cc",
		//"editorPane.background": "#1f1f1f",
		//"editorRuler.foreground": "#5a5a5a",
		//"editorStickyScroll.background": "#1f1f1f",
		//"editorStickyScrollHover.background": "#2a2d2e",
		//"editorSuggestWidget.background": "#1f1f1f",
		//"editorSuggestWidget.border": "#454545",
		//"editorSuggestWidget.focusHighlightForeground": "#2aaaff",
		//"editorSuggestWidget.foreground": "#cccccc",
		//"editorSuggestWidget.highlightForeground": "#2aaaff",
		//"editorSuggestWidget.selectedBackground": "#323232",
		//"editorSuggestWidget.selectedForeground": "#ffffff",
		//"editorSuggestWidget.selectedIconForeground": "#ffffff",
		//"editorSuggestWidgetStatus.foreground": "#cccccc80",
		//"editorUnicodeHighlight.background": "#bd9b0326",
		//"editorUnicodeHighlight.border": "#bd9b03",
		//"editorUnnecessaryCode.opacity": "#000000aa",
		//"editorWarning.foreground": "#cca700",
		//"editorWhitespace.foreground": "#e3e4e229",
		//"editorWidget.border": "#454545",
		//"editorWidget.foreground": "#cccccc",
		//"extensionBadge.remoteBackground": "#0078d4",
		//"extensionBadge.remoteForeground": "#ffffff",
		//"extensionButton.background": "#0078d4",
		//"extensionButton.foreground": "#ffffff",
		//"extensionButton.hoverBackground": "#0078d4e6",
		//"extensionButton.prominentBackground": "#0078d4",
		//"extensionButton.prominentForeground": "#ffffff",
		//"extensionButton.prominentHoverBackground": "#0078d4e6",
		//"extensionButton.separator": "#ffffff66",
		//"extensionIcon.preReleaseForeground": "#1d9271",
		//"extensionIcon.sponsorForeground": "#d758b3",
		//"extensionIcon.starForeground": "#ff8e00",
		//"extensionIcon.verifiedForeground": "#40a6ff",
		//"gitDecoration.addedResourceForeground": "#81b88b",
		//"gitDecoration.conflictingResourceForeground": "#e4676b",
		//"gitDecoration.deletedResourceForeground": "#c74e39",
		//"gitDecoration.ignoredResourceForeground": "#8c8c8c",
		//"gitDecoration.modifiedResourceForeground": "#e2c08d",
		//"gitDecoration.renamedResourceForeground": "#73c991",
		//"gitDecoration.stageDeletedResourceForeground": "#c74e39",
		//"gitDecoration.stageModifiedResourceForeground": "#e2c08d",
		//"gitDecoration.submoduleResourceForeground": "#8db9e2",
		//"gitDecoration.untrackedResourceForeground": "#73c991",
		//"inputOption.activeForeground": "#ffffff",
		//"inputOption.hoverBackground": "#5a5d5e80",
		//"inputValidation.errorBackground": "#5a1d1d",
		//"inputValidation.errorBorder": "#be1100",
		//"inputValidation.infoBackground": "#063b49",
		//"inputValidation.infoBorder": "#007acc",
		//"inputValidation.warningBackground": "#352a05",
		//"inputValidation.warningBorder": "#b89500",
		//"interactive.activeCodeBorder": "#3794ff",
		//"interactive.inactiveCodeBorder": "#37373d",
		//"interactive.requestBackground": "#ffffff08",
		//"interactive.requestBorder": "#ffffff1a",
		//"interactiveEditor.border": "#454545",
		//"interactiveEditor.regionHighlight": "#264f7840",
		//"interactiveEditor.shadow": "#0000005c",
		//"interactiveEditorDiff.inserted": "#23863627",
		//"interactiveEditorDiff.removed": "#da363327",
		//"interactiveEditorInput.background": "#2a2a2a",
		//"interactiveEditorInput.border": "#454545",
		//"interactiveEditorInput.focusBorder": "#0078d4",
		//"interactiveEditorInput.placeholderForeground": "#ffffff79",
		//"keybindingLabel.background": "#8080802b",
		//"keybindingLabel.border": "#33333399",
		//"keybindingLabel.bottomBorder": "#44444499",
		//"keybindingTable.headerBackground": "#cccccc0a",
		//"keybindingTable.rowsBackground": "#cccccc0a",
		//"list.deemphasizedForeground": "#8c8c8c",
		//"list.errorForeground": "#f88070",
		//"list.filterMatchBackground": "#ea5c0055",
		//"list.focusHighlightForeground": "#2aaaff",
		//"list.focusOutline": "#0078d4",
		//"list.highlightForeground": "#2aaaff",
		//"list.hoverBackground": "#2a2d2e",
		//"list.inactiveSelectionBackground": "#37373d",
		//"list.invalidItemForeground": "#b89500",
		//"list.warningForeground": "#cca700",
		//"listFilterWidget.background": "#1f1f1f",
		//"listFilterWidget.noMatchesOutline": "#be1100",
		//"listFilterWidget.outline": "#00000000",
		//"listFilterWidget.shadow": "#0000005c",
		//"menu.selectionBackground": "#323232",
		//"menu.selectionForeground": "#ffffff",
		//"menubar.selectionBackground": "#5a5d5e50",
		//"menubar.selectionForeground": "#cccccc",
		//"merge.commonContentBackground": "#60606029",
		//"merge.commonHeaderBackground": "#60606066",
		//"merge.currentContentBackground": "#40c8ae33",
		//"merge.currentHeaderBackground": "#40c8ae80",
		//"merge.incomingContentBackground": "#40a6ff33",
		//"merge.incomingHeaderBackground": "#40a6ff80",
		//"mergeEditor.change.background": "#9bb95533",
		//"mergeEditor.change.word.background": "#9ccc2c33",
		//"mergeEditor.changeBase.background": "#4b1818",
		//"mergeEditor.changeBase.word.background": "#6f1313",
		//"mergeEditor.conflict.handled.minimapOverViewRuler": "#adaca8ee",
		//"mergeEditor.conflict.handledFocused.border": "#c1c1c1cc",
		//"mergeEditor.conflict.handledUnfocused.border": "#86868649",
		//"mergeEditor.conflict.input1.background": "#40c8ae33",
		//"mergeEditor.conflict.input2.background": "#40a6ff33",
		//"mergeEditor.conflict.unhandled.minimapOverViewRuler": "#fcba03",
		//"mergeEditor.conflict.unhandledFocused.border": "#ffa600",
		//"mergeEditor.conflict.unhandledUnfocused.border": "#ffa6007a",
		//"mergeEditor.conflictingLines.background": "#ffea0047",
		//"minimap.errorHighlight": "#ff1212b3",
		//"minimap.findMatchHighlight": "#d18616",
		//"minimap.foregroundOpacity": "#000000",
		//"minimap.selectionHighlight": "#264f78",
		//"minimap.selectionOccurrenceHighlight": "#676767",
		//"minimap.warningHighlight": "#cca700",
		//"minimapGutter.addedBackground": "#2ea043",
		//"minimapGutter.deletedBackground": "#f85149",
		//"minimapGutter.modifiedBackground": "#0078d4",
		//"minimapSlider.activeBackground": "#6e768144",
		//"minimapSlider.background": "#6e76811a",
		//"minimapSlider.hoverBackground": "#6e768123",
		//"notebook.cellBorderColor": "#37373d",
		//"notebook.cellEditorBackground": "#181818",
		//"notebook.cellInsertionIndicator": "#0078d4",
		//"notebook.cellStatusBarItemHoverBackground": "#ffffff26",
		//"notebook.cellToolbarSeparator": "#80808059",
		//"notebook.editorBackground": "#1f1f1f",
		//"notebook.focusedCellBorder": "#0078d4",
		//"notebook.focusedEditorBorder": "#0078d4",
		//"notebook.inactiveFocusedCellBorder": "#37373d",
		//"notebook.selectedCellBackground": "#37373d",
		//"notebook.selectedCellBorder": "#37373d",
		//"notebook.symbolHighlightBackground": "#ffffff0b",
		//"notebookEditorOverviewRuler.runningCellForeground": "#89d185",
		//"notebookScrollbarSlider.activeBackground": "#6e768187",
		//"notebookScrollbarSlider.background": "#6e768133",
		//"notebookScrollbarSlider.hoverBackground": "#6e768145",
		//"notebookStatusErrorIcon.foreground": "#f85149",
		//"notebookStatusRunningIcon.foreground": "#cccccc",
		//"notebookStatusSuccessIcon.foreground": "#89d185",
		//"notificationCenter.border": "#ffffff15",
		//"notificationLink.foreground": "#40a6ff",
		//"notificationToast.border": "#ffffff15",
		//"notificationsErrorIcon.foreground": "#f14c4c",
		//"notificationsInfoIcon.foreground": "#3794ff",
		//"notificationsWarningIcon.foreground": "#cca700",
		//"panel.dropBorder": "#cccccc",
		//"panelSection.border": "#ffffff15",
		//"panelSection.dropBackground": "#53595d80",
		//"panelSectionHeader.background": "#80808033",
		//"peekView.border": "#3794ff",
		//"peekViewEditorGutter.background": "#1f1f1f",
		//"peekViewEditorStickyScroll.background": "#1f1f1f",
		//"peekViewResult.fileForeground": "#ffffff",
		//"peekViewResult.lineForeground": "#bbbbbb",
		//"peekViewResult.selectionBackground": "#3399ff33",
		//"peekViewResult.selectionForeground": "#ffffff",
		//"peekViewTitle.background": "#252526",
		//"peekViewTitleDescription.foreground": "#ccccccb3",
		//"peekViewTitleLabel.foreground": "#ffffff",
		//"problemsErrorIcon.foreground": "#f14c4c",
		//"problemsInfoIcon.foreground": "#3794ff",
		//"problemsWarningIcon.foreground": "#cca700",
		//"profileBadge.background": "#4d4d4d",
		//"profileBadge.foreground": "#ffffff",
		//"quickInputList.focusBackground": "#323232",
		//"quickInputList.focusForeground": "#ffffff",
		//"quickInputList.focusIconForeground": "#ffffff",
		//"quickInputTitle.background": "#ffffff1b",
		//"sash.hoverBorder": "#0078d4",
		//"scm.providerBorder": "#454545",
		//"search.resultsInfoForeground": "#cccccca6",
		//"searchEditor.findMatchBackground": "#ea5c0038",
		//"searchEditor.textInputBorder": "#ffffff1f",
		//"settings.checkboxBackground": "#313131",
		//"settings.checkboxBorder": "#ffffff1f",
		//"settings.checkboxForeground": "#cccccc",
		//"settings.dropdownForeground": "#cccccc",
		//"settings.dropdownListBorder": "#454545",
		//"settings.focusedRowBackground": "#2a2d2e99",
		//"settings.focusedRowBorder": "#0078d4",
		//"settings.headerBorder": "#ffffff15",
		//"settings.numberInputBackground": "#2a2a2a",
		//"settings.numberInputBorder": "#ffffff1f",
		//"settings.numberInputForeground": "#cccccc",
		//"settings.rowHoverBackground": "#2a2d2e4d",
		//"settings.sashBorder": "#ffffff15",
		//"settings.settingsHeaderHoverForeground": "#ffffffb3",
		//"settings.textInputBackground": "#2a2a2a",
		//"settings.textInputBorder": "#ffffff1f",
		//"settings.textInputForeground": "#cccccc",
		//"sideBar.dropBackground": "#53595d80",
		//"sideBySideEditor.horizontalBorder": "#ffffff17",
		//"sideBySideEditor.verticalBorder": "#ffffff17",
		//"statusBar.debuggingBorder": "#ffffff15",
		//"statusBar.focusBorder": "#cccccc",
		//"statusBar.noFolderBorder": "#ffffff15",
		//"statusBar.noFolderForeground": "#cccccc",
		//"statusBarItem.activeBackground": "#ffffff2e",
		//"statusBarItem.compactHoverBackground": "#ffffff33",
		//"statusBarItem.errorBackground": "#b91007",
		//"statusBarItem.errorForeground": "#ffffff",
		//"statusBarItem.hoverBackground": "#ffffff1f",
		//"statusBarItem.prominentForeground": "#cccccc",
		//"statusBarItem.prominentHoverBackground": "#0000004d",
		//"statusBarItem.warningBackground": "#7a6400",
		//"statusBarItem.warningForeground": "#ffffff",
		//"symbolIcon.arrayForeground": "#cccccc",
		//"symbolIcon.booleanForeground": "#cccccc",
		//"symbolIcon.classForeground": "#ee9d28",
		//"symbolIcon.colorForeground": "#cccccc",
		//"symbolIcon.constantForeground": "#cccccc",
		//"symbolIcon.constructorForeground": "#b180d7",
		//"symbolIcon.enumeratorForeground": "#ee9d28",
		//"symbolIcon.enumeratorMemberForeground": "#75beff",
		//"symbolIcon.eventForeground": "#ee9d28",
		//"symbolIcon.fieldForeground": "#75beff",
		//"symbolIcon.fileForeground": "#cccccc",
		//"symbolIcon.folderForeground": "#cccccc",
		//"symbolIcon.functionForeground": "#b180d7",
		//"symbolIcon.interfaceForeground": "#75beff",
		//"symbolIcon.keyForeground": "#cccccc",
		//"symbolIcon.keywordForeground": "#cccccc",
		//"symbolIcon.methodForeground": "#b180d7",
		//"symbolIcon.moduleForeground": "#cccccc",
		//"symbolIcon.namespaceForeground": "#cccccc",
		//"symbolIcon.nullForeground": "#cccccc",
		//"symbolIcon.numberForeground": "#cccccc",
		//"symbolIcon.objectForeground": "#cccccc",
		//"symbolIcon.operatorForeground": "#cccccc",
		//"symbolIcon.packageForeground": "#cccccc",
		//"symbolIcon.propertyForeground": "#cccccc",
		//"symbolIcon.referenceForeground": "#cccccc",
		//"symbolIcon.snippetForeground": "#cccccc",
		//"symbolIcon.stringForeground": "#cccccc",
		//"symbolIcon.structForeground": "#cccccc",
		//"symbolIcon.textForeground": "#cccccc",
		//"symbolIcon.typeParameterForeground": "#cccccc",
		//"symbolIcon.unitForeground": "#cccccc",
		//"symbolIcon.variableForeground": "#75beff",
		//"tab.activeModifiedBorder": "#3399cc",
		//"tab.inactiveModifiedBorder": "#3399cc80",
		//"tab.unfocusedActiveBackground": "#1f1f1f",
		//"tab.unfocusedActiveForeground": "#ffffff80",
		//"tab.unfocusedActiveModifiedBorder": "#3399cc80",
		//"tab.unfocusedInactiveBackground": "#181818",
		//"tab.unfocusedInactiveForeground": "#ffffff40",
		//"tab.unfocusedInactiveModifiedBorder": "#3399cc40",
		//"terminal.ansiBlack": "#000000",
		//"terminal.ansiBlue": "#2472c8",
		//"terminal.ansiBrightBlack": "#666666",
		//"terminal.ansiBrightBlue": "#3b8eea",
		//"terminal.ansiBrightCyan": "#29b8db",
		//"terminal.ansiBrightGreen": "#23d18b",
		//"terminal.ansiBrightMagenta": "#d670d6",
		//"terminal.ansiBrightRed": "#f14c4c",
		//"terminal.ansiBrightWhite": "#e5e5e5",
		//"terminal.ansiBrightYellow": "#f5f543",
		//"terminal.ansiCyan": "#11a8cd",
		//"terminal.ansiGreen": "#0dbc79",
		//"terminal.ansiMagenta": "#bc3fbc",
		//"terminal.ansiRed": "#cd3131",
		//"terminal.ansiWhite": "#e5e5e5",
		//"terminal.ansiYellow": "#e5e510",
		//"terminal.border": "#ffffff15",
		//"terminal.dropBackground": "#53595d80",
		//"terminal.findMatchBackground": "#9e6a03",
		//"terminal.findMatchHighlightBackground": "#ea5c0055",
		//"terminal.hoverHighlightBackground": "#264f7820",
		//"terminal.selectionBackground": "#264f78",
		//"terminalCommandDecoration.defaultBackground": "#ffffff40",
		//"terminalCommandDecoration.errorBackground": "#f14c4c",
		//"terminalCommandDecoration.successBackground": "#1b81a8",
		//"terminalOverviewRuler.cursorForeground": "#a0a0a0cc",
		//"terminalOverviewRuler.findMatchForeground": "#d186167e",
		//"testing.iconErrored": "#f14c4c",
		//"testing.iconFailed": "#f14c4c",
		//"testing.iconPassed": "#73c991",
		//"testing.iconQueued": "#cca700",
		//"testing.iconSkipped": "#848484",
		//"testing.iconUnset": "#848484",
		//"testing.message.error.decorationForeground": "#f14c4c",
		//"testing.message.error.lineBackground": "#ff000033",
		//"testing.message.info.decorationForeground": "#cccccc80",
		//"testing.peekBorder": "#f14c4c",
		//"testing.peekHeaderBackground": "#f14c4c1a",
		//"testing.runAction": "#73c991",
		//"textPreformat.foreground": "#d7ba7d",
		//"toolbar.activeBackground": "#63666750",
		//"toolbar.hoverBackground": "#5a5d5e50",
		//"tree.inactiveIndentGuidesStroke": "#58585866",
		//"tree.indentGuidesStroke": "#585858",
		//"tree.tableColumnsBorder": "#cccccc20",
		//"tree.tableOddRowsBackground": "#cccccc0a",
		//"walkThrough.embeddedEditorBackground": "#00000066",
		//"walkthrough.stepTitle.foreground": "#ffffff",
		//"welcomePage.progress.background": "#2a2a2a",
		//"welcomePage.tileBorder": "#ffffff1a",
		//"welcomePage.tileHoverBackground": "#252525",
		//"widget.shadow": "#0000005c",
		//"activityBar.activeBackground": null,
		//"activityBar.activeFocusBorder": null,
		//"contrastActiveBorder": null,
		//"contrastBorder": null,
		//"debugToolBar.border": null,
		//"diffEditor.border": null,
		//"diffEditor.insertedTextBorder": null,
		//"diffEditor.removedTextBorder": null,
		//"diffEditorGutter.insertedLineBackground": null,
		//"diffEditorGutter.removedLineBackground": null,
		//"diffEditorOverview.insertedForeground": null,
		//"diffEditorOverview.removedForeground": null,
		//"editor.findMatchBorder": null,
		//"editor.findMatchHighlightBorder": null,
		//"editor.findRangeHighlightBorder": null,
		//"editor.lineHighlightBackground": null,
		//"editor.rangeHighlightBorder": null,
		//"editor.selectionForeground": null,
		//"editor.selectionHighlightBorder": null,
		//"editor.snippetFinalTabstopHighlightBackground": null,
		//"editor.snippetTabstopHighlightBorder": null,
		//"editor.symbolHighlightBorder": null,
		//"editor.wordHighlightBorder": null,
		//"editor.wordHighlightStrongBorder": null,
		//"editor.wordHighlightTextBorder": null,
		//"editorCursor.background": null,
		//"editorError.background": null,
		//"editorError.border": null,
		//"editorGhostText.background": null,
		//"editorGhostText.border": null,
		//"editorGroup.dropIntoPromptBorder": null,
		//"editorGroup.emptyBackground": null,
		//"editorGroup.focusedEmptyBorder": null,
		//"editorGroupHeader.border": null,
		//"editorHint.border": null,
		//"editorInfo.background": null,
		//"editorInfo.border": null,
		//"editorLineNumber.dimmedForeground": null,
		//"editorOverviewRuler.background": null,
		//"editorUnnecessaryCode.border": null,
		//"editorWarning.background": null,
		//"editorWarning.border": null,
		//"editorWidget.resizeBorder": null,
		//"inputValidation.errorForeground": null,
		//"inputValidation.infoForeground": null,
		//"inputValidation.warningForeground": null,
		//"list.filterMatchBorder": null,
		//"list.focusAndSelectionOutline": null,
		//"list.focusBackground": null,
		//"list.focusForeground": null,
		//"list.hoverForeground": null,
		//"list.inactiveFocusBackground": null,
		//"list.inactiveFocusOutline": null,
		//"list.inactiveSelectionForeground": null,
		//"list.inactiveSelectionIconForeground": null,
		//"menu.selectionBorder": null,
		//"menubar.selectionBorder": null,
		//"merge.border": null,
		//"minimap.background": null,
		//"notebook.cellHoverBackground": null,
		//"notebook.focusedCellBackground": null,
		//"notebook.inactiveSelectedCellBorder": null,
		//"notebook.outputContainerBackgroundColor": null,
		//"notebook.outputContainerBorderColor": null,
		//"panelSectionHeader.border": null,
		//"panelSectionHeader.foreground": null,
		//"peekViewEditor.matchHighlightBorder": null,
		//"quickInput.list.focusBackground": null,
		//"searchEditor.findMatchBorder": null,
		//"selection.background": null,
		//"tab.hoverBorder": null,
		//"tab.hoverForeground": null,
		//"tab.unfocusedHoverBorder": null,
		//"tab.unfocusedHoverForeground": null,
		//"terminal.background": null,
		//"terminal.findMatchBorder": null,
		//"terminal.findMatchHighlightBorder": null,
		//"terminal.selectionForeground": null,
		//"terminalCursor.background": null,
		//"terminalCursor.foreground": null,
		//"testing.message.info.lineBackground": null,
		//"toolbar.hoverOutline": null,
		//"welcomePage.background": null,
		//"window.activeBorder": null,
		//"window.inactiveBorder": null
	},
	"tokenColors": [
		{
			"scope": [
				"meta.embedded",
				"source.groovy.embedded",
				"string meta.image.inline.markdown"
			],
			"settings": {
				"foreground": "#D4D4D4"
			}
		},
		{
			"scope": "emphasis",
			"settings": {
				"fontStyle": "italic"
			}
		},
		{
			"scope": "strong",
			"settings": {
				"fontStyle": "bold"
			}
		},
		{
			"scope": "header",
			"settings": {
				"foreground": "#000080"
			}
		},
		{
			"scope": "comment",
			"settings": {
				"foreground": "#6A9955"
			}
		},
		{
			"scope": "constant.language",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": [
				"constant.numeric",
				"variable.other.enummember",
				"keyword.operator.plus.exponent",
				"keyword.operator.minus.exponent"
			],
			"settings": {
				"foreground": "#B5CEA8"
			}
		},
		{
			"scope": "constant.regexp",
			"settings": {
				"foreground": "#646695"
			}
		},
		{
			"scope": "entity.name.tag",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "entity.name.tag.css",
			"settings": {
				"foreground": "#D7BA7D"
			}
		},
		{
			"scope": "entity.other.attribute-name",
			"settings": {
				"foreground": "#9CDCFE"
			}
		},
		{
			"scope": [
				"entity.other.attribute-name.class.css",
				"entity.other.attribute-name.class.mixin.css",
				"entity.other.attribute-name.id.css",
				"entity.other.attribute-name.parent-selector.css",
				"entity.other.attribute-name.pseudo-class.css",
				"entity.other.attribute-name.pseudo-element.css",
				"source.css.less entity.other.attribute-name.id",
				"entity.other.attribute-name.scss"
			],
			"settings": {
				"foreground": "#D7BA7D"
			}
		},
		{
			"scope": "invalid",
			"settings": {
				"foreground": "#F44747"
			}
		},
		{
			"scope": "markup.underline",
			"settings": {
				"fontStyle": "underline"
			}
		},
		{
			"scope": "markup.bold",
			"settings": {
				"foreground": "#569CD6",
				"fontStyle": "bold"
			}
		},
		{
			"scope": "markup.heading",
			"settings": {
				"foreground": "#569CD6",
				"fontStyle": "bold"
			}
		},
		{
			"scope": "markup.italic",
			"settings": {
				"fontStyle": "italic"
			}
		},
		{
			"scope": "markup.strikethrough",
			"settings": {
				"fontStyle": "strikethrough"
			}
		},
		{
			"scope": "markup.inserted",
			"settings": {
				"foreground": "#B5CEA8"
			}
		},
		{
			"scope": "markup.deleted",
			"settings": {
				"foreground": "#CE9178"
			}
		},
		{
			"scope": "markup.changed",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "punctuation.definition.quote.begin.markdown",
			"settings": {
				"foreground": "#6A9955"
			}
		},
		{
			"scope": "punctuation.definition.list.begin.markdown",
			"settings": {
				"foreground": "#6796E6"
			}
		},
		{
			"scope": "markup.inline.raw",
			"settings": {
				"foreground": "#CE9178"
			}
		},
		{
			"scope": "punctuation.definition.tag",
			"settings": {
				"foreground": "#808080"
			}
		},
		{
			"scope": [
				"meta.preprocessor",
				"entity.name.function.preprocessor"
			],
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "meta.preprocessor.string",
			"settings": {
				"foreground": "#CE9178"
			}
		},
		{
			"scope": "meta.preprocessor.numeric",
			"settings": {
				"foreground": "#B5CEA8"
			}
		},
		{
			"scope": "meta.structure.dictionary.key.python",
			"settings": {
				"foreground": "#9CDCFE"
			}
		},
		{
			"scope": "meta.diff.header",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "storage",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "storage.type",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": [
				"storage.modifier",
				"keyword.operator.noexcept"
			],
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": [
				"string",
				"meta.embedded.assembly"
			],
			"settings": {
				"foreground": "#CE9178"
			}
		},
		{
			"scope": "string.tag",
			"settings": {
				"foreground": "#CE9178"
			}
		},
		{
			"scope": "string.value",
			"settings": {
				"foreground": "#CE9178"
			}
		},
		{
			"scope": "string.regexp",
			"settings": {
				"foreground": "#D16969"
			}
		},
		{
			"scope": [
				"punctuation.definition.template-expression.begin",
				"punctuation.definition.template-expression.end",
				"punctuation.section.embedded"
			],
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": [
				"meta.template.expression"
			],
			"settings": {
				"foreground": "#D4D4D4"
			}
		},
		{
			"scope": [
				"support.type.vendored.property-name",
				"support.type.property-name",
				"variable.css",
				"variable.scss",
				"variable.other.less",
				"source.coffee.embedded"
			],
			"settings": {
				"foreground": "#9CDCFE"
			}
		},
		{
			"scope": "keyword",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "keyword.control",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "keyword.operator",
			"settings": {
				"foreground": "#D4D4D4"
			}
		},
		{
			"scope": [
				"keyword.operator.new",
				"keyword.operator.expression",
				"keyword.operator.cast",
				"keyword.operator.sizeof",
				"keyword.operator.alignof",
				"keyword.operator.typeid",
				"keyword.operator.alignas",
				"keyword.operator.instanceof",
				"keyword.operator.logical.python",
				"keyword.operator.wordlike"
			],
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "keyword.other.unit",
			"settings": {
				"foreground": "#B5CEA8"
			}
		},
		{
			"scope": [
				"punctuation.section.embedded.begin.php",
				"punctuation.section.embedded.end.php"
			],
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "support.function.git-rebase",
			"settings": {
				"foreground": "#9CDCFE"
			}
		},
		{
			"scope": "constant.sha.git-rebase",
			"settings": {
				"foreground": "#B5CEA8"
			}
		},
		{
			"scope": [
				"storage.modifier.import.java",
				"variable.language.wildcard.java",
				"storage.modifier.package.java"
			],
			"settings": {
				"foreground": "#D4D4D4"
			}
		},
		{
			"scope": "variable.language",
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": [
				"entity.name.function",
				"support.function",
				"support.constant.handlebars",
				"source.powershell variable.other.member",
				"entity.name.operator.custom-literal"
			],
			"settings": {
				"foreground": "#DCDCAA"
			}
		},
		{
			"scope": [
				"support.class",
				"support.type",
				"entity.name.type",
				"entity.name.namespace",
				"entity.other.attribute",
				"entity.name.scope-resolution",
				"entity.name.class",
				"storage.type.numeric.go",
				"storage.type.byte.go",
				"storage.type.boolean.go",
				"storage.type.string.go",
				"storage.type.uintptr.go",
				"storage.type.error.go",
				"storage.type.rune.go",
				"storage.type.cs",
				"storage.type.generic.cs",
				"storage.type.modifier.cs",
				"storage.type.variable.cs",
				"storage.type.annotation.java",
				"storage.type.generic.java",
				"storage.type.java",
				"storage.type.object.array.java",
				"storage.type.primitive.array.java",
				"storage.type.primitive.java",
				"storage.type.token.java",
				"storage.type.groovy",
				"storage.type.annotation.groovy",
				"storage.type.parameters.groovy",
				"storage.type.generic.groovy",
				"storage.type.object.array.groovy",
				"storage.type.primitive.array.groovy",
				"storage.type.primitive.groovy"
			],
			"settings": {
				"foreground": "#4EC9B0"
			}
		},
		{
			"scope": [
				"meta.type.cast.expr",
				"meta.type.new.expr",
				"support.constant.math",
				"support.constant.dom",
				"support.constant.json",
				"entity.other.inherited-class"
			],
			"settings": {
				"foreground": "#4EC9B0"
			}
		},
		{
			"scope": [
				"keyword.control",
				"source.cpp keyword.operator.new",
				"keyword.operator.delete",
				"keyword.other.using",
				"keyword.other.operator",
				"entity.name.operator"
			],
			"settings": {
				"foreground": "#C586C0"
			}
		},
		{
			"scope": [
				"variable",
				"meta.definition.variable.name",
				"support.variable",
				"entity.name.variable",
				"constant.other.placeholder"
			],
			"settings": {
				"foreground": "#9CDCFE"
			}
		},
		{
			"scope": [
				"variable.other.constant",
				"variable.other.enummember"
			],
			"settings": {
				"foreground": "#4FC1FF"
			}
		},
		{
			"scope": [
				"meta.object-literal.key"
			],
			"settings": {
				"foreground": "#9CDCFE"
			}
		},
		{
			"scope": [
				"support.constant.property-value",
				"support.constant.font-name",
				"support.constant.media-type",
				"support.constant.media",
				"constant.other.color.rgb-value",
				"constant.other.rgb-value",
				"support.constant.color"
			],
			"settings": {
				"foreground": "#CE9178"
			}
		},
		{
			"scope": [
				"punctuation.definition.group.regexp",
				"punctuation.definition.group.assertion.regexp",
				"punctuation.definition.character-class.regexp",
				"punctuation.character.set.begin.regexp",
				"punctuation.character.set.end.regexp",
				"keyword.operator.negation.regexp",
				"support.other.parenthesis.regexp"
			],
			"settings": {
				"foreground": "#CE9178"
			}
		},
		{
			"scope": [
				"constant.character.character-class.regexp",
				"constant.other.character-class.set.regexp",
				"constant.other.character-class.regexp",
				"constant.character.set.regexp"
			],
			"settings": {
				"foreground": "#D16969"
			}
		},
		{
			"scope": [
				"keyword.operator.or.regexp",
				"keyword.control.anchor.regexp"
			],
			"settings": {
				"foreground": "#DCDCAA"
			}
		},
		{
			"scope": "keyword.operator.quantifier.regexp",
			"settings": {
				"foreground": "#D7BA7D"
			}
		},
		{
			"scope": [
				"constant.character",
				"constant.other.option"
			],
			"settings": {
				"foreground": "#569CD6"
			}
		},
		{
			"scope": "constant.character.escape",
			"settings": {
				"foreground": "#D7BA7D"
			}
		},
		{
			"scope": "entity.name.label",
			"settings": {
				"foreground": "#C8C8C8"
			}
		},
		{
			"scope": "token.info-token",
			"settings": {
				"foreground": "#6796E6"
			}
		},
		{
			"scope": "token.warn-token",
			"settings": {
				"foreground": "#CD9731"
			}
		},
		{
			"scope": "token.error-token",
			"settings": {
				"foreground": "#F44747"
			}
		},
		{
			"scope": "token.debug-token",
			"settings": {
				"foreground": "#B267E6"
			}
		}
	]
}
```

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index 44409c403ab..0c06a6fddd6 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useContext } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import {
   accessErrorPage,
@@ -18,6 +18,7 @@ import { Toaster } from 'react-hot-toast';
 import GlobalCSS from 'components/globalCss';
 import * as S from 'components/App.styled';
 import ClusterConfigForm from 'widgets/ClusterConfigForm';
+import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
 
 import ConfirmationModal from './common/ConfirmationModal/ConfirmationModal';
 import { ConfirmContextProvider } from './contexts/ConfirmContext';
@@ -42,7 +43,7 @@ const queryClient = new QueryClient({
   },
 });
 const App: React.FC = () => {
-  const [isDarkMode, setDarkMode] = React.useState<boolean>(false);
+  const { isDarkMode } = useContext(ThemeModeContext);
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -53,7 +54,7 @@ const App: React.FC = () => {
               <ConfirmContextProvider>
                 <GlobalCSS />
                 <S.Layout>
-                  <PageContainer setDarkMode={setDarkMode}>
+                  <PageContainer>
                     <Routes>
                       {['/', '/ui', '/ui/clusters'].map((path) => (
                         <Route
diff --git a/kafka-ui-react-app/src/components/NavBar/NavBar.tsx b/kafka-ui-react-app/src/components/NavBar/NavBar.tsx
index 2e363501288..4744eb0bffe 100644
--- a/kafka-ui-react-app/src/components/NavBar/NavBar.tsx
+++ b/kafka-ui-react-app/src/components/NavBar/NavBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Select from 'components/common/Select/Select';
 import Logo from 'components/common/Logo/Logo';
 import Version from 'components/Version/Version';
@@ -7,16 +7,16 @@ import DiscordIcon from 'components/common/Icons/DiscordIcon';
 import AutoIcon from 'components/common/Icons/AutoIcon';
 import SunIcon from 'components/common/Icons/SunIcon';
 import MoonIcon from 'components/common/Icons/MoonIcon';
+import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
 
 import UserInfo from './UserInfo/UserInfo';
 import * as S from './NavBar.styled';
 
 interface Props {
   onBurgerClick: () => void;
-  setDarkMode: (value: boolean) => void;
 }
 
-type ThemeDropDownValue = 'auto_theme' | 'light_theme' | 'dark_theme';
+export type ThemeDropDownValue = 'auto_theme' | 'light_theme' | 'dark_theme';
 
 const options = [
   {
@@ -48,44 +48,8 @@ const options = [
   },
 ];
 
-const NavBar: React.FC<Props> = ({ onBurgerClick, setDarkMode }) => {
-  const matchDark = window.matchMedia('(prefers-color-scheme: dark)');
-  const [themeMode, setThemeMode] = React.useState<ThemeDropDownValue>();
-
-  React.useLayoutEffect(() => {
-    const mode = localStorage.getItem('mode');
-    if (mode) {
-      setThemeMode(mode as ThemeDropDownValue);
-      if (mode === 'auto_theme') {
-        setDarkMode(matchDark.matches);
-      } else if (mode === 'light_theme') {
-        setDarkMode(false);
-      } else if (mode === 'dark_theme') {
-        setDarkMode(true);
-      }
-    } else {
-      setThemeMode('auto_theme');
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (themeMode === 'auto_theme') {
-      setDarkMode(matchDark.matches);
-      matchDark.addListener((e) => {
-        setDarkMode(e.matches);
-      });
-    }
-  }, [matchDark, themeMode]);
-
-  const onChangeThemeMode = (value: string | number) => {
-    setThemeMode(value as ThemeDropDownValue);
-    localStorage.setItem('mode', value as string);
-    if (value === 'light_theme') {
-      setDarkMode(false);
-    } else if (value === 'dark_theme') {
-      setDarkMode(true);
-    }
-  };
+const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
+  const { themeMode, setThemeMode } = useContext(ThemeModeContext);
 
   return (
     <S.Navbar role="navigation" aria-label="Page Header">
@@ -117,7 +81,7 @@ const NavBar: React.FC<Props> = ({ onBurgerClick, setDarkMode }) => {
         <Select
           options={options}
           value={themeMode}
-          onChange={onChangeThemeMode}
+          onChange={setThemeMode}
           isThemeMode
         />
         <S.SocialLink
diff --git a/kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx b/kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx
index a5697e89abd..93fe4dabe52 100644
--- a/kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx
+++ b/kafka-ui-react-app/src/components/PageContainer/PageContainer.tsx
@@ -5,9 +5,7 @@ import * as S from 'components/PageContainer/PageContainer.styled';
 import Nav from 'components/Nav/Nav';
 import useBoolean from 'lib/hooks/useBoolean';
 
-const PageContainer: React.FC<
-  PropsWithChildren<{ setDarkMode: (value: boolean) => void }>
-> = ({ children, setDarkMode }) => {
+const PageContainer: React.FC<PropsWithChildren<unknown>> = ({ children }) => {
   const {
     value: isSidebarVisible,
     toggle,
@@ -21,7 +19,7 @@ const PageContainer: React.FC<
 
   return (
     <>
-      <NavBar onBurgerClick={toggle} setDarkMode={setDarkMode} />
+      <NavBar onBurgerClick={toggle} />
       <S.Container>
         <S.Sidebar aria-label="Sidebar" $visible={isSidebarVisible}>
           <Nav />
diff --git a/kafka-ui-react-app/src/components/common/SQLEditor/SQLEditor.tsx b/kafka-ui-react-app/src/components/common/SQLEditor/SQLEditor.tsx
index a12170151e7..14433f06edd 100644
--- a/kafka-ui-react-app/src/components/common/SQLEditor/SQLEditor.tsx
+++ b/kafka-ui-react-app/src/components/common/SQLEditor/SQLEditor.tsx
@@ -3,7 +3,9 @@ import AceEditor, { IAceEditorProps } from 'react-ace';
 import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/src-noconflict/mode-sql';
 import 'ace-builds/src-noconflict/theme-textmate';
-import React from 'react';
+import 'ace-builds/src-noconflict/theme-dracula';
+import React, { useContext } from 'react';
+import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
 
 interface SQLEditorProps extends IAceEditorProps {
   isFixedHeight?: boolean;
@@ -12,11 +14,13 @@ interface SQLEditorProps extends IAceEditorProps {
 const SQLEditor = React.forwardRef<AceEditor | null, SQLEditorProps>(
   (props, ref) => {
     const { isFixedHeight, ...rest } = props;
+    const { isDarkMode } = useContext(ThemeModeContext);
+
     return (
       <AceEditor
         ref={ref}
         mode="sql"
-        theme="textmate"
+        theme={isDarkMode ? 'dracula' : 'textmate'}
         tabSize={2}
         width="100%"
         height={
diff --git a/kafka-ui-react-app/src/components/contexts/ThemeModeContext.tsx b/kafka-ui-react-app/src/components/contexts/ThemeModeContext.tsx
new file mode 100644
index 00000000000..5011dfe0813
--- /dev/null
+++ b/kafka-ui-react-app/src/components/contexts/ThemeModeContext.tsx
@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import type { ThemeDropDownValue } from 'components/NavBar/NavBar';
+
+interface ThemeModeContextProps {
+  isDarkMode: boolean;
+  themeMode: ThemeDropDownValue;
+  setThemeMode: (value: string | number) => void;
+}
+
+export const ThemeModeContext = React.createContext<ThemeModeContextProps>({
+  isDarkMode: false,
+  themeMode: 'auto_theme',
+  setThemeMode: () => {},
+});
+
+export const ThemeModeProvider: FC<PropsWithChildren<unknown>> = ({
+  children,
+}) => {
+  const matchDark = window.matchMedia('(prefers-color-scheme: dark)');
+  const [themeMode, setThemeModeState] =
+    React.useState<ThemeDropDownValue>('auto_theme');
+
+  React.useLayoutEffect(() => {
+    const mode = localStorage.getItem('mode');
+    setThemeModeState((mode as ThemeDropDownValue) ?? 'auto_theme');
+  }, [setThemeModeState]);
+
+  const isDarkMode = React.useMemo(() => {
+    if (themeMode === 'auto_theme') {
+      return matchDark.matches;
+    }
+    return themeMode === 'dark_theme';
+  }, [themeMode]);
+
+  const setThemeMode = React.useCallback(
+    (value: string | number) => {
+      setThemeModeState(value as ThemeDropDownValue);
+      localStorage.setItem('mode', value as string);
+    },
+    [setThemeModeState]
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      isDarkMode,
+      themeMode,
+      setThemeMode,
+    }),
+    [isDarkMode, themeMode, setThemeMode]
+  );
+
+  return (
+    <ThemeModeContext.Provider value={contextValue}>
+      {children}
+    </ThemeModeContext.Provider>
+  );
+};
diff --git a/kafka-ui-react-app/src/index.tsx b/kafka-ui-react-app/src/index.tsx
index d15e0528ca5..5ca52f75b8a 100644
--- a/kafka-ui-react-app/src/index.tsx
+++ b/kafka-ui-react-app/src/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import { ThemeModeProvider } from 'components/contexts/ThemeModeContext';
 import App from 'components/App';
 import { store } from 'redux/store';
 import 'lib/constants';
@@ -14,7 +15,9 @@ const root = createRoot(container);
 root.render(
   <Provider store={store}>
     <BrowserRouter basename={window.basePath || '/'}>
-      <App />
+      <ThemeModeProvider>
+        <App />
+      </ThemeModeProvider>
     </BrowserRouter>
   </Provider>
 );


Test patch: