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
emphasis—italic
strong—bold
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.js—italic
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.underline—underline
markup.bold#1E90FFbold
markup.heading#1E90FFbold
markup.italic—italic
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—