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#292D36
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#292D36
  • activityBarBadge.foreground#D7DAE0
  • badge.background#528BFF
  • badge.foreground#D7DAE0
  • button.background#4550EE
  • button.foreground#FFFFFF
  • button.hoverBackground#515CFF
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#353b45
  • dropdown.border#181A1F
  • editor.background#282C34
  • editor.findMatchHighlightBackground#528BFF3D
  • editor.foreground#ABB2BF
  • editor.lineHighlightBackground#99BBFF0A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#528BFF
  • editorGroup.background#21252B
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#ABB2BF26
  • editorInlayHint.background#2C313A
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#ABB2BF
  • editorLineNumber.foreground#636D83
  • editorRuler.foreground#ABB2BF26
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#ABB2BF26
  • editorWidget.background#21252B
  • editorWidget.border#3A3F4B
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#528BFF
  • input.background#1B1D23
  • input.border#181A1F
  • list.activeSelectionBackground#2C313A
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A66
  • list.inactiveSelectionBackground#292D36
  • list.inactiveSelectionForeground#D7DAE0
  • notebook.cellEditorBackground#2C313A
  • notification.background#21252B
  • peekView.border#528BFF
  • peekViewEditor.background#1B1D23
  • peekViewResult.background#21252B
  • peekViewResult.selectionBackground#2C313A
  • peekViewTitle.background#1B1D23
  • pickerGroup.border#528BFF
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#23262E
  • sideBarSectionHeader.background#2D313A
  • statusBar.background#21252B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#9DA5B4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#282C34
  • tab.activeForeground#D7DAE0
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • titleBar.activeBackground#21252B
  • titleBar.activeForeground#9DA5B4
  • titleBar.inactiveBackground#21252B
  • titleBar.inactiveForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, source#A6B2C0—
variable.parameter.function#A6B2C0—
comment, punctuation.definition.comment#5f697a—
none#A6B2C0—
keyword.operator#A6B2C0—
keyword#CE74D6—
variable#Ef596F—
entity.name.function, meta.require, support.function.any-method#61AFEF—
support.class, entity.name.class, entity.name.type.class#DDB977—
meta.class#A6B2C0—
support.constant#D19A66—
keyword.other.special-method#61AFEF—
meta.function-call variable.function#61AFEF—
storage#CE74D6—
support.function#2BBAC5—
string, constant.other.symbol, entity.other.inherited-class#89CA78—
constant.numeric#D19A66—
none#D19A66—
none#2BBAC5—
constant#D19A66—
entity.name.tag#EF596F—
entity.other.attribute-name#2BBAC5—
entity.other.attribute-name.id, punctuation.definition.entity#2BBAC5—
meta.selector#CE74D6—
none#2BBAC5—
markup.underline.link#61AFEF
markup.heading punctuation.definition.heading, entity.name.section#61AFEF
keyword.other.unit#2BBAC5—
markup.bold, punctuation.definition.bold#D19A66—
markup.italic, punctuation.definition.italic#CE74D6—
markup.raw.inline#89CA78—
string.other.link, punctuation.definition.string.end.markdown#EF596F—
meta.link#2BBAC5—
markup.list#EF596F—
markup.quote#2BBAC5—
meta.separator#A6B2C0—
markup.inserted#89CA78—
markup.deleted#EF596F—
markup.changed#CE74D6—
constant.other.color#2BBAC5—
string.regexp#2BBAC5—
constant.character.escape#2BBAC5—
punctuation.section.embedded, variable.interpolation#BE5046—
invalid.illegal#ffffff—
invalid.broken#2d2d2d—
invalid.deprecated#2c323d—
invalid.unimplemented#2c323d—
source.json meta.structure.dictionary.json string.quoted.double.json#EF596F—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#89CA78—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.quoted.double.json#EF596F—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#89CA78—
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#CE74D6—
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#CE74D6—
source.python meta.function.python meta.function.parameters.python variable.parameter.function.python#2BBAC5—
source.python meta.function-call.python support.type.python#2BBAC5—
source.python keyword.operator.logical.python#CE74D6—
source.python meta.class.python punctuation.definition.inheritance.begin.python#D19A66—
source.python meta.class.python punctuation.definition.inheritance.end.python#D19A66—
source.python meta.function-call.python meta.function-call.arguments.python variable.parameter.function.python#2BBAC5—
text.html.basic source.php.embedded.block.html support.constant.std.php#2BBAC5—
text.html.basic source.php.embedded.block.html meta.namespace.php entity.name.type.namespace.php#D19A66—
source.js meta.function.js support.constant.js#2BBAC5—
text.html.basic` source.php.embedded.block.html constant.other.php#CE74D6—
text.html.basic source.php.embedded.block.html support.other.namespace.php#2BBAC5—
text.tex.latex meta.function.environment.math.latex string.other.math.block.environment.latex meta.definition.label.latex variable.parameter.definition.label.latex#A6B2C0—
text.tex.latex meta.function.emph.latex markup.italic.emph.latex#CE74D6 italic
source.js variable.other.readwrite.js#A6B2C0—
source.js meta.function-call.with-arguments.js variable.function.js#A6B2C0—
source.js meta.group.braces.round meta.group.braces.curly meta.function-call.method.without-arguments.js variable.function.js#A6B2C0—
source.js meta.group.braces.round meta.group.braces.curly variable.other.object.js#A6B2C0—
source.js meta.group.braces.round meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#A6B2C0—
source.js meta.group.braces.round meta.group.braces.curly constant.other.object.key.js punctuation.separator.key-value.js#A6B2C0—
source.js meta.group.braces.round meta.group.braces.curly meta.function-call.method.with-arguments.js variable.function.js#A6B2C0—
source.js meta.function-call.method.with-arguments.js variable.function.js#A6B2C0—
source.js meta.function-call.method.without-arguments.js variable.function.js#A6B2C0—
support.type.property-name#ABB2BF—
string.quoted.double punctuation#98C379—
support.constant#D19A66—
support.type.property-name.json#E06C75—
support.type.property-name.json punctuation#E06C75—
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#56B6C2—
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#56B6C2—
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#ABB2BF—
support.variable.dom.js, support.variable.dom.ts#E06C75—
support.variable.property.dom.js, support.variable.property.dom.ts#E06C75—
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#BE5046—
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#ABB2BF—
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#ABB2BF—
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#ABB2BF—
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#E06C75—
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#E06C75—
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#C678DD—
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#C678DD—
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#ABB2BF—
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#ABB2BF—
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#ABB2BF—
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx#D19A66—
source.js support.variable, source.ts support.variable, source.tsx support.variable#E06C75—
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#D19A66—
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#C678DD—
source.ts keyword.operator, source.tsx keyword.operator#56B6C2—
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #ABB2BF—
constant.language.import-export-all.js, constant.language.import-export-all.ts#E06C75—
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#56B6C2—
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#ABB2BF—
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#E06C75—
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#D19A66—
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#E06C75—
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#98C379—
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator#ABB2BF—
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#98C379—
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#ABB2BF—
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#ABB2BF—
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#ABB2BF—
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator#ABB2BF—
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#ABB2BF—
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#E5C07B—
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#E06C75—
constant.language.json#56B6C2—
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#D19A66—
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#56B6C2—
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition#98C379—
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template#98C379—
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#C678DD—
variable.other.object.js, variable.other.object.ts#ABB2BF—
meta.object-literal.key.js, meta.object-literal.key.ts#E06C75—
source.python constant.other#ABB2BF—
source.python constant#D19A66—
constant.character.format.placeholder.other.python storage#D19A66—
support.variable.magic.python#E06C75—
meta.function.parameters.python#D19A66—
punctuation.separator.annotation.python#ABB2BF—
punctuation.separator.parameters.python#ABB2BF—
entity.name.variable.field.cs#E06C75—
source.cs keyword.operator#ABB2BF—
variable.other.readwrite.cs#ABB2BF—
variable.other.object.cs#ABB2BF—
variable.other.object.property.cs#ABB2BF—
entity.name.variable.property.cs#61AFEF—
storage.type.cs#E5C07B—
keyword.other.unsafe.rust#C678DD—
entity.name.type.rust#56B6C2—
storage.modifier.lifetime.rust#ABB2BF—
entity.name.lifetime.rust#D19A66—
storage.type.core.rust#56B6C2—
meta.attribute.rust#D19A66—
storage.class.std.rust#56B6C2—
markup.raw.block.markdown#ABB2BF—
punctuation.definition.variable.shell#E06C75—
support.constant.property-value.css#ABB2BF—
punctuation.definition.constant.css#D19A66—
punctuation.separator.key-value.scss#E06C75—
punctuation.definition.constant.scss#D19A66—
meta.property-list.scss punctuation.separator.key-value.scss#ABB2BF—
storage.type.primitive.array.java#E5C07B—
entity.name.section.markdown#E06C75—
punctuation.definition.heading.markdown#E06C75—
markup.heading.setext#ABB2BF—
punctuation.definition.bold.markdown#D19A66—
markup.inline.raw.markdown#98C379—
beginning.punctuation.definition.list.markdown#E06C75—
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ABB2BF—
punctuation.definition.metadata.markdown#C678DD—
markup.underline.link.markdown, markup.underline.link.image.markdown#C678DD—
string.other.link.title.markdown, string.other.link.description.markdown#61AFEF—
punctuation.separator.variable.ruby#E06C75—
variable.other.constant.ruby#D19A66—
keyword.operator.other.ruby#98C379—
punctuation.definition.variable.php#E06C75—
meta.class.php#ABB2BF—