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#0a121c
  • activityBar.border#1c304a
  • activityBarBadge.background#007acc
  • contrastActiveBorder#4dddff
  • editor.background#0a121c
  • editor.foreground#ECECEC
  • editor.inactiveSelectionBackground#3a3d41
  • editor.selectionBackground#315482
  • editor.selectionHighlightBackground#add6ff26
  • editorGroupHeader.tabsBackground#0a121c
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorLineNumber.activeForeground#00AA00
  • focusBorder#00AA00
  • input.placeholderForeground#a6a6a6
  • list.dropBackground#383b3d
  • list.hoverBackground#32445c
  • list.inactiveSelectionBackground#315482
  • menu.background#252526
  • menu.foreground#cccccc
  • notifications.background#152438
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#152438
  • sideBar.foreground#ffffff
  • sideBarTitle.foreground#bbbbbb
  • tab.activeBackground#315482
  • tab.inactiveBackground#152438

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#000080
comment#807D67
constant.language#6bb9f0
constant.numeric#c8f7c5
constant.regexp#9370db
entity.name.tag.html, entity.name.tag.other.html, entity.name.tag.block.any.html, meta.tag.inline.any.html, entity.name.tag.localname.xml, entity.name.tag.xml#00bFFF
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#1E8BC3
punctuation.definition.tag.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.preprocessor.xml#FEFEFE
entity.name.tag.css#f9bf3b
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d7ba7d
invalid#FF4500
constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.boolean.true.ts, constant.language.boolean.false.ts, constant.language.boolean.true.apex, constant.language.boolean.false.apex#19B5FE
meta.decorator.jsitalic
meta.import.js, meta.export.js, meta.import.ts, meta.export.ts#1E90FF
keyword.control.import.js, keyword.control.from.js, keyword.control.export.js, keyword.control.conditional, keyword.type.apex, keyword.other.class.apex, keyword.control.import.ts, keyword.control.export.ts#52B3D9
keyword.operator.query, keyword.operator.assignment, keyword.operator.conditional.colon, keyword.operator.comparison, keyword.operator.relational, keyword.operator.arithmetic, keyword.operator.increment, keyword.operator.decrement, keyword.operator.iterator.colon.apex#e4f1feitalic bold
keyword.query.field#e4f1fe
entity.other.inherited-class.js, entity.name.type.class.js, sharing.modifier.apex#00A4A6
meta.definition.method.js, meta.method.declaration.js, meta.function-call.js, meta.function-call.ts, entity.name.function.apex, meta.function.expression.ts#00BFFF
variable.parameter.js, meta.parameters.js, meta.objectliteral.js, meta.block.js, meta.block.ts, entity.name.variable.parameter.apex, meta.definition.variable.ts, variable.other.object.ts, meta.var.expr.ts, variable.other.readwrite.ts, meta.var.expr.ts#E0FFFF
variable.other.constant.js, variable.object.property.js, variable.other.object.js, variable.other.property.js, variable.other.readwrite.js, variable.language.this.js, entity.name.variable.local.apex, variable.other.readwrite.apex, entity.name.variable.property.apex, entity.name.variable.field.apex, variable.other.object.apex, variable.object.readwrite.apex, variable.other.object.property.apex#e4f1fe
punctuation.squarebracket.close.apex, punctuation.squarebracket.open.apex, punctuation.parenthesis.open.apex, punctuation.parenthesis.close.apex, punctuation.definition.typeparameters.begin.apex, punctuation.definition.typeparameters.end.apex, punctuation.curlybrace.close.apex, punctuation.curlybrace.open.apex, punctuation.accessor.apex, punctuation.terminator.statement.apex, punctuation.accessor.js, meta.brace.round.js, meta.brace.square.js, punctuation.definition.block.js, punctuation.terminator.statement.js, punctuation.separator.comma.js, punctuation.separator.key-value.js#FEFEFE
markup.underlineunderline
markup.bold#1E90FFbold
markup.heading#1E90FFbold
markup.italicitalic
markup.inserted#c8f7c5
markup.deleted#f1a9a0
markup.changed#52b3d9
punctuation.definition.quote.begin.markdown#87d37c
punctuation.definition.list.begin.markdown#6495ed
markup.inline.raw#f1a9a0
meta.preprocessor#7bacdd
meta.preprocessor.string#ffecdb
meta.preprocessor.numeric#c8f7c5
meta.structure.dictionary.key.python#e4f1fe
meta.diff.header#1E90FF
storage#1E90FF
storage.type#1E90FF
storage.modifier#1E90FF
string#ffecdb
string.tag#ffecdb
string.value#ffecdb
string.regexp#ff7f50
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#1E90FF
meta.template.expression#ececec
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#00e0e0
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#1E90FF
keyword.other.unit#c8f7c5
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#1E90FF
support.function.git-rebase#e4f1fe
constant.sha.git-rebase#c8f7c5
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ECECEC
variable.language#1E90FF
token.info-token#6495ED
token.warn-token#f7ca18
token.error-token#FF4500
token.debug-token#BF5EEC
string#ADD8E6
keyword - keyword.operator#1E8BC3
keyword.control#1E8BC3
storage#1E8BC3
storage.type#1E8BC3
constant.numeric#DADFE1
entity.name.type#00b5b5
entity.name.class#00b5b5
support.type#00b5b5
support.class#00b5b5
support.function#00BFFF