monotone

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.activeBackground#39363600
• activityBar.activeBorder#bebaba
• activityBar.activeFocusBorder#5e5959
• activityBar.background#121111
• activityBar.border#393636BB
• activityBar.dropBackground#bebaba22
• activityBar.foreground#bebaba
• activityBar.inactiveForeground#5e5959
• activityBarBadge.background#bebaba
• activityBarBadge.foreground#121111
• badge.background#121111
• badge.foreground#bebaba
• breadcrumb.activeSelectionForeground#787271
• breadcrumb.background#171616
• breadcrumb.focusForeground#bebaba
• breadcrumb.foreground#5e5959
• breadcrumbPicker.background#171616
• button.background#222020
• button.foreground#bebaba
• button.hoverBackground#393636
• checkbox.background#121111
• checkbox.border#5e5959
• checkbox.foreground#bebaba
• debugExceptionWidget.background#121111
• debugExceptionWidget.border#5e5959
• debugIcon.breakpointCurrentStackframeForeground#bebaba
• debugIcon.breakpointDisabledForeground#5e5959
• debugIcon.breakpointForeground#f54646
• debugIcon.breakpointStackframeForeground#bebaba
• debugIcon.breakpointUnverifiedForeground#bebaba
• debugIcon.continueForeground#bebaba
• debugIcon.disconnectForeground#bebaba
• debugIcon.pauseForeground#bebaba
• debugIcon.restartForeground#bebaba
• debugIcon.startForeground#bebaba
• debugIcon.stepBackForeground#bebaba
• debugIcon.stepIntoForeground#bebaba
• debugIcon.stepOutForeground#bebaba
• debugIcon.stepOverForeground#bebaba
• debugIcon.stopForeground#bebaba
• debugTokenExpression.boolean#d8a763
• debugTokenExpression.error#f54646
• debugTokenExpression.name#bebaba
• debugTokenExpression.number#d8a763
• debugTokenExpression.string#8db18a
• debugTokenExpression.value#bebaba
• debugToolBar.background#121111
• debugToolBar.border#393636BB
• debugView.valueChangedHighlight#7788aa
• descriptionForeground#bebaba
• diffEditor.border#393636BB
• dropdown.background#121111
• dropdown.border#393636BB
• dropdown.foreground#bebaba
• dropdown.listBackground#121111
• editor.background#121111
• editor.findMatchBackground#39363600
• editor.findMatchBorder#f5ac46
• editor.findMatchHighlightBackground#39363600
• editor.findMatchHighlightBorder#bebabaBB
• editor.findRangeHighlightBackground#39363600
• editor.findRangeHighlightBorder#bebabaBB
• editor.focusedStackFrameHighlightBackground#bebaba77
• editor.foldBackground#bebaba77
• editor.foreground#bebaba
• editor.hoverHighlightBackground#393636
• editor.inactiveSelectionBackground#22202050
• editor.lineHighlightBackground#22202070
• editor.lineHighlightBorder#222020
• editor.rangeHighlightBackground#121111
• editor.rangeHighlightBorder#5e5959
• editor.selectionBackground#222020
• editor.selectionForeground#bebaba
• editor.selectionHighlightBackground#bebaba33
• editor.selectionHighlightBorder#393636
• editor.snippetFinalTabstopHighlightBackground#bebaba33
• editor.snippetFinalTabstopHighlightBorder#393636
• editor.snippetTabstopHighlightBackground#bebaba33
• editor.snippetTabstopHighlightBorder#393636
• editor.stackFrameHighlightBackground#bebaba33
• editor.symbolHighlightBackground#bebaba33
• editor.symbolHighlightBorder#393636
• editor.wordHighlightBackground#bebaba33
• editor.wordHighlightBorder#393636
• editor.wordHighlightStrongBackground#393636
• editor.wordHighlightStrongBorder#393636BB
• editorBracketMatch.background#12111100
• editorBracketMatch.border#f5ac46
• editorCodeLens.foreground#bebaba
• editorCursor.background#121111
• editorCursor.foreground#f54646
• editorError.border#393636BB
• editorError.foreground#f54646
• editorGroup.border#393636BB
• editorGroup.dropBackground#bebaba22
• editorGroup.emptyBackground#121111
• editorGroup.focusedEmptyBorder#393636BB
• editorGroupHeader.noTabsBackground#121111
• editorGroupHeader.tabsBackground#121111
• editorGroupHeader.tabsBorder#393636
• editorGutter.addedBackground#88aa77
• editorGutter.background#121111
• editorGutter.commentRangeForeground#bebaba77
• editorGutter.deletedBackground#f54646
• editorGutter.modifiedBackground#7788aa
• editorHint.border#393636
• editorHint.foreground#bebaba
• editorHoverWidget.background#171616
• editorHoverWidget.border#393636
• editorHoverWidget.foreground#bebaba
• editorHoverWidget.statusBarBackground#39363677
• editorIndentGuide.activeBackground#393636
• editorIndentGuide.background#222020
• editorInfo.border#393636
• editorInfo.foreground#bebaba
• editorLightBulb.foreground#bebaba
• editorLightBulbAutoFix.foreground#393636
• editorLineNumber.activeForeground#bebaba
• editorLineNumber.foreground#393636
• editorLink.activeForeground#bebaba
• editorMarkerNavigation.background#393636
• editorMarkerNavigationError.background#f54646
• editorMarkerNavigationInfo.background#7788aa
• editorMarkerNavigationWarning.background#f5ac46
• editorOverviewRuler.addedForeground#393636
• editorOverviewRuler.border#393636
• editorOverviewRuler.bracketMatchForeground#393636
• editorOverviewRuler.commonContentForeground#393636
• editorOverviewRuler.currentContentForeground#393636
• editorOverviewRuler.deletedForeground#393636
• editorOverviewRuler.errorForeground#f54646
• editorOverviewRuler.findMatchForeground#393636
• editorOverviewRuler.incomingContentForeground#393636
• editorOverviewRuler.infoForeground#393636
• editorOverviewRuler.modifiedForeground#393636
• editorOverviewRuler.rangeHighlightForeground#393636
• editorOverviewRuler.selectionHighlightForeground#393636
• editorOverviewRuler.warningForeground#393636
• editorOverviewRuler.wordHighlightForeground#393636
• editorOverviewRuler.wordHighlightStrongForeground#393636
• editorPane.background#121111
• editorRuler.foreground#bebaba
• editorSuggestWidget.background#121111
• editorSuggestWidget.border#393636BB
• editorSuggestWidget.foreground#bebaba
• editorSuggestWidget.highlightForeground#bebaba
• editorSuggestWidget.selectedBackground#393636
• editorUnnecessaryCode.border#393636BB
• editorUnnecessaryCode.opacity#bebabaBB
• editorWarning.border#393636BB
• editorWarning.foreground#f5ac46
• editorWhitespace.foreground#bebaba50
• editorWidget.background#121111
• editorWidget.border#393636BB
• editorWidget.foreground#bebaba
• editorWidget.resizeBorder#bebaba77
• errorForeground#bebaba
• extensionBadge.remoteBackground#121111
• extensionBadge.remoteForeground#bebaba
• extensionButton.prominentBackground#121111
• extensionButton.prominentForeground#bebaba
• extensionButton.prominentHoverBackground#121111
• focusBorder#393636BB
• foreground#bebaba
• gitDecoration.addedResourceForeground#88aa77
• gitDecoration.conflictingResourceForeground#bebaba
• gitDecoration.deletedResourceForeground#aa7766
• gitDecoration.ignoredResourceForeground#5e5959
• gitDecoration.modifiedResourceForeground#7788aa
• gitDecoration.submoduleResourceForeground#bebaba
• gitDecoration.untrackedResourceForeground#bebaba
• icon.foreground#bebaba
• imagePreview.border#393636BB
• input.background#121111
• input.border#393636BB
• input.foreground#bebaba
• input.placeholderForeground#393636BB
• inputOption.activeBackground#393636
• inputOption.activeBorder#393636BB
• inputValidation.errorBackground#f54646
• inputValidation.errorBorder#171616
• inputValidation.errorForeground#121111
• inputValidation.infoBackground#7788aa
• inputValidation.infoBorder#171616
• inputValidation.infoForeground#121111
• inputValidation.warningBackground#f5ac46
• inputValidation.warningBorder#171616
• inputValidation.warningForeground#121111
• list.activeSelectionBackground#393636
• list.activeSelectionForeground#bebaba
• list.dropBackground#bebaba22
• list.errorForeground#f54646
• list.filterMatchBackground#121111
• list.filterMatchBorder#393636BB
• list.focusBackground#222020
• list.focusForeground#bebaba
• list.highlightForeground#bebaba
• list.hoverBackground#393636
• list.hoverForeground#bebaba
• list.inactiveFocusBackground#393636
• list.inactiveSelectionBackground#222020
• list.inactiveSelectionForeground#bebaba
• list.invalidItemForeground#bebaba
• list.warningForeground#f5ac46
• listFilterWidget.background#121111
• listFilterWidget.noMatchesOutline#f5ac46
• listFilterWidget.outline#bebaba
• menu.background#121111
• menu.border#393636BB
• menu.foreground#bebaba
• menu.selectionBackground#393636
• menu.selectionBorder#393636
• menu.selectionForeground#121111
• menu.separatorBackground#393636
• menubar.selectionBackground#393636
• menubar.selectionBorder#393636BB
• menubar.selectionForeground#bebaba
• merge.border#393636BB
• merge.commonContentBackground#121111
• merge.commonHeaderBackground#121111
• merge.currentContentBackground#121111
• merge.currentHeaderBackground#121111
• merge.incomingContentBackground#121111
• merge.incomingHeaderBackground#121111
• minimap.errorHighlight#f54646
• minimap.findMatchHighlight#f5ac46
• minimap.selectionHighlight#5e5959
• minimap.warningHighlight#f5ac46
• minimapGutter.addedBackground#88aa77
• minimapGutter.deletedBackground#aa7766
• minimapGutter.modifiedBackground#7788aa
• notificationCenter.border#393636BB
• notificationCenterHeader.background#121111
• notificationCenterHeader.foreground#bebaba
• notificationLink.foreground#bebaba
• notifications.background#121111
• notifications.border#393636BB
• notifications.foreground#bebaba
• notificationsErrorIcon.foreground#f54646
• notificationsInfoIcon.foreground#bebaba
• notificationsWarningIcon.foreground#f5ac46
• notificationToast.border#393636BB
• panel.background#121111
• panel.border#393636BB
• panel.dropBackground#bebaba22
• panelInput.border#393636BB
• panelTitle.activeBorder#393636BB
• panelTitle.activeForeground#bebaba
• panelTitle.inactiveForeground#393636
• peekView.border#393636BB
• peekViewEditor.background#121111
• peekViewEditor.matchHighlightBackground#121111
• peekViewEditor.matchHighlightBorder#393636BB
• peekViewEditorGutter.background#121111
• peekViewResult.background#121111
• peekViewResult.fileForeground#bebaba
• peekViewResult.lineForeground#bebaba
• peekViewResult.matchHighlightBackground#121111
• peekViewResult.selectionBackground#222020
• peekViewResult.selectionForeground#bebaba
• peekViewTitle.background#121111
• peekViewTitleDescription.foreground#bebaba
• peekViewTitleLabel.foreground#bebaba
• pickerGroup.border#393636BB
• pickerGroup.foreground#bebaba
• problemsErrorIcon.foreground#f54646
• problemsInfoIcon.foreground#bebaba
• problemsWarningIcon.foreground#f5ac46
• progressBar.background#121111
• quickInput.background#121111
• quickInput.foreground#bebaba
• scrollbar.shadow#bebaba33
• scrollbarSlider.activeBackground#bebaba33
• scrollbarSlider.background#bebaba33
• scrollbarSlider.hoverBackground#bebaba33
• searchEditor.findMatchBackground#39363600
• searchEditor.findMatchBorder#f5ac46
• searchEditor.textInputBorder#393636BB
• selection.background#9c9695
• settings.checkboxBackground#121111
• settings.checkboxBorder#393636BB
• settings.checkboxForeground#bebaba
• settings.dropdownBackground#121111
• settings.dropdownBorder#393636BB
• settings.dropdownForeground#bebaba
• settings.dropdownListBorder#393636BB
• settings.headerForeground#bebaba
• settings.modifiedItemIndicator#393636BB
• settings.numberInputBackground#121111
• settings.numberInputBorder#393636BB
• settings.numberInputForeground#bebaba
• settings.textInputBackground#121111
• settings.textInputBorder#393636BB
• settings.textInputForeground#bebaba
• sideBar.background#121111
• sideBar.border#393636BB
• sideBar.dropBackground#bebaba22
• sideBar.foreground#bebaba
• sideBarSectionHeader.background#171616
• sideBarSectionHeader.border#393636BB
• sideBarSectionHeader.foreground#bebaba
• sideBarTitle.foreground#bebaba
• statusBar.background#121111
• statusBar.border#393636BB
• statusBar.debuggingBackground#9c9695
• statusBar.debuggingBorder#393636BB
• statusBar.debuggingForeground#121111
• statusBar.foreground#bebaba
• statusBar.noFolderBackground#121111
• statusBar.noFolderBorder#393636BB
• statusBar.noFolderForeground#bebaba
• statusBarItem.activeBackground#121111
• statusBarItem.hoverBackground#393636
• statusBarItem.prominentBackground#393636
• statusBarItem.prominentForeground#bebaba
• statusBarItem.prominentHoverBackground#393636BB
• statusBarItem.remoteBackground#121111
• statusBarItem.remoteForeground#bebaba
• symbolIcon.arrayForeground#bebaba
• symbolIcon.booleanForeground#bebaba
• symbolIcon.classForeground#bebaba
• symbolIcon.colorForeground#bebaba
• symbolIcon.constantForeground#bebaba
• symbolIcon.constructorForeground#bebaba
• symbolIcon.enumeratorForeground#bebaba
• symbolIcon.enumeratorMemberForeground#bebaba
• symbolIcon.eventForeground#bebaba
• symbolIcon.fieldForeground#bebaba
• symbolIcon.fileForeground#bebaba
• symbolIcon.folderForeground#bebaba
• symbolIcon.functionForeground#bebaba
• symbolIcon.interfaceForeground#bebaba
• symbolIcon.keyForeground#bebaba
• symbolIcon.keywordForeground#bebaba
• symbolIcon.methodForeground#bebaba
• symbolIcon.moduleForeground#bebaba
• symbolIcon.namespaceForeground#bebaba
• symbolIcon.nullForeground#bebaba
• symbolIcon.numberForeground#bebaba
• symbolIcon.objectForeground#bebaba
• symbolIcon.operatorForeground#bebaba
• symbolIcon.packageForeground#bebaba
• symbolIcon.propertyForeground#bebaba
• symbolIcon.referenceForeground#bebaba
• symbolIcon.snippetForeground#bebaba
• symbolIcon.stringForeground#bebaba
• symbolIcon.structForeground#bebaba
• symbolIcon.textForeground#bebaba
• symbolIcon.typeParameterForeground#bebaba
• symbolIcon.unitForeground#bebaba
• symbolIcon.variableForeground#bebaba
• tab.activeBackground#39363680
• tab.activeBorder#393636BB
• tab.activeBorderTop#39363600
• tab.activeForeground#9c9695
• tab.activeModifiedBorder#f5ac46BB
• tab.border#12111100
• tab.hoverBackground#393636
• tab.hoverBorder#12111100
• tab.inactiveBackground#121111
• tab.inactiveForeground#787271
• tab.inactiveModifiedBorder#f5ac46
• tab.unfocusedActiveBackground#121111
• tab.unfocusedActiveBorder#12111100
• tab.unfocusedActiveBorderTop#121111
• tab.unfocusedActiveForeground#bebaba
• tab.unfocusedActiveModifiedBorder#121111
• tab.unfocusedHoverBackground#393636
• tab.unfocusedHoverBorder#121111
• tab.unfocusedInactiveForeground#393636
• tab.unfocusedInactiveModifiedBorder#12111100
• terminal.ansiBlack#222020
• terminal.ansiBlue#9D9695
• terminal.ansiBrightBlack#5F5959
• terminal.ansiBrightBlue#7488AD
• terminal.ansiBrightCyan#D3CFCF
• terminal.ansiBrightGreen#D3CFCF
• terminal.ansiBrightMagenta#D3CFCF
• terminal.ansiBrightRed#FF2D3C
• terminal.ansiBrightWhite#D3CFCF
• terminal.ansiBrightYellow#FFAA23
• terminal.ansiCyan#9D9695
• terminal.ansiGreen#7FAC71
• terminal.ansiMagenta#9D9695
• terminal.ansiRed#A54434
• terminal.ansiWhite#9D9695
• terminal.ansiYellow#D3CFCF
• terminal.background#121111
• terminal.border#393636BB
• terminal.foreground#bebaba
• terminal.selectionBackground#d8a763
• terminalCursor.background#d8a763
• terminalCursor.foreground#bebaba
• textBlockQuote.background#121111
• textBlockQuote.border#393636BB
• textCodeBlock.background#121111
• textLink.activeForeground#bebaba
• textLink.foreground#787271
• textPreformat.foreground#bebaba
• textSeparator.foreground#bebaba
• titleBar.activeBackground#121111
• titleBar.activeForeground#bebaba
• titleBar.border#393636
• titleBar.inactiveBackground#121111
• titleBar.inactiveForeground#bebaba
• tree.indentGuidesStroke#5e5959
• walkThrough.embeddedEditorBackground#121111
• welcomePage.background#121111
• welcomePage.buttonBackground#393636
• welcomePage.buttonHoverBackground#393636
• widget.shadow#bebaba33
• window.activeBorder#393636
• window.inactiveBorder#5e5959

tokenColors

TextMate scopes and font styles (syntax highlighting rules).