Skip to main content
Coding Theme

Color themes

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.activeBorder#62E2C6
  • activityBar.background#1a1f24
  • activityBar.foreground#ffffffbb
  • activityBarBadge.background#62E2C6
  • activityBarBadge.foreground#1a1f24
  • breadcrumb.activeSelectionForeground#89d185
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffffff23
  • button.background#62E2C6bb
  • button.hoverBackground#62E2C6
  • button.secondaryHoverBackground#232831
  • debugToolBar.background#1a1f24
  • diffEditor.diagonalFill#cccccc33
  • diffEditor.insertedTextBackground#89d18533
  • diffEditor.removedTextBackground#f4877133
  • dropdown.background#1a1f24
  • editor.background#1a1f24
  • editor.findMatchBackground#515c6a
  • editor.findMatchHighlightBackground#62E2C650
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#62E2C650
  • editor.inactiveSelectionBackground#62E2C620
  • editor.lineHighlightBorder#1a1f2400
  • editor.selectionBackground#62E2C630
  • editor.selectionHighlightBackground#62E2C680
  • editor.wordHighlightStrongBackground#62E2C650
  • editorBracketHighlight.foreground1#62E2C6
  • editorBracketHighlight.foreground2#61AFEF
  • editorBracketHighlight.foreground3#98C379
  • editorBracketHighlight.foreground4#E06C75
  • editorBracketHighlight.foreground5#E5C07B
  • editorBracketHighlight.foreground6#C678DD
  • editorCursor.foreground#62E2C6
  • editorError.foreground#E06C75
  • editorGroupHeader.tabsBackground#1a1f24
  • editorGutter.addedBackground#89d185
  • editorGutter.modifiedBackground#62E2C650
  • editorHoverWidget.background#1a1f24
  • editorHoverWidget.border#343b41
  • editorHoverWidget.foreground#cccccc
  • editorHoverWidget.statusBarBackground#1a1f24
  • editorIndentGuide.activeBackground#1a1f24
  • editorIndentGuide.background#404040
  • editorLineNumber.foreground#62E2C6aa
  • editorLink.activeForeground#62E2C6
  • editorOverviewRuler.addedForeground#89d18599
  • editorOverviewRuler.border#ff000000
  • editorOverviewRuler.findMatchForeground#cca700
  • editorOverviewRuler.incomingContentForeground#62E2C650
  • editorOverviewRuler.modifiedForeground#62E2C699
  • editorOverviewRuler.rangeHighlightForeground#62E2C650
  • editorPane.background#1a1f24
  • editorSuggestWidget.background#1a1f24
  • editorSuggestWidget.highlightForeground#62E2C6
  • editorUnnecessaryCode.opacity#00000088
  • editorWidget.background#1a1f24
  • extensionBadge.remoteBackground#62E2C699
  • extensionButton.prominentBackground#89d185
  • focusBorder#62E2C650
  • input.background#1a1f24
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#62E2C650
  • inputOption.activeBorder#007acc00
  • inputValidation.infoBackground#1a1f24
  • inputValidation.infoBorder#62E2C650
  • keybindingLabel.background#8080802b
  • list.activeSelectionBackground#ffffff07
  • list.activeSelectionForeground#62E2C6
  • list.dropBackground#383b3d
  • list.filterMatchBackground#62E2C660
  • list.focusBackground#ffffff07
  • list.focusForeground#62E2C6
  • list.focusOutline#11111100
  • list.highlightForeground#62E2C6
  • list.hoverBackground#1a1f24
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#1a1f24
  • list.inactiveSelectionForeground#62E2C6
  • listFilterWidget.background#62E2C660
  • menu.background#1a1f24
  • menu.foreground#cccccc
  • menu.selectionBackground#62E2C650
  • menubar.selectionBackground#1a1f24
  • menubar.selectionBorder#62E2C655
  • menubar.selectionForeground#ffffff
  • minimap.selectionHighlight#62E2C650
  • minimapGutter.modifiedBackground#62E2C650
  • notebook.cellInsertionIndicator#62E2C699
  • notebook.focusedEditorBorder#62E2C650
  • notificationLink.foreground#62E2C650
  • notifications.background#1a1f24
  • panel.background#1a1f24
  • peekView.border#62E2C6
  • peekViewEditor.background#1a1f24
  • peekViewResult.matchHighlightBackground#cca70086
  • pickerGroup.border#62E2C650
  • pickerGroup.foreground#62E2C650
  • progressBar.background#62E2C699
  • scrollbarSlider.activeBackground#62E2C6
  • scrollbarSlider.background#62E2C620
  • scrollbarSlider.hoverBackground#62E2C6
  • searchEditor.findMatchBackground#cca70078
  • settings.checkboxBorder#62E2C6
  • settings.modifiedItemIndicator#62E2C6
  • settings.numberInputBackground#1a1f24
  • settings.textInputBackground#1a1f24
  • sideBar.background#1a1f24
  • sideBar.border#373241
  • sideBar.dropBackground#1a1f24
  • sideBar.foreground#ffffff5b
  • sideBarSectionHeader.background#1a1f24
  • sideBarSectionHeader.foreground#ffffff8e
  • sideBarTitle.foreground#ffffff2f
  • statusBar.background#1a1f24
  • statusBar.debuggingBackground#98C379
  • statusBar.debuggingForeground#1a1f24
  • statusBar.foreground#ffffff8f
  • statusBar.noFolderBackground#62E2C6
  • statusBar.noFolderForeground#1a1f24
  • statusBarItem.hoverBackground#23283120
  • statusBarItem.prominentBackground#62E2C625
  • statusBarItem.remoteBackground#62E2C6
  • symbolIcon.colorForeground#62E2C6
  • tab.activeBackground#62E2C625
  • tab.inactiveBackground#1a1f24
  • terminal.ansiBlack#1a1f24
  • terminal.ansiBlue#62E2C6
  • terminal.ansiBrightBlack#5A6374
  • terminal.ansiBrightBlue#62E2C6
  • terminal.ansiBrightCyan#56B6C2
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#C678DD
  • terminal.ansiBrightRed#E06C75
  • terminal.ansiBrightWhite#DCDFE4
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#DCDFE4
  • terminal.ansiYellow#E5C07B
  • terminal.border#373241
  • terminal.selectionBackground#62E2C650
  • testing.iconSkipped#848484
  • testing.iconUnset#848484
  • textBlockQuote.border#62E2C650
  • textLink.activeForeground#62E2C650
  • textLink.foreground#62E2C699
  • titleBar.activeBackground#1a1f24
  • titleBar.activeForeground#ffffff5b
  • titleBar.inactiveBackground#1a1f24
  • titleBar.inactiveForeground#ffffff5b
  • toolbar.hoverBackground#62E2C650

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#808080b0italic
constant.language#569CD6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#569CD6
entity.name.tag.css#D7BA7D
entity.other.attribute-name#9CDCFE
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#D7BA7D
invalid#F44747
markup.underlineunderline
markup.bold#569CD6bold
markup.heading#569CD6bold
markup.italicitalic
markup.inserted#B5CEA8
markup.deleted#E06C75
markup.changed#569CD6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#E06C75
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#569CD6
meta.preprocessor.string#E06C75
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#569CD6
storage#569CD6
storage.type.function.arrow, meta.objectliteral, meta.brace.round
storage.type.function.arrow, variable.language.super#E5C07B
storage.type, storage.modifier#569CD6italic
storage.modifier, keyword.operator.noexcept#839eca
string, meta.embedded.assembly#E06C75
string.tag#E06C75
string.value#E06C75
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569CD6
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#eeebd8
keyword#569CD6
keyword.control#569CD6
keyword.operator#D4D4D4
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#569CD6
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
support.function.git-rebase#9CDCFE
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#D4D4D4
variable.language#569CD6italic
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#E5C07B
meta.return-type, 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#97cec2
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#62E2C6
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#62E2C6italic
variable, meta.definition.variable.name, support.variable, entity.name.variable#eeebd8
variable.other.constant, variable.other.enummember, variable.other.object#56B6C2
meta.object-literal.key#eeebd8
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#E06C75
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#E06C75
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#E5C07B
keyword.operator.quantifier.regexp#D7BA7D
constant.character#56B6C2
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#62E2C6
token.warn-token#E5C07B
token.error-token#f14c4c
token.debug-token#62E2C6
entity.other.attribute-name.html, meta.decorator.tsitalic