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