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#0f1e1e
  • activityBar.foreground#b2dfdb
  • activityBarBadge.background#009688
  • activityBarBadge.foreground#eeeeee
  • editor.background#0d1a1a
  • editor.findMatchBackground#ffeb3b40
  • editor.findMatchHighlightBackground#ffeb3b20
  • editor.foreground#e0f2f1
  • editor.lineHighlightBackground#00695c0A
  • editor.selectionBackground#00897b60
  • editor.selectionHighlightBackground#00897b20
  • editor.wordHighlightBackground#00968830
  • editor.wordHighlightStrongBackground#00968850
  • editorBracketHighlight.foreground1#ff6b9d
  • editorBracketHighlight.foreground2#4fc3f7
  • editorBracketHighlight.foreground3#81c784
  • editorBracketHighlight.foreground4#ffb74d
  • editorBracketHighlight.foreground5#ba68c8
  • editorBracketHighlight.foreground6#26a69a
  • editorBracketMatch.background#00897b40
  • editorBracketMatch.border#4db6ac
  • editorCursor.foreground#26a69a
  • editorGutter.addedBackground#4caf50
  • editorGutter.background#0d1a1a
  • editorGutter.deletedBackground#f44336
  • editorGutter.modifiedBackground#ffeb3b
  • editorIndentGuide.activeBackground#4db6ac
  • editorIndentGuide.background#00695c30
  • editorLineNumber.activeForeground#b2dfdb
  • editorLineNumber.foreground#00796b
  • sideBar.background#112020
  • sideBar.foreground#b2dfdb
  • sideBarTitle.foreground#4db6ac
  • statusBar.background#00796b
  • statusBar.debuggingBackground#f44336
  • statusBar.foreground#eeeeee
  • tab.activeBackground#0d1a1a
  • tab.activeBorder#4db6ac
  • tab.activeForeground#e0f2f1
  • tab.inactiveBackground#112020
  • terminal.ansiBlack#263238
  • terminal.ansiBlue#2196f3
  • terminal.ansiBrightBlack#37474f
  • terminal.ansiBrightBlue#448aff
  • terminal.ansiBrightCyan#18ffff
  • terminal.ansiBrightGreen#69f0ae
  • terminal.ansiBrightMagenta#ff4081
  • terminal.ansiBrightRed#ff5252
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#4caf50
  • terminal.ansiMagenta#e91e63
  • terminal.ansiRed#f44336
  • terminal.ansiWhite#eceff1
  • terminal.ansiYellow#ffeb3b
  • terminal.background#1d2a2a
  • terminal.foreground#e8fafa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.line, comment.block#00796bitalic
comment.block.documentation, comment.line.documentation#80cbc4italic
keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import#4db6acbold
keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.trycatch#ff6b9dbold
storage.type, storage.modifier, storage.type.class, storage.type.function, storage.type.interface#4fc3f7bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#80cbc4
keyword.operator.word, keyword.operator.typeof, keyword.operator.instanceof#ff6b9d
variable, variable.other, variable.language.this, variable.language.super#e0f2f1
variable.other.property, variable.other.object.property, variable.other.member#a7ffeb
variable.parameter, variable.parameter.function#ffab40italic
entity.name.function, entity.name.method, meta.function-call entity.name.function, support.function#26a69a
meta.function entity.name.function, meta.method entity.name.function#00897bbold
support.function.builtin, support.function.magic#4db6ac
entity.name.class, entity.name.type.class, entity.other.inherited-class#ffab40bold
entity.name.interface, entity.name.type.interface#4fc3f7bold
entity.name.type, support.type, meta.type.annotation#80cbc4
string, string.quoted, string.quoted.single, string.quoted.double#a7ffeb
string.template, string.quoted.template#b2dfdb
string.interpolated, meta.template.expression#4fc3f7
string.regexp, string.regex#ff9800
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#ffab40
constant.language.boolean, constant.language.true, constant.language.false#ff6b9dbold
constant.language.null, constant.language.undefined, constant.language.none#f44336bold
constant.other, variable.other.constant#ffab40italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#4fc3f7
keyword.control.flow.async, keyword.control.flow.await#ff6b9ditalic
meta.object-binding-pattern-variable entity.name.binding, meta.array-binding-pattern-variable entity.name.binding#a7ffeb
variable.language.special.self.python, variable.language.special.cls.python#4fc3f7italic
support.function.magic.python#ff9800
entity.name.function.decorator.python, punctuation.definition.decorator.python#ffab40
punctuation.definition.annotation, storage.type.annotation#ffab40
punctuation.definition.typeparameters, entity.name.type.parameter#4fc3f7
keyword.control.directive, meta.preprocessor#4fc3f7
keyword.operator.pointer, keyword.operator.address#ff6b9d
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust#ff9800
entity.name.function.macro.rust, punctuation.definition.macro.rust#4fc3f7
entity.name.package.go#a7ffeb
punctuation.definition.variable.php, variable.other.php#e0f2f1
entity.name.type.namespace.php#a7ffeb
entity.name.tag.html, punctuation.definition.tag#4db6ac
entity.other.attribute-name.html#ffab40
string.quoted.double.html, string.quoted.single.html#a7ffeb
support.type.property-name.css#4fc3f7
support.constant.property-value.css, constant.numeric.css#a7ffeb
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffab40
keyword.other.unit.css#ff9800
source.json meta.structure.dictionary.json support.type.property-name.json#eeeeee
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eeeeee
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eeeeee
entity.name.tag.yaml#4db6ac
string.unquoted.plain.out.yaml#a7ffeb
markup.heading, punctuation.definition.heading.markdown#4db6acbold
markup.bold#ffab40bold
markup.italic#4fc3f7italic
markup.inline.raw.markdown, markup.fenced_code.block.markdown#26a69a
markup.underline.link.markdown#4fc3f7
markup.quote.markdown#a7ffebitalic
keyword.other.sql#4db6acbold
support.function.sql#26a69a
punctuation, punctuation.separator, punctuation.terminator#b2dfdb
punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces#4db6ac
source.graphql keyword.operation, source.graphql meta.type.interface#26c6dabold
source.graphql variable.graphql, source.graphql meta.selection-set#80cbc4
keyword.other.special-method.dockerfile, source.dockerfile keyword.operator.flag#f48fb1bold
entity.name.type.anchor.yaml, variable.other.alias.yaml#b39ddbitalic
variable.other.special.shell, variable.other.positional.shell, variable.other.normal.shell#ce93d8
meta.decorator.ts entity.name.function, meta.decorator.tsx entity.name.function#dce775italic
comment.block.documentation storage.type.class.jsdoc, comment.block.documentation punctuation.definition.block.tag.jsdoc#aed581bold
markup.changed, meta.diff.header.git#fff176
meta.decorator.python, meta.decorator.identifier.python#ffb74ditalic
meta.attribute.rust, meta.attribute.identifier.rust#ff9800italic