Terminal Monochrome

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

• activityBar.background#122738
• activityBar.border#0d3a58
• activityBar.dropBackground#0d3a58
• activityBar.foreground#fff
• activityBarBadge.background#ffc600
• activityBarBadge.foreground#000
• badge.background#ffc600
• badge.foreground#000
• button.background#0088ff
• button.foreground#fff
• button.hoverBackground#ff9d00
• contrastBorder#ffffff00
• debugExceptionWidget.background#193549
• debugExceptionWidget.border#aaa
• debugToolBar.background#193549
• descriptionForeground#aaa
• diffEditor.insertedTextBackground#3ad90033
• diffEditor.insertedTextBorder#3ad90055
• diffEditor.removedTextBackground#ee3a4333
• diffEditor.removedTextBorder#ee3a4355
• dropdown.background#193549
• dropdown.border#15232d
• dropdown.foreground#fff
• editor.background#282828
• editor.findMatchBackground#FF720066
• editor.findMatchHighlightBackground#CAD40F66
• editor.findRangeHighlightBackground#243E51
• editor.foreground#66FF66
• editor.hoverHighlightBackground#ffc60033
• editor.inactiveSelectionBackground#003b8b
• editor.lineHighlightBackground#1F4662
• editor.lineHighlightBorder#234E6D
• editor.rangeHighlightBackground#1F4662
• editor.selectionBackground#0050A4
• editor.selectionHighlightBackground#0050A480
• editor.wordHighlightBackground#ffffff21
• editor.wordHighlightStrongBackground#ffffff21
• editorBracketMatch.background#0d3a58
• editorBracketMatch.border#ffc60080
• editorCodeLens.foreground#aaa
• editorCursor.foreground#ffc600
• editorError.border#0d3a58
• editorError.foreground#A22929
• editorGroup.background#A22929
• editorGroup.border#122738
• editorGroup.dropBackground#12273899
• editorGroupHeader.noTabsBackground#193549
• editorGroupHeader.tabsBackground#193549
• editorGroupHeader.tabsBorder#15232d
• editorGutter.addedBackground#3C9F4A
• editorGutter.background#12273866
• editorGutter.deletedBackground#A22929
• editorGutter.modifiedBackground#26506D
• editorHoverWidget.background#15232d
• editorHoverWidget.border#0d3a58
• editorIndentGuide.background#3B5364
• editorLineNumber.foreground#aaa
• editorLink.activeForeground#aaa
• editorMarkerNavigation.background#3B536433
• editorMarkerNavigationError.background#A22929
• editorMarkerNavigationWarning.background#ffc600
• editorOverviewRuler.border#0d3a58
• editorOverviewRuler.commonContentForeground#ffc60055
• editorOverviewRuler.currentContentForeground#ee3a4355
• editorOverviewRuler.incomingContentForeground#3ad90055
• editorRuler.foreground#1F4662
• editorSuggestWidget.background#15232d
• editorSuggestWidget.border#15232d
• editorSuggestWidget.foreground#aaa
• editorSuggestWidget.highlightForeground#ffc600
• editorSuggestWidget.selectedBackground#193549
• editorWarning.border#ffffff00
• editorWarning.foreground#ffc600
• editorWhitespace.foreground#ffffff1a
• editorWidget.background#15232d
• editorWidget.border#0d3a58
• errorForeground#A22929
• extensionButton.prominentBackground#0088ff
• extensionButton.prominentForeground#fff
• extensionButton.prominentHoverBackground#ff9d00
• focusBorder#0d3a58
• foreground#aaa
• gitDecoration.conflictingResourceForeground#FF7200
• gitDecoration.deletedResourceForeground#ff628c
• gitDecoration.ignoredResourceForeground#747476
• gitDecoration.modifiedResourceForeground#ffc600
• gitDecoration.untrackedResourceForeground#3ad900
• input.background#193549
• input.border#0d3a58
• input.foreground#ffc600
• input.placeholderForeground#aaa
• inputOption.activeBorder#8dffff
• inputValidation.errorBackground#193549
• inputValidation.errorBorder#ffc600
• inputValidation.infoBackground#193549
• inputValidation.infoBorder#0D3A58
• inputValidation.warningBackground#193549
• inputValidation.warningBorder#ffc600
• list.activeSelectionBackground#193549
• list.activeSelectionForeground#aaa
• list.dropBackground#0d3a58
• list.focusBackground#0d3a58
• list.focusForeground#aaa
• list.highlightForeground#ffc600
• list.hoverBackground#193549
• list.hoverForeground#aaa
• list.inactiveSelectionBackground#0d3a58
• list.inactiveSelectionForeground#aaa
• menu.background#122738
• merge.border#ffffff00
• merge.commonContentBackground#c97d0c
• merge.commonHeaderBackground#c97d0c
• merge.currentContentBackground#2F7366
• merge.currentHeaderBackground#2F7366
• merge.incomingContentBackground#185294
• merge.incomingHeaderBackground#185294
• notification.background#ffc600
• notification.buttonBackground#0088ff
• notification.buttonForeground#fff
• notification.buttonHoverBackground#ff9d00
• notification.errorBackground#A22929
• notification.errorForeground#fff
• notification.foreground#000
• notification.infoBackground#0088ff
• notification.infoForeground#fff
• notification.warningBackground#ff9d00
• notification.warningForeground#000
• notificationCenter.border#ffc600
• notificationCenterHeader.background#122738
• notificationCenterHeader.foreground#aaa
• notificationLink.foreground#ffc600
• notifications.background#122738
• notifications.border#ffc600
• notifications.foreground#aaa
• notificationToast.border#ffc600
• panel.background#122738
• panel.border#ffc600
• panelTitle.activeBorder#ffc600
• panelTitle.activeForeground#ffc600
• panelTitle.inactiveForeground#aaa
• peekView.border#ffc600
• peekViewEditor.background#193549
• peekViewEditor.matchHighlightBackground#19354900
• peekViewEditorGutter.background#122738
• peekViewResult.background#15232d
• peekViewResult.fileForeground#aaa
• peekViewResult.lineForeground#fff
• peekViewResult.matchHighlightBackground#0d3a58
• peekViewResult.selectionBackground#0d3a58
• peekViewResult.selectionForeground#fff
• peekViewTitle.background#15232d
• peekViewTitleDescription.foreground#aaa
• peekViewTitleLabel.foreground#ffc600
• pickerGroup.border#0d3a58
• pickerGroup.foreground#aaa
• progressBar.background#ffc600
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#355166cc
• scrollbarSlider.background#1F466280
• scrollbarSlider.hoverBackground#406179cc
• selection.background#027dff
• sideBar.background#15232d
• sideBar.border#0d3a58
• sideBar.foreground#aaa
• sideBarSectionHeader.background#193549
• sideBarSectionHeader.foreground#aaaaaa
• sideBarTitle.foreground#aaaaaa
• statusBar.background#15232d
• statusBar.border#0d3a58
• statusBar.debuggingBackground#15232d
• statusBar.debuggingBorder#ffc600
• statusBar.debuggingForeground#ffc600
• statusBar.foreground#aaa
• statusBar.noFolderBackground#15232d
• statusBar.noFolderBorder#0d3a58
• statusBar.noFolderForeground#aaa
• statusBarItem.activeBackground#0088ff
• statusBarItem.hoverBackground#0d3a58
• statusBarItem.prominentBackground#15232d
• statusBarItem.prominentHoverBackground#0d3a58
• tab.activeBackground#122738
• tab.activeBorder#ffc600
• tab.activeForeground#fff
• tab.border#15232D
• tab.inactiveBackground#193549
• tab.inactiveForeground#aaa
• tab.unfocusedActiveForeground#aaa
• tab.unfocusedInactiveForeground#aaa
• terminal.ansiBlack#000000
• terminal.ansiBlue#0088ff
• terminal.ansiBrightBlack#0050A4
• terminal.ansiBrightBlue#0088ff
• terminal.ansiBrightCyan#80fcff
• terminal.ansiBrightGreen#3ad900
• terminal.ansiBrightMagenta#fb94ff
• terminal.ansiBrightRed#ff628c
• terminal.ansiBrightWhite#193549
• terminal.ansiBrightYellow#ffc600
• terminal.ansiCyan#80fcff
• terminal.ansiGreen#3ad900
• terminal.ansiMagenta#fb94ff
• terminal.ansiRed#ff628c
• terminal.ansiWhite#ffffff
• terminal.ansiYellow#ffc600
• terminal.background#122738
• terminal.foreground#ffffff
• terminalCursor.background#ffc600
• terminalCursor.foreground#ffc600
• textBlockQuote.background#193549
• textBlockQuote.border#0088ff
• textCodeBlock.background#193549
• textLink.activeForeground#0088ff
• textLink.foreground#0088ff
• textPreformat.foreground#ffc600
• textSeparator.foreground#0d3a58
• titleBar.activeBackground#15232D
• titleBar.activeForeground#ffffff
• titleBar.inactiveBackground#193549
• titleBar.inactiveForeground#ffffff33
• walkThrough.embeddedEditorBackground#0d3a58
• welcomePage.buttonBackground#193549
• welcomePage.buttonHoverBackground#0d3a58
• widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...