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.

  • actionBar.toggledBackground#383a49
  • activityBar.background#222223
  • activityBar.border#222223
  • activityBar.foreground#E6E6E6
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#242526
  • badge.background#6FC1FF
  • badge.foreground#676B79
  • button.background#45A9F9
  • button.foreground#FFFFFF
  • button.hoverBackground#676B79
  • checkbox.border#6B6B6B
  • diffEditor.insertedTextBackground#19f9d866
  • diffEditor.removedTextBackground#FF4B8266
  • editor.background#1E1E1E
  • editor.findMatchBackground#B084EB90
  • editor.findMatchHighlightBackground#FFB86C40
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.lineHighlightBackground#31353a
  • editor.selectionBackground#FFB86C40
  • editor.selectionHighlightBackground#ADD6FF26
  • editor.wordHighlightBackground#FFCC9560
  • editor.wordHighlightStrongBackground#FF9AC170
  • editorBracketMatch.border#19f9d8
  • editorCodeLens.foreground#FFB86C40
  • editorCursor.foreground#FF4B82
  • editorError.border#FF4B82
  • editorError.foreground#FF4B82
  • editorGutter.addedBackground#19f9d8
  • editorGutter.deletedBackground#FF4B82
  • editorGutter.modifiedBackground#FFCC95
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorRuler.foreground#B084EB60
  • editorWarning.border#FFCC95
  • editorWarning.foreground#FFCC95
  • editorWhitespace.foreground#4E5260
  • errorForeground#FF4B82
  • extensionButton.prominentBackground#45A9F9
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#676B79
  • foreground#E6E6E6
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionBackground#292A2B
  • list.activeSelectionForeground#19f9d8
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#383B3D
  • list.focusBackground#292A2B
  • list.focusForeground#19f9d8
  • list.highlightForeground#6FC1FF
  • list.hoverBackground#292A2B
  • list.hoverForeground#CDCDCD
  • list.inactiveSelectionBackground#292A2B
  • list.inactiveSelectionForeground#19f9d8
  • menu.background#252526
  • menu.border#454545
  • menu.foreground#CCCCCC
  • menu.separatorBackground#454545
  • merge.currentContentBackground#B084EB40
  • merge.currentHeaderBackground#B084EB90
  • merge.incomingContentBackground#FFB86C40
  • merge.incomingHeaderBackground#45A9F990
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#B084EB
  • scrollbar.shadow#222223
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#373B4199
  • scrollbarSlider.hoverBackground#757575
  • sideBar.background#242526
  • sideBar.border#222223
  • sideBar.foreground#BBBBBB
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#ccc3
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#222223
  • statusBar.debuggingBackground#B084EB
  • statusBar.debuggingForeground#E6E6E6
  • statusBar.foreground#E6E6E6
  • statusBar.noFolderBackground#242526
  • statusBar.noFolderForeground#E6E6E6
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#292A2B
  • tab.activeForeground#19f9d8
  • tab.inactiveBackground#242526
  • tab.inactiveForeground#E6E6E6
  • tab.lastPinnedBorder#ccc3
  • tab.selectedBackground#222222
  • tab.selectedForeground#ffffffa0
  • terminal.ansiBlue#45A9F9
  • terminal.ansiBrightBlack#242526
  • terminal.ansiBrightBlue#6FC1FF
  • terminal.ansiBrightCyan#BCAAFE
  • terminal.ansiBrightGreen#19f9d8
  • terminal.ansiBrightMagenta#FF9AC1
  • terminal.ansiBrightRed#FF2C6D
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#FFCC95
  • terminal.ansiCyan#B084EB
  • terminal.ansiGreen#19f9d8
  • terminal.ansiMagenta#FF75B5
  • terminal.ansiRed#FF2C6D
  • terminal.ansiWhite#CDCDCD
  • terminal.ansiYellow#FFB86C
  • terminal.inactiveSelectionBackground#3A3D41
  • titleBar.activeBackground#242526
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#242526
  • titleBar.inactiveForeground#E6E6E6
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#676B79italic
keyword#FF75B5—
keyword.control, keyword.operator.new#FF75B5italic
keyword.operator#E6E6E6—
keyword.operator.logical, keyword.operator.comparison#FFCC95—
storage#FFB86C—
constant#FFB86C—
constant.language—italic
constant.character.escape#45A9F9—
variable#E6E6E6—
variable.parameter#BBBBBBitalic
meta.object-binding-pattern-variable.js variable#FFCC95—
variable.other.constant, variable.language.this, variable.interpolation#FF9AC1—
variable.other.object#FF9AC1—
variable.other.property#E6E6E6—
invalid.illegal——
invalid.deprecated——
string#19f9d8—
punctuation.definition.template-expression#FFCC95—
support#FFCC95—
support.class#FFCC95—
support.type.object.module.js#B084EB—
support.function#6FC1FF—
entity.name.function#6FC1FF—
entity.other.inherited-class#FF9AC1—
entity.name.tag.yaml#FFCC95—
meta.decorator punctuation.decorator#FFB86C—
meta.decorator variable#6FC1FF—
keyword.other.special-method#45A9F9—
keyword.control.at-rule#B084EB—
keyword.other.important#FF4B82—
variable.interpolation#FF75B5—
meta.source.handlebars entity.name.tag#6FC1FF—
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag#FFCC95italic
entity.name.function.expression#FF75B5—
entity.unescaped.expression#B084EB—
constant.other.symbol#19f9d8—
entity.expression variable.parameter.name#FFB86C—
entity.expression variable.parameter.value#6FC1FF—
entity.expression support.function.builtin#FF9AC1—
entity.name.tag.html#FFCC95—
entity.other.attribute-name.handlebars#FFCC95—
support.class.component#FF75B5italic
meta.tag.js entity.name.tag#FFCC95—
entity.other.attribute-name#FFB86C—
markup.bold#FFB86C—
punctuation.definition.bold.markdown#FFCC95—
markup.changed#FF75B5—
markup.deleted#FF2C6D—
markup.italic#FF9AC1italic
punctuation.definition.italic.markdown#FF75B5italic
markup.inserted#19f9d8—
punctuation.definition.heading#19f9d8—
entity.name.section.markdown#BBBBBB—
markup.quote#FFB86C—
markup.inline.raw#19f9d8italic
beginning.punctuation.definition.list#FF75B5—
markup.fenced_code.block.markdown punctuation.definition.markdown#757575—
fenced_code.block.language#BBBBBBitalic
string.other.link#BBBBBBnormal
meta.link.inline.markdown#45A9F9italic
text.html.markdown punctuation.definition.string#FFCC95—
meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade#FF2C6D—
entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html#FF2C6D—
entity.name.tag.css#FF2C6D—
string.regexp#6FC1FF—
string.regexp keyword, string.regexp keyword.control#FF75B5normal
string.regexp keyword.operator#FF9AC1—
comment.block.documentation—normal
entity.name.type.instance.jsdoc punctuation.definition#FFCC95italic
entity.name.type.instance.jsdoc#CDCDCDitalic
comment.block storage#FFCC95—
comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string#FF9AC1—
comment#676B79italic
keyword#FF75B5—
keyword.control, keyword.operator.new#FF75B5italic
keyword.operator#E6E6E6—
keyword.operator.logical, keyword.operator.comparison#FFCC95—
storage#FFB86C—
constant#FFB86C—
constant.language—italic
constant.character.escape#45A9F9—
variable#E6E6E6—
variable.parameter#BBBBBBitalic
meta.object-binding-pattern-variable.js variable#FFCC95—
variable.other.constant, variable.language.this, variable.interpolation#FF9AC1—
variable.other.object#FF9AC1—
variable.other.property#E6E6E6—
invalid.illegal——
invalid.deprecated——
string#19f9d8—
punctuation.definition.template-expression#FFCC95—
support#FFCC95—
support.class#FFCC95—
support.type.object.module.js#B084EB—
support.function#6FC1FF—
entity.name.function#6FC1FF—
entity.other.inherited-class#FF9AC1—
entity.name.tag.yaml#FFCC95—
meta.decorator punctuation.decorator#FFB86C—
meta.decorator variable#6FC1FF—
keyword.other.special-method#45A9F9—
keyword.control.at-rule#B084EB—
keyword.other.important#FF4B82—
variable.interpolation#FF75B5—
meta.source.handlebars entity.name.tag#6FC1FF—
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag#FFCC95italic
entity.name.function.expression#FF75B5—
entity.unescaped.expression#B084EB—
constant.other.symbol#19f9d8—
entity.expression variable.parameter.name#FFB86C—
entity.expression variable.parameter.value#6FC1FF—
entity.expression support.function.builtin#FF9AC1—
entity.name.tag.html#FFCC95—
entity.other.attribute-name.handlebars#FFCC95—
support.class.component#FF75B5italic
meta.tag.js entity.name.tag#FFCC95—
entity.other.attribute-name#FFB86C—
markup.bold#FFB86C—
punctuation.definition.bold.markdown#FFCC95—
markup.changed#FF75B5—
markup.deleted#FF2C6D—
markup.italic#FF9AC1italic
punctuation.definition.italic.markdown#FF75B5italic
markup.inserted#19f9d8—
punctuation.definition.heading#19f9d8—
entity.name.section.markdown#BBBBBB—
markup.quote#FFB86C—
markup.inline.raw#19f9d8italic
beginning.punctuation.definition.list#FF75B5—
markup.fenced_code.block.markdown punctuation.definition.markdown#757575—
fenced_code.block.language#BBBBBBitalic
string.other.link#BBBBBBnormal
meta.link.inline.markdown#45A9F9italic
text.html.markdown punctuation.definition.string#FFCC95—
meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade#FF2C6D—
entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html#FF2C6D—
entity.name.tag.css#FF2C6D—
string.regexp#6FC1FF—
string.regexp keyword, string.regexp keyword.control#FF75B5normal
string.regexp keyword.operator#FF9AC1—
comment.block.documentation—normal
entity.name.type.instance.jsdoc punctuation.definition#FFCC95italic
entity.name.type.instance.jsdoc#CDCDCDitalic
comment.block storage#FFCC95—
comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string#FF9AC1—
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#4EC9B0—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#C586C0—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#9CDCFE—
variable.other.constant, variable.other.enummember#4FC1FF—
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#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#CE9178—
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#d7ba7d—
entity.name.label#C8C8C8—
comment#676B79italic
keyword#FF75B5—
keyword.control, keyword.operator.new#FF75B5italic
keyword.operator#E6E6E6—
keyword.operator.logical, keyword.operator.comparison#FFCC95—
storage#FFB86C—
constant#FFB86C—
constant.language—italic
constant.character.escape#45A9F9—
variable#E6E6E6—
variable.parameter#BBBBBBitalic
meta.object-binding-pattern-variable.js variable#FFCC95—
variable.other.constant, variable.language.this, variable.interpolation#FF9AC1—
variable.other.object#FF9AC1—
variable.other.property#E6E6E6—
invalid.illegal——
invalid.deprecated——
string#19f9d8—
punctuation.definition.template-expression#FFCC95—
support#FFCC95—
support.class#FFCC95—
support.type.object.module.js#B084EB—
support.function#6FC1FF—
entity.name.function#6FC1FF—
entity.other.inherited-class#FF9AC1—
entity.name.tag.yaml#FFCC95—
meta.decorator punctuation.decorator#FFB86C—
meta.decorator variable#6FC1FF—
keyword.other.special-method#45A9F9—
keyword.control.at-rule#B084EB—
keyword.other.important#FF4B82—
variable.interpolation#FF75B5—
meta.source.handlebars entity.name.tag#6FC1FF—
punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag#FFCC95italic
entity.name.function.expression#FF75B5—
entity.unescaped.expression#B084EB—
constant.other.symbol#19f9d8—
entity.expression variable.parameter.name#FFB86C—
entity.expression variable.parameter.value#6FC1FF—
entity.expression support.function.builtin#FF9AC1—
entity.name.tag.html#FFCC95—
entity.other.attribute-name.handlebars#FFCC95—
support.class.component#FF75B5italic
meta.tag.js entity.name.tag#FFCC95—
entity.other.attribute-name#FFB86C—
markup.bold#FFB86C—
punctuation.definition.bold.markdown#FFCC95—
markup.changed#FF75B5—
markup.deleted#FF2C6D—
markup.italic#FF9AC1italic
punctuation.definition.italic.markdown#FF75B5italic
markup.inserted#19f9d8—
punctuation.definition.heading#19f9d8—
entity.name.section.markdown#BBBBBB—
markup.quote#FFB86C—
markup.inline.raw#19f9d8italic
beginning.punctuation.definition.list#FF75B5—
markup.fenced_code.block.markdown punctuation.definition.markdown#757575—
fenced_code.block.language#BBBBBBitalic
string.other.link#BBBBBBnormal
meta.link.inline.markdown#45A9F9italic
text.html.markdown punctuation.definition.string#FFCC95—
meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade#FF2C6D—
entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html#FF2C6D—
entity.name.tag.css#FF2C6D—
string.regexp#6FC1FF—
string.regexp keyword, string.regexp keyword.control#FF75B5normal
string.regexp keyword.operator#FF9AC1—
comment.block.documentation—normal
entity.name.type.instance.jsdoc punctuation.definition#FFCC95italic
entity.name.type.instance.jsdoc#CDCDCDitalic
comment.block storage#FFCC95—
comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string#FF9AC1—
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#4EC9B0—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#C586C0—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#9CDCFE—
variable.other.constant, variable.other.enummember#4FC1FF—
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#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#CE9178—
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#d7ba7d—
entity.name.label#C8C8C8—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D4D4D4—
emphasis—italic
strong—bold
header#000080—
comment#6A9955—
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, 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.underline—underline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inserted#b5cea8—
markup.deleted#ce9178—
markup.changed#569cd6—
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#569cd6—
meta.preprocessor.string#ce9178—
meta.preprocessor.numeric#b5cea8—
meta.structure.dictionary.key.python#9cdcfe—
meta.diff.header#569cd6—
storage#569cd6—
storage.type#569cd6—
storage.modifier, keyword.operator.noexcept#569cd6—
string, meta.embedded.assembly#ce9178—
string.tag#ce9178—
string.value#ce9178—
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, source.css variable, source.coffee.embedded#9cdcfe—
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#569cd6—