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.activeBackground#405146
  • activityBar.activeBorder#4eb475
  • activityBar.activeFocusBorder#4eb47555
  • activityBar.background#282829
  • activityBar.border#405146
  • activityBarBadge.background#007acc
  • badge.background#e2641655
  • badge.foreground#f1f2f2
  • breadcrumb.background#40514655
  • breadcrumb.foreground#d2ecdc
  • button.background#405146
  • button.foreground#f1f2f2
  • button.hoverBackground#4eb47555
  • button.secondaryBackground#d2deec
  • button.secondaryForeground#282829
  • dropdown.background#282829
  • dropdown.border#405146
  • dropdown.foreground#f1f2f2
  • editor.background#282829
  • editor.findMatchBackground#4eb47555
  • editor.findMatchHighlightBackground#4eb47555
  • editor.findRangeHighlightBackground#4eb47555
  • editor.foldBackground#4eb47522
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#4eb47555
  • editor.inactiveSelectionBackground#3a3d41
  • editor.selectionBackground#5486c155
  • editor.selectionForeground#f1f2f2
  • editor.selectionHighlightBackground#769ecd55
  • editor.selectionHighlightBorder#5486c155
  • editorBracketHighlight.foreground1#22a253
  • editorBracketHighlight.foreground2#5486c1
  • editorBracketHighlight.foreground3#4eb475
  • editorBracketHighlight.foreground4#e78344
  • editorBracketHighlight.foreground5#d2ecdc
  • editorBracketHighlight.foreground6#769ecd
  • editorBracketHighlight.unexpectedBracket.foreground#e26416
  • editorCommentsWidget.resolvedBorder#405146
  • editorCommentsWidget.unresolvedBorder#e26416
  • editorCursor.foreground#ebebec
  • editorError.foreground#e16416
  • editorGroup.border#405146
  • editorGroup.dropBackground#40514655
  • editorGroup.dropIntoPromptBackground#405146
  • editorGroup.dropIntoPromptForeground#f1f2f2
  • editorGroup.emptyBackground#282829
  • editorGroup.focusedEmptyBorder#769ecd
  • editorGroupHeader.noTabsBackground#282829
  • editorGroupHeader.tabsBackground#282829
  • editorGroupHeader.tabsBorder#405146
  • editorGutter.addedBackground#4eb475
  • editorGutter.deletedBackground#e26416
  • editorGutter.modifiedBackground#e78344
  • editorHint.foreground#769ecd
  • editorIndentGuide.activeBackground#4eb475
  • editorIndentGuide.background#405146
  • editorInfo.foreground#5486c1
  • editorLightBulb.foreground#22a253
  • editorLink.activeForeground#f1f2f2
  • editorOverviewRuler.addedForeground#4eb475
  • editorOverviewRuler.background#282829
  • editorOverviewRuler.border#405146
  • editorOverviewRuler.errorForeground#e26416
  • editorOverviewRuler.findMatchForeground#4eb475
  • editorOverviewRuler.modifiedForeground#eda273
  • editorOverviewRuler.warningForeground#eda273
  • editorUnnecessaryCode.opacity#00000055
  • editorWarning.foreground#e78344
  • errorForeground#e26416
  • focusBorder#405146
  • input.background#535353
  • input.border#405146
  • input.foreground#f1f2f2
  • input.placeholderForeground#d2ecdc
  • inputOption.activeBackground#4eb47555
  • inputValidation.errorBackground#e26416
  • inputValidation.errorBorder#e26416
  • inputValidation.errorForeground#f1f2f2
  • inputValidation.infoBackground#5486c1
  • inputValidation.infoBorder#5486c1
  • inputValidation.infoForeground#f1f2f2
  • inputValidation.warningBackground#e78344
  • inputValidation.warningBorder#e78344
  • inputValidation.warningForeground#f1f2f2
  • list.activeSelectionBackground#4eb47555
  • list.activeSelectionForeground#f1f2f2
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#769ecd55
  • list.focusBackground#4eb47555
  • list.hoverBackground#769ecd55
  • list.inactiveSelectionBackground#535353
  • list.inactiveSelectionForeground#f1f2f2
  • menu.background#303031
  • menu.foreground#cccccc
  • minimap.background#282829
  • minimap.errorHighlight#e26416
  • minimap.findMatchHighlight#4eb475
  • minimap.selectionHighlight#5486c1
  • minimap.warningHighlight#eda273
  • minimapGutter.addedBackground#4eb475
  • minimapGutter.deletedBackground#e26416
  • minimapGutter.modifiedBackground#eda273
  • minimapSlider.background#4eb47555
  • minimapSlider.hoverBackground#4eb47555
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#22a253
  • scrollbar.shadow#4eb47555
  • selection.background#5486c155
  • sideBar.background#282829
  • sideBar.border#405146
  • sideBar.dropBackground#40514655
  • sideBar.foreground#d2ecdc
  • sideBarSectionHeader.background#405146
  • sideBarSectionHeader.border#cccccc33
  • sideBarSectionHeader.foreground#f1f2f2
  • sideBarTitle.foreground#f1f2f2
  • sideBySideEditor.horizontalBorder#405146
  • sideBySideEditor.verticalBorder#405146
  • statusBar.background#405146
  • statusBarItem.remoteBackground#16825d
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#405146
  • tab.activeBorder#4eb475
  • tab.activeForeground#f1f2f2
  • tab.hoverBackground#40514655
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBackground#7e7e7e55
  • terminal.inactiveSelectionBackground#3a3d41
  • textLink.foreground#5486c1
  • toolbar.hoverBackground#4eb47555
  • tree.indentGuidesStroke#405146
  • widget.shadow#7e7e7e
  • window.inactiveBorder#405146

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#D4D4D4
emphasisitalic
strongbold
header#5486c1
comment#405146
constant.language#5486c1
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#4eb475
constant.regexp#646695
entity.name.tag#5486c1
entity.name.tag.css#D7BA7D
entity.other.attribute-name#ced3d9
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#e26416
markup.underlineunderline
markup.bold#5486c1bold
markup.heading#5486c1bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#eda273
markup.changed#5486c1
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#eda273
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#5486c1
meta.preprocessor.string#eda273
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#ced3d9
meta.diff.header#5486c1
storage#5486c1
storage.type#5486c1
storage.modifier, keyword.operator.noexcept#5486c1
string, meta.embedded.assembly#eda273
string.tag#eda273
string.value#eda273
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#5486c1
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#22a253
keyword#5486c1
keyword.control#5486c1
keyword.operator#f1f2f2
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#5486c1
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5486c1
support.function.git-rebase#d2dedc
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#f6f9fb
variable.language#5486c1
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDCAA
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#4eb475
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4eb475
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#C586C0
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#ced3d9
variable.other.constant, variable.other.enummember#22a253
meta.object-literal.key#22a253
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#eda273
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#eda273
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#e78344
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#D7BA7D
constant.character#5486c1
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
comment#A9A9A9
punctuation.definition.comment#A9A9A9
string#E78344
meta.embedded.assembly#E78344
keyword - keyword.operator#5486C1
keyword.control#5486C1
storage#5486C1
storage.type#5486C1
constant.numeric#F3C1A1
entity.name.type#4EB475
entity.name.class#4EB475
support.type#4EB475
support.class#4EB475
entity.name.function#98B6DA
support.function#98B6DA
variable#D2ECDC
entity.name.variable#D2ECDC
token.info-token#5486c1
token.warn-token#eda273
token.error-token#e26416
token.debug-token#a6daba