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#2124dc
  • activityBar.background#050505
  • activityBar.foreground#aca6a6
  • activityBarBadge.background#2124dc
  • activityBarBadge.foreground#c0baba
  • badge.foreground#ffffff
  • button.background#2124dc
  • button.foreground#ffffff
  • dropdown.background#000000
  • dropdown.border#000000
  • dropdown.foreground#f8f8f2
  • editor.background#080808
  • editor.foreground#888888
  • editor.hoverHighlightBackground#4ecdc422
  • editor.lineHighlightBackground#0d0d0d
  • editor.wordHighlightBackground#aee23922
  • editor.wordHighlightStrongBackground#00a8c622
  • editorBracketHighlight.foreground1#797134
  • editorBracketMatch.background#4ecdc444
  • editorBracketMatch.border#00a8c6
  • editorCursor.background#000
  • editorCursor.foreground#ccc
  • editorGroupHeader.tabsBackground#0d0d0d
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#080808
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorHint.foreground#ff0000
  • editorLineNumber.activeForeground#ff0000
  • editorLineNumber.foreground#333333
  • editorLink.activeForeground#4ecdc4
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#00a8c655
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#1a1a1a
  • editorSuggestWidget.foreground#a3b5e9
  • editorSuggestWidget.highlightForeground#cfdd0e
  • editorSuggestWidget.selectedBackground#333333
  • editorWhitespace.foreground#262626
  • editorWidget.background#0d0d0d
  • editorWidget.border#0d0d0d
  • extensionButton.prominentBackground#0d52ca
  • extensionButton.prominentForeground#a4a7c6
  • extensionButton.prominentHoverBackground#76d8d1
  • focusBorder#000000
  • foreground#888888
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#4d4d4d
  • gitDecoration.modifiedResourceForeground#058d42
  • gitDecoration.untrackedResourceForeground#cef00ca3
  • input.background#000000
  • input.border#262626
  • input.foreground#c6b6b6
  • input.placeholderForeground#2e2e2e
  • inputOption.activeBorder#00a8c6
  • list.activeSelectionBackground#2124dc
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#333333
  • list.focusForeground#a4a7c6
  • list.hoverBackground#00000084
  • list.inactiveSelectionBackground#000000
  • panel.background#000000
  • panel.border#080808
  • panelTitle.activeBorder#2124dc
  • panelTitle.activeForeground#5a5151
  • panelTitle.inactiveForeground#888888
  • peekView.border#4ecdc4
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#00a8c655
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#0d0d0d
  • peekViewResult.fileForeground#aba48c
  • peekViewResult.lineForeground#aba48c
  • peekViewResult.matchHighlightBackground#00a8c655
  • peekViewResult.selectionBackground#050505
  • peekViewResult.selectionForeground#aba48c
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#aba48c
  • peekViewTitleLabel.foreground#aba48c
  • progressBar.background#aee239
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#4ecdc4aa
  • scrollbarSlider.background#333333aa
  • scrollbarSlider.hoverBackground#4ecdc455
  • sideBar.background#0d0d0d
  • sideBar.foreground#888888
  • sideBarSectionHeader.background#141414
  • sideBarSectionHeader.foreground#888888
  • statusBar.background#0d0d0d
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingForeground#e5e90a
  • statusBar.foreground#a4a7c6
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeForeground#ffffff95
  • tab.border#0a0a0a
  • tab.inactiveBackground#0d0d0d
  • tab.inactiveForeground#666666
  • terminal.background#000000
  • terminal.foreground#bfb9b9
  • titleBar.activeBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4
emphasisitalic
strongbold
header#000080
comment#ffffff6c
constant.language#569CD6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#e4389fa1
constant.regexp#646695
entity.name.tag#ffffff34
entity.name.tag.css, entity.name.tag.less#D7BA7D
entity.other.attribute-name#0894f9cb
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#eaa208d3
invalid#F44747
markup.underlineunderline
markup.bold#c5d11abold
markup.heading#179fffbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#CE9178
markup.changed#179fff
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#CE9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#179fff
meta.preprocessor.string#db7b6a
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#179fff
meta.diff.header#179fff
storage#179fff
storage.type#08a5ccd6
storage.modifier, keyword.operator.noexcept#179fff
string, meta.embedded.assembly#c2af62ca
string.tag#94492c
string.value#CE9178
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#179fff
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#769409
keyword#e1b506
keyword.control#e7ba07
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#3ada09
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569CD6
support.function.git-rebase#e4ff17
constant.sha.git-rebase#B5CEA8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#569CD6
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#fce703b5
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#0960eded
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#09edbfaa
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#09edbfaa
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#a4a7c6c1
variable.other.constant, variable.other.enummember#7f58f3
meta.object-literal.key#769409
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#CE9178
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#d84308
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#D7BA7D
constant.character, constant.other.option#569CD6
constant.character.escape#7dd793
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6