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#f47023
  • activityBar.background#4c4c4c
  • activityBarBadge.background#f47023
  • badge.background#252525
  • badge.foreground#7ed321
  • breadcrumb.background#3c3c3c
  • button.background#097bed
  • button.hoverBackground#4a90e2
  • dropdown.background#6e6e6e
  • dropdown.border#5a5a5a
  • editor.background#232834
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41cd
  • editor.lineHighlightBackground#313848
  • editor.selectionHighlightBackground#ADD6FF26
  • editorBracketMatch.background#505050
  • editorCursor.foreground#ADFF2F
  • editorGroup.border#5a5a5a
  • editorGroupHeader.tabsBackground#4c4c4c
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#c2c2c2
  • editorSuggestWidget.highlightForeground#7ed321
  • input.background#464646
  • input.border#787878
  • list.dropBackground#383B3D
  • list.focusBackground#6e6e6e
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#3c3c3c
  • list.inactiveSelectionBackground#464646
  • list.inactiveSelectionForeground#d7dae0
  • panel.background#1c202a
  • panelTitle.activeBorder#f47023
  • sideBar.background#333
  • sideBar.border#5a5a5a
  • sideBarSectionHeader.background#3c3c3c
  • sideBarTitle.foreground#BBBBBB
  • tab.activeBackground#3c3c3c
  • tab.activeBorderTop#f47023
  • tab.border#464646
  • tab.inactiveBackground#333
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#396FE2
  • terminal.ansiBrightBlack#696969
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#2DDAFD
  • terminal.ansiGreen#9ECE58
  • terminal.ansiMagenta#BB80B3
  • terminal.ansiRed#E54B4B
  • terminal.ansiWhite#d0d0d0
  • terminal.ansiYellow#FAED70
  • terminal.background#232834
  • terminal.selectionBackground#ADFF2F4C
  • terminalCursor.foreground#ADFF2F

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#78909Citalic
constant.language#4fc1ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#B5CEA8
constant.regexp#646695
entity.name.tag#4fc1ff
entity.name.tag.css, entity.name.tag.less#D7BA7D
entity.other.attribute-name#9CDCFE
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#D7BA7D
invalid#F44747
markup.underlineunderline
markup.bold#9cdcfebold
markup.heading#4ec9b0bold
markup.italic#D4BFFFitalic
markup.strikethrough#f44747strikethrough
markup.inserted#bae67e
markup.deleted#f44747
markup.changed#4fc1ff
punctuation.definition.quote.begin.markdown#78909C
punctuation.definition.list.begin.markdown#6796E6
markup.inline.raw#FFAA8A
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#4fc1ff
meta.preprocessor.string#FFAA8A
meta.preprocessor.numeric#B5CEA8
meta.structure.dictionary.key.python#9CDCFE
meta.diff.header#4fc1ff
storage#4fc1ff
storage.type#4fc1ff
storage.modifier, keyword.operator.noexcept#4fc1ff
string, meta.embedded.assembly#FFAA8A
string.tag#FFAA8A
string.value#FFAA8A
string.regexp#D16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#4fc1ff
meta.template.expression#D4D4D4
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#9CDCFE
keyword#4fc1ff
keyword.control#4fc1ff
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#4fc1ff
keyword.other.unit#B5CEA8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#4fc1ff
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#4fc1ff
entity.name.function, support.function, support.constant.handlebars, source.python meta.function-call.generic, source.powershell variable.other.member, entity.name.operator.custom-literal#FFE6B3italic
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#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#4EC9B0
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#D4BFFF
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#9CDCFE
variable.other.constant, variable.other.enummember#569cd6
meta.object-literal.key#9CDCFE
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#FFAA8A
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#FFAA8A
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#FFE6B3
keyword.operator.quantifier.regexp#D7BA7D
constant.character, constant.other.option#4fc1ff
constant.character.escape#D7BA7D
entity.name.label#C8C8C8
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6