Change:
I stumbled over and saw that there are still many colors hard-coded. Also while at the .css file, it's good practice to qualify all rules with (or ) now that the workbench can be embedded in the web.
Thanks for great feedback. There was some unused CSS, like the .annotation in the repl, so I removed that. I have also now qualifed all with . There is still one hard coded color for in repl, but I believe tackled this with his great PR. Though I might be mistaken?
I did, indeed, add colour contribution points to the REPL as part of but eventually you asked me to defer those until later, I do not remember the reason precisely... So the REPL is still not theme-able, unfortunately.
thanks for refreshing my memory. In case you would like to contribute that part of your PR we are open to accept it now :D From the I only see a need for color, not sure if there is more.
I am working on this now. I am taking it a step further, though, and adding theming to most of the REPL elements (errors, warnings, infos, source filenames etc.). Basically I want the whole REPL view to be fully customisable.
To verify, make sure you can customise the following colors in the debug console. You can use the setting :

Discussion:
import 'vs/css!./media/debug.contribution'; import 'vs/css!./media/debugHover'; import * as nls from 'vs/nls'; <ins> import { Color } from 'vs/base/common/color'; </ins> import { KeyMod, KeyCode } from 'vs/base/common/keyCodes'; import { SyncActionDescriptor, MenuRegistry, MenuId } from 'vs/platform/actions/common/actions'; import { Registry } from 'vs/platform/registry/common/platform';

import { DebugContentProvider } from 'vs/workbench/contrib/debug/common/debugContentProvider'; import { WelcomeView } from 'vs/workbench/contrib/debug/browser/welcomeView'; import { ThemeIcon, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; <del> import { registerColor, foreground, badgeBackground, badgeForeground, listDeemphasizedForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry'; </del> <ins> import { registerColor, foreground, badgeBackground, badgeForeground, listDeemphasizedForeground, contrastBorder, inputBorder, editorWarningForeground, errorForeground, editorInfoForeground } from 'vs/platform/theme/common/colorRegistry'; </ins> import { DebugViewPaneContainer, OpenDebugConsoleAction } from 'vs/workbench/contrib/debug/browser/debugViewlet'; import { registerEditorContribution } from 'vs/editor/browser/editorExtensions'; import { CallStackEditorContribution } from 'vs/workbench/contrib/debug/browser/callStackEditorContribution';

const debugViewStateLabelBackground = registerColor('debugView.stateLabelBackground', { dark: '#88888844', light: '#88888844', hc: '#88888844' }, 'Background color for a label in the CALL STACK view showing the current session's or thread's state.'); const debugViewValueChangedHighlight = registerColor('debugView.valueChangedHighlight', { dark: '#569CD6', light: '#569CD6', hc: '#569CD6' }, 'Color used to highlight value changes in the debug views (ie. in the Variables view).'); <ins> const debugConsoleInfoForeground = registerColor('debugConsole.infoForeground', { dark: editorInfoForeground, light: editorInfoForeground, hc: foreground }, 'Foreground color for info messages in debug REPL console.'); const debugConsoleWarningForeground = registerColor('debugConsole.warningForeground', { dark: editorWarningForeground, light: editorWarningForeground, hc: '#008000' }, 'Foreground color for warning messages in debug REPL console.'); const debugConsoleErrorForeground = registerColor('debugConsole.errorForeground', { dark: errorForeground, light: errorForeground, hc: errorForeground }, 'Foreground color for error messages in debug REPL console.'); const debugConsoleSourceForeground = registerColor('debugConsole.sourceForeground', { dark: foreground, light: foreground, hc: foreground }, 'Foreground color for source filenames in debug REPL console.'); const debugConsoleInputIconForeground = registerColor('debugConsoleInputIcon.foreground', { dark: foreground, light: foreground, hc: foreground }, 'Foreground color for debug console input marker icon.'); </ins> registerThemingParticipant((theme, collector) => { // All these colours provide a default value so they will never be undefined, hence the `!` const badgeBackgroundColor = theme.getColor(badgeBackground)!;

color: ${tokenNumberColor}; } `); <ins> const debugConsoleInputBorderColor = theme.getColor(inputBorder) || Color.fromHex('#80808060'); const debugConsoleInfoForegroundColor = theme.getColor(debugConsoleInfoForeground)!; const debugConsoleWarningForegroundColor = theme.getColor(debugConsoleWarningForeground)!; const debugConsoleErrorForegroundColor = theme.getColor(debugConsoleErrorForeground)!; const debugConsoleSourceForegroundColor = theme.getColor(debugConsoleSourceForeground)!; const debugConsoleInputIconForegroundColor = theme.getColor(debugConsoleInputIconForeground)!; collector.addRule(` .repl .repl-input-wrapper { border-top: 1px solid ${debugConsoleInputBorderColor}; } .monaco-workbench .repl .repl-tree .output .expression .value.info { color: ${debugConsoleInfoForegroundColor}; } .monaco-workbench .repl .repl-tree .output .expression .value.warn { color: ${debugConsoleWarningForegroundColor}; } .monaco-workbench .repl .repl-tree .output .expression .value.error { color: ${debugConsoleErrorForegroundColor}; } .monaco-workbench .repl .repl-tree .output .expression .source { color: ${debugConsoleSourceForegroundColor}; } .monaco-workbench .repl .repl-tree .monaco-tl-contents .arrow { color: ${debugConsoleInputIconForegroundColor}; } `); if (!theme.defines(debugConsoleInputIconForeground)) { collector.addRule(` .monaco-workbench.vs .repl .repl-tree .monaco-tl-contents .arrow { opacity: 0.25; } .monaco-workbench.vs-dark .repl .repl-tree .monaco-tl-contents .arrow { opacity: 0.4; } .monaco-workbench.hc-black .repl .repl-tree .monaco-tl-contents .arrow { opacity: 1; } `); } </ins> });

.monaco-workbench .repl .repl-tree .monaco-tl-contents .arrow { position:absolute; left: 2px; <del> opacity: 0.25; } .monaco-workbench.vs-dark .repl .repl-tree .monaco-tl-contents .arrow { opacity: 0.4; </del> } .monaco-workbench .repl .repl-tree .output.expression.value-and-source .source {

font-style: italic; } <del> .monaco-workbench.vs .repl .repl-tree .output.expression > .warn { color: #cd9731; } .monaco-workbench.vs-dark .repl .repl-tree .output.expression > .warn { color: #cd9731; } .monaco-workbench.hc-black .repl .repl-tree .output.expression > .warn { color: #008000; } </del> /* ANSI Codes */ .monaco-workbench .repl .repl-tree .output.expression .code-bold	{ font-weight: bold; } .monaco-workbench .repl .repl-tree .output.expression .code-italic	{ font-style: italic; }

import 'vs/css!./media/repl'; import { URI as uri } from 'vs/base/common/uri'; <del> import { Color } from 'vs/base/common/color'; </del> import { IAction, IActionViewItem, Action } from 'vs/base/common/actions'; import * as dom from 'vs/base/browser/dom'; import * as aria from 'vs/base/browser/ui/aria/aria';

import { IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage'; <del> import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; </del> <ins> import { IThemeService } from 'vs/platform/theme/common/themeService'; </ins> import { ICodeEditor, isCodeEditor } from 'vs/editor/browser/editorBrowser'; import { memoize } from 'vs/base/common/decorators'; import { dispose, IDisposable, Disposable } from 'vs/base/common/lifecycle';

import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry'; import { getSimpleEditorOptions, getSimpleCodeEditorWidgetOptions } from 'vs/workbench/contrib/codeEditor/browser/simpleEditorOptions'; import { IDecorationOptions } from 'vs/editor/common/editorCommon'; <del> import { transparent, editorForeground, inputBorder } from 'vs/platform/theme/common/colorRegistry'; </del> <ins> import { transparent, editorForeground } from 'vs/platform/theme/common/colorRegistry'; </ins> import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService'; import { FocusSessionActionViewItem } from 'vs/workbench/contrib/debug/browser/debugActionViewItems'; import { CompletionContext, CompletionList, CompletionProviderRegistry, CompletionItem, completionKindFromString, CompletionItemKind, CompletionItemInsertTextRule } from 'vs/editor/common/modes';

function getReplView(viewsService: IViewsService): Repl | undefined { return viewsService.getActiveViewWithId(REPL_VIEW_ID) as Repl ?? undefined; } <del> registerThemingParticipant((theme, collector) => { const inputBorderColor = theme.getColor(inputBorder) || Color.fromHex('#80808060'); collector.addRule(` .repl .repl-input-wrapper { border-top: 1px solid ${inputBorderColor}; } `); }); </del>