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.languageitalic
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.documentationnormal
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.languageitalic
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.documentationnormal
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.languageitalic
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.documentationnormal
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
emphasisitalic
strongbold
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.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
markup.strikethroughstrikethrough
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