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.background#f5f3f0
  • activityBarBadge.background#1a6b9a
  • editor.background#faf8f5
  • editor.foreground#2d2a26
  • editor.lineHighlightBackground#f0ede8
  • editor.selectionBackground#d4e5ff
  • editorBracketHighlight.foreground1#8b6914
  • editorBracketHighlight.foreground2#2868a0
  • editorBracketHighlight.foreground3#7b4b90
  • editorBracketHighlight.foreground4#2a7a50
  • editorBracketHighlight.foreground5#a04050
  • editorBracketHighlight.foreground6#407080
  • editorBracketHighlight.unexpectedBracket.foreground#cc3333
  • editorBracketMatch.background#d4e5ff
  • editorBracketMatch.border#3060c0
  • editorCursor.foreground#1a6b9a
  • editorIndentGuide.activeBackground1#c0bdb8
  • editorIndentGuide.background1#e0ddd8
  • editorLineNumber.activeForeground#606060
  • editorLineNumber.foreground#a0a0a0
  • editorRuler.foreground#e0ddd8
  • sideBar.background#f5f3f0
  • sideBarTitle.foreground#606060
  • statusBar.background#f5f3f0
  • tab.activeBackground#faf8f5
  • tab.inactiveBackground#f5f3f0
  • titleBar.activeBackground#f5f3f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, comment.line.number-sign, comment.line.semicolon, comment.block, comment.block.documentation, punctuation.definition.comment, string.comment#8a7b99italic
keyword, storage.type, storage, storage.modifier#c45020
keyword.control, keyword.control.loop, keyword.control.conditional, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.trycatch, keyword.control.exception#1a6b9a
keyword.operator, keyword.operator.arrow, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.spread, keyword.operator.rest, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.expression, keyword.operator.new, keyword.operator.delete, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.wordlike#0d7377
string, string.quoted, string.quoted.double, string.quoted.single, string.quoted.other, string.quoted.triple, string.template, meta.embedded.assembly#2a7a50
string.regexp, source.regexp, constant.regexp, string.regexp.character-class, string.regexp.arbitrary-repitition#2a7a50
constant.character.escape, string.regexp constant.character.escape#3d8a60bold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end#c45020
constant.numeric, constant.numeric.decimal, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal, constant.numeric.dozenal, keyword.other.unit#9a6a20
constant.language, variable.language#5050a0italic
constant.language.boolean#5050a0italic
entity.name.type, support.type.builtin, support.type.primitive#c55a11
support.type, entity.name.type.class, entity.name.type.struct, entity.name.type.enum, entity.name.type.interface, entity.name.type.alias, entity.name.type.module, entity.name.namespace, entity.other.inherited-class, support.class#b35900
support.type.nominal#8b4580italic
support.type.comptime#6b5030italic
entity.name.type.parameter, support.type.parameter#c55a11italic
entity.name.function, support.function, entity.name.operator.custom-literal, support.constant.handlebars#6b6020
variable, variable.other, meta.definition.variable.name, entity.name.variable#2a5580
variable.other.constant, variable.other.enummember, entity.name.constant#1a4570bold
variable.parameter, variable.parameter.function#8b6b00italic
variable.parameter.output#b86000italic bold
variable.other.global#a04060
variable.other.property, variable.other.object.property, support.variable, meta.object-literal.key, meta.property-name, support.type.vendored.property-name, support.type.property-name#2a5580
entity.name.tag, support.class.component#2a7a50
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#707080
entity.other.attribute-name, entity.name.decorator, meta.decorator, entity.name.function.decorator#9a5070
punctuation.accessor, punctuation.accessor.property, punctuation.accessor.tuple, punctuation.separator.dot-access#5a6070
punctuation.bracket, keyword.operator.bracket, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments#707080
punctuation.accessor.pointer#007090
punctuation.accessor.typepun#8b5a20
punctuation.separator, punctuation.separator.comma, punctuation.terminator, punctuation.terminator.statement#707080
invalid, invalid.illegal#cc3333
invalid.deprecated#cc3333italic
support, support.constant, support.other#2a5580
meta.embedded, source.groovy.embedded, meta.template.expression#2d2a26
entity.name.label#2d2a26
meta.preprocessor, entity.name.function.preprocessor, keyword.control.directive#c45020
constant.other.reference.link, string.other.link#2a7a50
markup.heading, heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, entity.name.section, entity.name.section.markdown, markup.heading entity.name#1a6b9abold
punctuation.definition.heading.markdown#3a8bb0
markup.bold, markup.bold.markdown#c45020bold
markup.italic, markup.italic.markdown#8b4580italic
markup.bold markup.italic, markup.italic markup.bold#a04070bold italic
markup.underline#2a7a50underline
markup.strikethrough, markup.strikethrough.markdown#909090strikethrough
markup.underline.link, markup.underline.link.markdown, markup.underline.link.image.markdown, string.other.link.description.markdown#2a7a50
string.other.link.title.markdown#3060c0
markup.inline.raw, markup.inline.raw.string.markdown, markup.raw.inline.markdown#9a6a20
markup.fenced_code.block.markdown, markup.raw.block.markdown#2d2a26
fenced_code.block.language.markdown#b35900
markup.quote, markup.quote.markdown, punctuation.definition.quote.begin.markdown#8a7b99italic
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#0d7377
meta.separator, meta.separator.markdown#c0bdb8
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#2a7a50
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#cc3333
markup.changed, punctuation.definition.changed#9a6a20
meta.diff.range#8b4580bold
meta.diff.header#1a6b9a
support.type.property-name.json, support.type.property-name.json.comments#2a7a50
support.type.property-name.css, support.type.property-name.less, support.type.property-name.scss#2a5580
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.scss, entity.name.tag.css, entity.name.tag.less#9a6a20
support.constant.property-value, support.constant.color, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value#2a7a50