Skip to main content
Coding Theme

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#2E7D3230
  • activityBar.activeBorder#4CAF50
  • activityBar.activeFocusBorder#4CAF50
  • activityBar.background#000000
  • activityBar.border#222222
  • activityBar.foreground#CCCCCC
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#2E7D32
  • activityBarBadge.foreground#CCCCCC
  • activityBarTop.activeBorder#2E7D32
  • activityBarTop.foreground#CCCCCC
  • activityBarTop.inactiveForeground#888888
  • banner.background#2E7D32
  • banner.foreground#CCCCCC
  • banner.iconForeground#CCCCCC
  • button.background#2E7D32
  • button.foreground#ffffff
  • button.hoverBackground#1B5E20
  • button.secondaryBackground#3a3a3a
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45454545
  • chat.avatarBackground#000000
  • chat.avatarForeground#4CAF50
  • chat.requestBackground#000000
  • chat.requestBorder#222222
  • chat.slashCommandBackground#2E7D3240
  • chat.slashCommandForeground#4CAF50
  • checkbox.background#000000
  • checkbox.border#2E7D32
  • checkbox.foreground#d4d4d4
  • commandCenter.activeBackground#2E7D3230
  • commandCenter.activeBorder#2E7D32
  • commandCenter.activeForeground#CCCCCC
  • commandCenter.background#000000
  • commandCenter.border#222222
  • commandCenter.foreground#d4d4d4
  • commandCenter.inactiveBorder#222222
  • commandCenter.inactiveForeground#9c9c9c
  • debugToolBar.background#000000
  • debugToolBar.border#222222
  • descriptionForeground#9c9c9c
  • diffEditor.border#222222
  • diffEditor.diagonalFill#222222
  • diffEditor.insertedLineBackground#4CAF5015
  • diffEditor.insertedTextBackground#4CAF5020
  • diffEditor.removedLineBackground#F4474715
  • diffEditor.removedTextBackground#F4474720
  • disabledForeground#555555
  • dropdown.background#000000
  • dropdown.border#2E7D32
  • dropdown.foreground#d4d4d4
  • dropdown.listBackground#000000
  • editor.background#000000
  • editor.compositionBorder#2E7D32
  • editor.findMatchBackground#FF9800AA
  • editor.findMatchBorder#FF9800
  • editor.findMatchHighlightBackground#FF980060
  • editor.focusedStackFrameHighlightBackground#4CAF5020
  • editor.foldBackground#2E7D3215
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#2E7D3220
  • editor.inactiveSelectionBackground#2E7D3030
  • editor.lineHighlightBackground#ffffff08
  • editor.lineHighlightBorder#222222
  • editor.placeholder.foreground#555555
  • editor.selectionBackground#2E7D3060
  • editor.selectionHighlightBackground#2E7D3040
  • editor.stackFrameHighlightBackground#FFB74D20
  • editor.wordHighlightBackground#2E7D3240
  • editor.wordHighlightStrongBackground#2E7D3260
  • editorBracketHighlight.foreground1#FFB74D
  • editorBracketHighlight.foreground2#C586C0
  • editorBracketHighlight.foreground3#4EC9B0
  • editorBracketHighlight.foreground4#DCDCAA
  • editorBracketHighlight.foreground5#6796E6
  • editorBracketHighlight.foreground6#FF9800
  • editorBracketHighlight.unexpectedBracket.foreground#F44747
  • editorBracketMatch.background#2E7D3040
  • editorBracketMatch.border#4CAF50
  • editorCodeLens.foreground#888888
  • editorCursor.foreground#4CAF50
  • editorError.foreground#F44747
  • editorGhostText.foreground#555555
  • editorGroup.border#000000
  • editorGroup.dropBackground#00000088
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#4CAF50
  • editorGutter.background#000000
  • editorGutter.deletedBackground#F44747
  • editorGutter.foldingControlForeground#888888
  • editorGutter.modifiedBackground#FF9800
  • editorHint.foreground#5DAE8B
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#222222
  • editorHoverWidget.foreground#d4d4d4
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#222222
  • editorInfo.foreground#6796E6
  • editorInlayHint.background#ffffff08
  • editorInlayHint.foreground#888888
  • editorInlayHint.parameterBackground#ffffff08
  • editorInlayHint.parameterForeground#9CDCFEaa
  • editorInlayHint.typeBackground#ffffff08
  • editorInlayHint.typeForeground#4EC9B0aa
  • editorLineNumber.activeForeground#d4d4d4
  • editorLineNumber.foreground#555555
  • editorLink.activeForeground#4CAF50
  • editorMultiCursor.primary.foreground#4CAF50
  • editorMultiCursor.secondary.foreground#5DAE8B
  • editorOverviewRuler.addedForeground#4CAF5080
  • editorOverviewRuler.border#222222
  • editorOverviewRuler.bracketMatchForeground#4CAF5080
  • editorOverviewRuler.deletedForeground#F4474780
  • editorOverviewRuler.errorForeground#F44747
  • editorOverviewRuler.findMatchForeground#FF980080
  • editorOverviewRuler.infoForeground#6796E6
  • editorOverviewRuler.modifiedForeground#FF980080
  • editorOverviewRuler.warningForeground#FF9800
  • editorRuler.foreground#222222
  • editorStickyScroll.background#000000
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#222222
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.selectedBackground#2E7D3260
  • editorSuggestWidget.selectedForeground#ffffff
  • editorUnnecessaryCode.opacity#000000aa
  • editorWarning.foreground#FF9800
  • editorWhitespace.foreground#333333
  • editorWidget.background#000000
  • editorWidget.border#222222
  • editorWidget.foreground#d4d4d4
  • errorForeground#F44747
  • focusBorder#2E7D32
  • foreground#d4d4d4
  • gitDecoration.addedResourceForeground#4CAF50
  • gitDecoration.conflictingResourceForeground#F44747
  • gitDecoration.deletedResourceForeground#F44747
  • gitDecoration.ignoredResourceForeground#555555
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.renamedResourceForeground#4EC9B0
  • gitDecoration.stageModifiedResourceForeground#FFB74D
  • gitDecoration.untrackedResourceForeground#5DAE8B
  • icon.foreground#CCCCCC
  • inlineChat.background#000000
  • inlineChat.border#2E7D32
  • inlineChat.foreground#d4d4d4
  • inlineEdit.gutterIndicator.primaryBorder#4CAF50
  • inlineEdit.gutterIndicator.primaryForeground#4CAF50
  • inlineEdit.modifiedBackground#4CAF5015
  • inlineEdit.originalBackground#F4474715
  • input.background#000000
  • input.border#2E7D32
  • input.foreground#d4d4d4
  • input.placeholderForeground#888888
  • inputOption.activeBackground#2E7D3240
  • inputOption.activeBorder#2E7D32
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#2E7D32
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#FF9800
  • keybindingLabel.background#ffffff10
  • keybindingLabel.border#333333
  • keybindingLabel.bottomBorder#444444
  • keybindingLabel.foreground#d4d4d4
  • list.activeSelectionBackground#2E7D3260
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#F44747
  • list.focusBackground#2E7D3240
  • list.focusForeground#ffffff
  • list.focusOutline#2E7D32
  • list.highlightForeground#4CAF50
  • list.hoverBackground#ffffff10
  • list.hoverForeground#d4d4d4
  • list.inactiveFocusBackground#2E7D3220
  • list.inactiveSelectionBackground#2E7D3230
  • list.warningForeground#FF9800
  • menu.background#000000
  • menu.border#222222
  • menu.foreground#d4d4d4
  • menu.selectionBackground#2E7D3260
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#222222
  • menubar.selectionBackground#2E7D3240
  • menubar.selectionForeground#ffffff
  • merge.border#222222
  • merge.currentContentBackground#4CAF5020
  • merge.currentHeaderBackground#4CAF5040
  • merge.incomingContentBackground#6796E620
  • merge.incomingHeaderBackground#6796E640
  • minimap.background#000000
  • minimap.errorHighlight#F44747
  • minimap.findMatchHighlight#FF980080
  • minimap.selectionHighlight#2E7D3060
  • minimap.warningHighlight#FF9800
  • minimapGutter.addedBackground#4CAF50
  • minimapGutter.deletedBackground#F44747
  • minimapGutter.modifiedBackground#FF9800
  • minimapSlider.activeBackground#ffffff35
  • minimapSlider.background#ffffff15
  • minimapSlider.hoverBackground#ffffff25
  • notificationCenter.border#222222
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#d4d4d4
  • notifications.background#000000
  • notifications.border#222222
  • notifications.foreground#d4d4d4
  • notificationsErrorIcon.foreground#F44747
  • notificationsInfoIcon.foreground#6796E6
  • notificationsWarningIcon.foreground#FF9800
  • panel.background#000000
  • panel.border#222222
  • panelStickyScroll.background#000000
  • panelStickyScroll.border#222222
  • panelStickyScroll.shadow#00000088
  • panelTitle.activeBorder#4CAF50
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#9c9c9c
  • peekView.border#2E7D32
  • peekViewEditor.background#0a0a0a
  • peekViewEditor.matchHighlightBackground#FF980040
  • peekViewResult.background#000000
  • peekViewResult.fileForeground#CCCCCC
  • peekViewResult.lineForeground#d4d4d4
  • peekViewResult.matchHighlightBackground#FF980040
  • peekViewResult.selectionBackground#2E7D3260
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#9c9c9c
  • peekViewTitleLabel.foreground#CCCCCC
  • pickerGroup.border#222222
  • pickerGroup.foreground#4CAF50
  • problemsErrorIcon.foreground#F44747
  • problemsInfoIcon.foreground#6796E6
  • problemsWarningIcon.foreground#FF9800
  • progressBar.background#4CAF50
  • quickInput.background#000000
  • quickInput.foreground#d4d4d4
  • quickInputList.focusBackground#2E7D3260
  • quickInputList.focusForeground#ffffff
  • quickInputTitle.background#000000
  • radio.activeBackground#2E7D32
  • radio.activeBorder#2E7D32
  • radio.activeForeground#ffffff
  • radio.inactiveBackground#000000
  • radio.inactiveBorder#555555
  • radio.inactiveForeground#d4d4d4
  • radio.inactiveHoverBackground#ffffff10
  • scmGraph.foreground1#4CAF50
  • scmGraph.foreground2#6796E6
  • scmGraph.foreground3#FF9800
  • scmGraph.foreground4#C586C0
  • scmGraph.foreground5#4EC9B0
  • scmGraph.historyItemHoverLabelForeground#CCCCCC
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ffffff44
  • scrollbarSlider.background#ffffff22
  • scrollbarSlider.hoverBackground#ffffff33
  • selection.background#2E7D3060
  • sideBar.background#000000
  • sideBar.border#222222
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#222222
  • sideBarSectionHeader.foreground#d4d4d4
  • sideBarStickyScroll.background#000000
  • sideBarStickyScroll.border#222222
  • sideBarStickyScroll.shadow#00000088
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#000000
  • statusBar.border#222222
  • statusBar.debuggingBackground#ff0000
  • statusBar.debuggingForeground#CCCCCC
  • statusBar.foreground#CCCCCC
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#CCCCCC
  • statusBarItem.activeBackground#000000
  • statusBarItem.compactHoverBackground#1A1A1A
  • statusBarItem.errorBackground#000000
  • statusBarItem.errorForeground#F44336
  • statusBarItem.errorHoverBackground#1A1A1A
  • statusBarItem.errorHoverForeground#F44336
  • statusBarItem.focusBackground#000000
  • statusBarItem.hoverBackground#1A1A1A
  • statusBarItem.hoverForeground#CCCCCC
  • statusBarItem.offlineBackground#000000
  • statusBarItem.offlineForeground#A0A0A0
  • statusBarItem.prominentBackground#000000
  • statusBarItem.prominentForeground#CCCCCC
  • statusBarItem.prominentHoverBackground#1A1A1A
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#2E7D32
  • statusBarItem.warningBackground#000000
  • statusBarItem.warningForeground#FFB74D
  • statusBarItem.warningHoverBackground#1A1A1A
  • statusBarItem.warningHoverForeground#FFB74D
  • tab.activeBackground#000000
  • tab.activeBorder#000000
  • tab.activeBorderTop#4CAF50
  • tab.activeForeground#CCCCCC
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#9c9c9c
  • tab.unfocusedActiveBorder#000000
  • tab.unfocusedActiveForeground#CCCCCC
  • tab.unfocusedInactiveForeground#9c9c9c
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6796E6
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#8AB4F8
  • terminal.ansiBrightCyan#7ED6C1
  • terminal.ansiBrightGreen#7CB668
  • terminal.ansiBrightMagenta#D4A0D0
  • terminal.ansiBrightRed#F47777
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFB74D
  • terminal.ansiCyan#4EC9B0
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#C586C0
  • terminal.ansiRed#F44747
  • terminal.ansiWhite#d4d4d4
  • terminal.ansiYellow#FF9800
  • terminal.background#000000
  • terminal.border#222222
  • terminal.foreground#d4d4d4
  • terminal.selectionBackground#2E7D3060
  • terminalCommandDecoration.defaultBackground#888888
  • terminalCommandDecoration.errorBackground#F44747
  • terminalCommandDecoration.successBackground#4CAF50
  • terminalCursor.background#000000
  • terminalCursor.foreground#4CAF50
  • terminalStickyScroll.background#000000
  • terminalStickyScroll.border#222222
  • testing.iconErrored#F44747
  • testing.iconFailed#F44747
  • testing.iconPassed#4CAF50
  • testing.iconQueued#6796E6
  • testing.iconSkipped#888888
  • testing.iconUnset#888888
  • textBlockQuote.background#0a0a0a
  • textBlockQuote.border#2E7D32
  • textCodeBlock.background#0a0a0a
  • textLink.activeForeground#7CB668
  • textLink.foreground#4CAF50
  • textPreformat.background#0a0a0a
  • textPreformat.foreground#FF9800
  • textSeparator.foreground#222222
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#000000
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#999999
  • toolbar.activeBackground#ffffff20
  • toolbar.hoverBackground#ffffff15
  • tree.indentGuidesStroke#333333
  • welcomePage.background#000000
  • welcomePage.tileBackground#0a0a0a
  • welcomePage.tileBorder#222222
  • welcomePage.tileHoverBackground#ffffff10
  • widget.border#222222
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.variable, support.variable.drive#4CAF50
variable.other.member#DCDCAA
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#388E3C
comment#7CB668
constant.language#4CAF50
constant.numeric#B5CEA8
constant.regexp#9090C8
entity.name.tag#4CAF50
entity.name.tag.css#FFB74D
entity.name.tag.yaml#9CDCFE
constant.language.yaml#4FC1FF
entity.other.attribute-name#5DAE8B
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.attribute.scss, entity.other.attribute-name.scss#FFB74D
invalid#F44747
markup.underlineunderline
markup.boldbold
markup.heading#4CAF50bold
markup.italicitalic
markup.inserted#B5CEA8
markup.deleted#FF9800
markup.changed#4CAF50
beginning.punctuation.definition.quote.markdown#7CB668
beginning.punctuation.definition.list.markdown#6796E6
markup.inline.raw#FF9800
meta.selector#FFB74D
punctuation.definition.tag#A0A0A0
meta.preprocessor#4CAF50
meta.preprocessor.string#FF9800
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#5DAE8B
meta.diff.header#4CAF50
storage#4CAF50
storage.type#4CAF50
storage.modifier#4CAF50
string#FF9800
string.tag#FF9800
string.value#FF9800
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#4CAF50
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#5DAE8B
keyword#4CAF50
keyword.control#4CAF50
keyword.operator#D4D4D4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#4CAF50
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#4CAF50
support.function.git-rebase#5DAE8B
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#4CAF50
entity.name.function, support.function, support.constant.handlebars#DCDCAA
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, 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#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
keyword.control#C586C0
variable, meta.definition.variable.name, support.variable#5DAE8B
meta.object-literal.key#5DAE8B
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#FF9800
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#FF9800
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#D16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#FFB74D
constant.character#4CAF50
constant.character.escape#FFB74D
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
variable.parameter#9CDCFE
variable.other.constant#4FC1FF
variable.other.readwrite#5DAE8B
variable.other.property#5DAE8B
variable.other.object#5DAE8B
invalid.deprecated#888888strikethrough
entity.name.type.interface, entity.name.type.enum, entity.name.type.class, entity.name.type.struct#4EC9B0
entity.name.namespace#4EC9B0
comment.block.documentation, comment.block.javadoc#8CC88A
markup.strikethroughstrikethrough
markup.fenced_code.block#FF9800
punctuation.separator, punctuation.accessor#d4d4d4
keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic#d4d4d4
storage.type.function#4CAF50
meta.import, meta.function-call#D4D4D4
entity.name.function.method#DCDCAA
Avisto Eastern Europe Black Theme by Avisto Eastern Europe - VS Code Theme