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#12121e
  • activityBar.foreground#c5cae9
  • activityBarBadge.background#3f51b5
  • activityBarBadge.foreground#eeeeee
  • editor.background#0f0f1a
  • editor.findMatchBackground#ffeb3b40
  • editor.findMatchHighlightBackground#ffeb3b20
  • editor.foreground#e8eaf6
  • editor.lineHighlightBackground#1a237e0A
  • editor.selectionBackground#303f9f60
  • editor.selectionHighlightBackground#303f9f20
  • editor.wordHighlightBackground#3f51b530
  • editor.wordHighlightStrongBackground#3f51b550
  • editorBracketHighlight.foreground1#ff6b9d
  • editorBracketHighlight.foreground2#4fc3f7
  • editorBracketHighlight.foreground3#81c784
  • editorBracketHighlight.foreground4#ffb74d
  • editorBracketHighlight.foreground5#ba68c8
  • editorBracketHighlight.foreground6#26a69a
  • editorBracketMatch.background#303f9f40
  • editorBracketMatch.border#7986cb
  • editorCursor.foreground#5c6bc0
  • editorGutter.addedBackground#4caf50
  • editorGutter.background#0f0f1a
  • editorGutter.deletedBackground#f44336
  • editorGutter.modifiedBackground#ffeb3b
  • editorIndentGuide.activeBackground#7986cb
  • editorIndentGuide.background#1a237e30
  • editorLineNumber.activeForeground#c5cae9
  • editorLineNumber.foreground#303f9f
  • sideBar.background#141422
  • sideBar.foreground#c5cae9
  • sideBarTitle.foreground#7986cb
  • statusBar.background#303f9f
  • statusBar.debuggingBackground#f44336
  • statusBar.foreground#eeeeee
  • tab.activeBackground#0f0f1a
  • tab.activeBorder#7986cb
  • tab.activeForeground#e8eaf6
  • tab.inactiveBackground#141422
  • 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#1f1f2a
  • terminal.foreground#f0f1ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.line, comment.block#303f9fitalic
comment.block.documentation, comment.line.documentation#81c784italic
keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import#7986cbbold
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#9fa8da
keyword.operator.word, keyword.operator.typeof, keyword.operator.instanceof#ff6b9d
variable, variable.other, variable.language.this, variable.language.super#e8eaf6
variable.other.property, variable.other.object.property, variable.other.member#81c784
variable.parameter, variable.parameter.function#ffb74ditalic
entity.name.function, entity.name.method, meta.function-call entity.name.function, support.function#9fa8da
meta.function entity.name.function, meta.method entity.name.function#5c6bc0bold
support.function.builtin, support.function.magic#26a69a
entity.name.class, entity.name.type.class, entity.other.inherited-class#ffb74dbold
entity.name.interface, entity.name.type.interface#4fc3f7bold
entity.name.type, support.type, meta.type.annotation#9fa8da
string, string.quoted, string.quoted.single, string.quoted.double#81c784
string.template, string.quoted.template#a5d6a7
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#ffb74d
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#ffb74ditalic
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#81c784
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#ffb74d
punctuation.definition.annotation, storage.type.annotation#ffb74d
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#81c784
punctuation.definition.variable.php, variable.other.php#e8eaf6
entity.name.type.namespace.php#81c784
entity.name.tag.html, punctuation.definition.tag#7986cb
entity.other.attribute-name.html#ffb74d
string.quoted.double.html, string.quoted.single.html#81c784
support.type.property-name.css#4fc3f7
support.constant.property-value.css, constant.numeric.css#81c784
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffb74d
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#999999
string.unquoted.plain.out.yaml#81c784
markup.heading, punctuation.definition.heading.markdown#7986cbbold
markup.bold#ffb74dbold
markup.italic#5c6bc0italic
markup.inline.raw.markdown, markup.fenced_code.block.markdown#26a69a
markup.underline.link.markdown#4fc3f7
markup.quote.markdown#81c784italic
keyword.other.sql#7986cbbold
support.function.sql#9fa8da
punctuation, punctuation.separator, punctuation.terminator#c5cae9
punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces#7986cb