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#0d9dda
  • activityBar.border#1c304a
  • activityBarBadge.background#007acc
  • contrastActiveBorder#eda323
  • disabledForeground#fef1ee
  • editor.background#fffff7
  • editor.foreground#0a121c
  • editor.inactiveSelectionBackground#cccbc6
  • editor.lineHighlightBorder#e5e5e0
  • editor.selectionBackground#cccbc6
  • editorGroupHeader.tabsBackground#c9c9c9
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#a6a6a6
  • editorLineNumber.activeForeground#03A678
  • focusBorder#eda323
  • input.placeholderForeground#a6a6a6
  • list.activeSelectionBackground#cccbc6
  • list.dropBackground#CCCCCC
  • list.hoverBackground#eda323
  • list.inactiveSelectionBackground#F9F9F9
  • list.inactiveSelectionForeground#6C7076
  • menu.background#032d60
  • menu.foreground#cccccc
  • menu.selectionBackground#cccbc6
  • notifications.background#E5E5E0
  • panel.background#f9f9f9
  • panel.border#d7d7d7
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#efefef
  • sideBar.border#d7d7d7
  • sideBar.foreground#0a121c
  • sideBarTitle.foreground#0a121c
  • statusBar.background#0b5cab
  • statusBar.debuggingBackground#fe9339
  • tab.activeBackground#eaf5fe
  • tab.inactiveBackground#cfe8ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#000080
comment#6C7076
constant.language#6bb9f0
constant.numeric#22313F
constant.regexp#9370db
entity.name.tag.html, entity.name.tag.other.html, punctuation.definition.tag.html, entity.name.tag.block.any.html, meta.tag.inline.any.html, entity.name.tag.localname.xml, entity.name.tag.xml#2A150D
entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.localname.xml#804028
text.html.basic, text.xml#AA5535
punctuation.definition.tag.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.preprocessor.xml#2A150D
entity.name.tag.css#914F15
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#AA5535
invalid#FF4500
meta.decorator.js#0A3055italic
meta.import.js, meta.export.js, meta.import.ts, meta.export.ts#1E90FF
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#58007E
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#2A150D
punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.array.json, punctuation.separator.dictionary.key-value.json#005555
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#2C3E50italic bold
keyword.query.field#2C3E50
entity.other.inherited-class.js, entity.name.type.class.js, sharing.modifier.apex, entity.name.type.class.apex#550000
meta.definition.method.js, meta.method.declaration.js, meta.function-call.js, meta.function-call.ts, entity.name.function.apex, meta.function.expression.ts#914F15
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#1460AA
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#0A3055
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#005555
markup.underlineunderline
markup.bold#1E90FFbold
markup.heading#1E90FFbold
markup.italicitalic
markup.inserted#22313F
markup.deleted#f1a9a0
markup.changed#F64747
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#22313F
meta.structure.dictionary.key.python#2C3E50
meta.diff.header#1E90FF
storage#1F3A93
storage.type#1F3A93
storage.modifier#000060
string#ffecdb
string.tag#ffecdb
string.value#ffecdb
string.regexp#ff7f50
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#006060
meta.template.expression#ececec
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#2574A9
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#006060
keyword.other.unit#22313F
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#006060
support.function.git-rebase#2C3E50
constant.sha.git-rebase#22313F
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ECECEC
variable.language#006060
token.info-token#6495ED
token.warn-token#f7ca18
token.error-token#FF4500
token.debug-token#BF5EEC
comment#6C7076
string#0F4880
keyword - keyword.operator#2A150D
keyword.control#2A150D
storage#1F3A93
storage.type#1F3A93
entity.name.type#00b5b5
entity.name.class#00b5b5
support.type#00b5b5
support.class#00b5b5
support.function#0F4880