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#62E2C6
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffffff23
  • button.background#62E2C6bb
  • button.foreground#1a1f24
  • button.hoverBackground#62E2C6
  • button.secondaryHoverBackground#232831
  • debugToolBar.background#1a1f24
  • diffEditor.diagonalFill#cccccc33
  • diffEditor.insertedTextBackground#62E2C633
  • 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#62E2C6
  • editorGutter.modifiedBackground#62E2C650
  • editorHoverWidget.background#1a1f24
  • editorHoverWidget.border#343b41
  • editorHoverWidget.foreground#cccccc
  • editorHoverWidget.statusBarBackground#1a1f24
  • editorIndentGuide.activeBackground#1a1f24
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#62E2C6
  • editorLineNumber.foreground#404040
  • editorLink.activeForeground#62E2C6
  • editorOverviewRuler.addedForeground#62E2C699
  • 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#62E2C6
  • 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#E06C75
  • 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
strongbold
header#000080
comment#808080b0
constant.language#62AFE3
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#62AFE3
entity.name.tag.css#D7BA7D
entity.other.attribute-name, meta.attribute.python, variable.parameter.function-call.python#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#62AFE3bold
markup.heading#62AFE3bold
markup.italicitalic
markup.inserted#B5CEA8
markup.deleted#E06C75
markup.changed#62AFE3
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#62AFE3
meta.preprocessor.string#E06C75
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#62AFE3
storage#62AFE3
storage.type.function.arrow, meta.objectliteral, meta.brace.round
storage.type.function.arrow, variable.language.super#E5C07B
storage.type, storage.modifier#62AFE3
storage.modifier, keyword.operator.noexcept#62AFE3
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#62AFE3
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#62AFE3
keyword.control#62AFE3
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#62AFE3
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#62AFE3
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#62AFE3
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.function-call.generic.python#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#56B6C2
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#62E2C6
variable, meta.definition.variable.name, support.variable, entity.name.variable#eeebd8
variable.other.constant, variable.other.enummember, variable.other.object, constant.other.caps.python#abdaf5
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#abdaf5
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#62E2C6
token.warn-token#E5C07B
token.error-token#f14c4c
token.debug-token#62E2C6