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—