Skip to main content
Coding Theme

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#474B4D
  • activityBar.foreground#a9b7c6
  • badge.background#cc7832
  • debugToolBar.background#474B4D
  • editor.background#282828
  • editor.foreground#a9b7c6
  • editor.lineHighlightBackground#323232
  • editor.selectionBackground#37393B
  • editorGroup.dropBackground#3c3f41
  • editorGroupHeader.tabsBackground#313335
  • editorHoverWidget.background#313335
  • editorHoverWidget.border#555
  • editorIndentGuide.activeBackground#474B4D
  • editorIndentGuide.background#373737
  • editorLineNumber.activeForeground#a9b7c6
  • editorLineNumber.foreground#606366
  • editorUnnecessary.foreground#808080
  • editorWhitespace.foreground#373737
  • editorWidget.background#313335
  • focusBorder#555
  • input.background#3c3f41
  • list.activeSelectionBackground#3c3f41
  • list.dropBackground#37393B
  • list.focusBackground#3c3f41
  • list.hoverBackground#37393B
  • list.inactiveSelectionBackground#3c3f41
  • panel.border#3c3f41
  • peekView.border#555
  • peekViewEditor.background#2E2F30
  • peekViewEditor.matchHighlightBackground#3c3f41
  • peekViewResult.background#313335
  • peekViewResult.matchHighlightBackground#3c3f41
  • peekViewResult.selectionBackground#37393B
  • peekViewTitle.background#2b2b2b
  • scrollbar.shadow#ffffff00
  • sideBar.background#313335
  • sideBarSectionHeader.background#474b4d
  • tab.border#313335
  • tab.inactiveBackground#313335
  • titleBar.activeBackground#474B4D
  • titleBar.activeForeground#a9b7c6
  • titleBar.inactiveBackground#313335
  • widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
comment#808080
keyword.operator, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.arithmetic, keyword.operator.spread#a9b7c6
meta.tag.tsx keyword.operator.assignment#638954
punctuation.separator.comma, punctuation.separator.parameter, punctuation.terminator.statement, punctuation.terminator.rule.css#cc7832
string, string.character.escape, string.template.quoted, string.template.quoted.punctuation, string.template.quoted.punctuation.single, string.template.quoted.punctuation.double, string.type.declaration.annotation, string.template.quoted.punctuation.tag#628953
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#cc7832
expression.string, meta.template.expression#a9b7c6
constant.numeric#5d98bf
constant.language, variable.language#cc7832
constant.character, constant.other#9e73ad
keyword, keyword.operator.new, keyword.operator.delete, keyword.operator.static, keyword.operator.this, keyword.operator.expression#cc7832
meta.return.type, meta.type.annotation, meta.type.parameters, support.type.primitive#5d98bf
meta.type.annotation punctuation.definition.block#a9b7c6
storage, storage.type, storage.modifier, storage.arrow#cc7832
support.function, entity.name.function#ffc66d
annotation.meta.ts, annotation.meta.tsx#a9b7c6
variable.parameter, operator.rest.parameters#a9b7c6
variable.property, variable.constant, variable.other.property, variable.other.constant, variable.other.object.property, variable.object.property, support.variable.property, meta.definition.property entity.name.function#9e73ad
quote.module#628953
markup.heading#cc7832
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#e8bf6a
entity.other.attribute-name#a9b7c6
meta.object-literal.key#9e72ad
storage.modifier.ts#cc7832
ts.cast.expr, ts.meta.entity.class.method.new.expr.cast, ts.meta.entity.type.name.new.expr.cast, ts.meta.entity.type.name.var-single-variable.annotation, tsx.cast.expr, tsx.meta.entity.class.method.new.expr.cast, tsx.meta.entity.type.name.new.expr.cast, tsx.meta.entity.type.name.var-single-variable.annotation#5d98bf
ts.meta.type.support, ts.meta.type.entity.name, ts.meta.class.inherited-class, tsx.meta.type.support, tsx.meta.type.entity.name, tsx.meta.class.inherited-class, type-declaration, enum-declaration#5d98bf
function-declaration, method-declaration, method-overload-declaration, type-fn-type-parameters#ffc66d
comment.block.documentation#628953
storage.type.class.jsdoc#cc7832
constant.language.import-export-all#a9b7c6
objectliteral.key.separator, punctuation.separator.key-value#a9b7c6
regex#a9b7c6italic
ts.meta.entity.name.namespace, tsx.meta.entity.name.namespace#a9b7c6
regex.character-class#a9b7c6
entity.name.type.class#a9b7c6
entity.name.type.instance.jsdoc#ffc66d
yaml.entity.name, yaml.string.entity.name#cc7832
yaml.string.out#a9b7c6
meta.brace.square.ts, block.support.module, block.support.type.module, block.support.function.variable, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end#a9b7c6
string.regexp#cc7832
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#ffc66d
constant.other.character-class.regexp, constant.character.escape.ts#a7b8c8
expr.regex.or.operator#a7b8c8
string.template.tag, string.template.punctuation.tag, string.quoted.punctuation.tag, string.quoted.embedded.tag, string.quoted.double.tag#628953
tag.punctuation.begin.arrow.parameters.embedded, tag.punctuation.end.arrow.parameters.embedded#a9b7c6
object-literal.object.member.key.field.other, object-literal.object.member.key.accessor, object-literal.object.member.key.array.brace.square#a9b7c6
entity.name.tag.css#cc7832
property-list.property-value, property-list.constant#638954
support.type.property-name.variable.css, support.type.property-name.variable.scss, variable.scss#5d98bf
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.scss#ffc66d
property-list.property-value.rgb-value, keyword.other.unit.css, keyword.other.unit.scss, punctuation.definition.constant.css, constant.other.color.rgb-value.hex.css#5d98bf
property-list.property-value.function#ffc66d
support.constant.property-value.css, support.constant.property-value.scss#a5c261
css.entity.name.tag, scss.entity.name.tag#cc7832
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#ffc66d
keyword.scss, keyword.css#cc7832
triple-slash.tag#a9b7c6italic
Darcula Extra by kraftwer1 - VS Code Theme