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#F7F7F7
  • activityBar.border#EEEEEE
  • activityBar.foreground#38484F
  • activityBarBadge.background#3E7AE2
  • activityBarBadge.foreground#FFFFFF
  • badge.background#526FFF
  • badge.foreground#FFFFFF
  • button.background#5871EF
  • button.foreground#FFFFFF
  • button.hoverBackground#6B83ED
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#FFFFFF
  • dropdown.border#DBDBDC
  • editor.background#F7F7F7
  • editor.lineHighlightBackground#F2F2F2
  • editor.selectionBackground#E5E5E6
  • editorCursor.foreground#526FFF
  • editorGroup.border#DBDBDC
  • editorGroupHeader.tabsBackground#EAEAEB
  • editorHoverWidget.background#EAEAEB
  • editorHoverWidget.border#DBDBDC
  • editorIndentGuide.background#D3D4D5
  • editorLineNumber.foreground#9D9D9F
  • editorSuggestWidget.background#EAEAEB
  • editorSuggestWidget.border#DBDBDC
  • editorSuggestWidget.highlightForeground#3E7AE2
  • editorSuggestWidget.selectedBackground#FFFFFF
  • editorWhitespace.foreground#D3D4D5
  • editorWidget.background#EAEAEB
  • extensionButton.prominentBackground#3BBA54
  • extensionButton.prominentHoverBackground#4CC263
  • focusBorder#526FFF
  • input.background#FFFFFF
  • input.border#DBDBDC
  • list.activeSelectionBackground#cbd8f0
  • list.activeSelectionForeground#38484F
  • list.focusBackground#DBDBDC
  • list.highlightForeground#121417
  • list.hoverBackground#DBDBDC66
  • list.inactiveSelectionBackground#DBDBDC
  • list.inactiveSelectionForeground#3E7AE2
  • peekView.border#526FFF
  • peekViewEditor.background#FFFFFF
  • peekViewResult.background#EAEAEB
  • peekViewResult.selectionBackground#DBDBDC
  • peekViewTitle.background#FFFFFF
  • pickerGroup.border#526FFF
  • pickerGroup.foreground#3E7AE2
  • progressBar.background#3E7AE2
  • scrollbarSlider.activeBackground#E5737350
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#F7F7F7
  • sideBar.border#EEEEEE
  • sideBarSectionHeader.background#EEEEEE
  • statusBar.background#EAEAEB
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#424243
  • statusBar.noFolderBackground#EAEAEB
  • statusBarItem.hoverBackground#DBDBDC
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#3E7AE2
  • tab.border#DBDBDC
  • tab.inactiveBackground#EAEAEB
  • terminal.ansiBlack#38484F
  • terminal.ansiBlue#3E7AE2
  • terminal.ansiBrightWhite#F0F0F0
  • terminal.ansiGreen#1A8F52
  • textLink.foreground#3E7AE2
  • titleBar.activeBackground#EAEAEB
  • titleBar.activeForeground#424243
  • titleBar.inactiveBackground#EAEAEB
  • titleBar.inactiveForeground#424243

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#808080italic
comment markup.link#A0A1A7
entity.name.type#9A30AD
keyword#3E7AE2bold
keyword.control#3E7AE2bold
keyword.operator#38484F
storage#3E7AE2
storage.type.primitive#3E7AE2
storage.type.annotation#9A30AD
storage.modifier.package, storage.modifier.import#3E7AE2
constant#9A30AD
constant.language#3E7AE2
constant.variable#9A30AD
constant.character.escape#3E7AE2
constant.numeric#C33B30
constant.other#3E7AE2
constant.other.color#0184BC
variable#38484F
variable.interpolation#3E7AE2
variable.parameter#38484F
string#1A8F52
string.regexp#38484F
string.other.link#3E7AE2
punctuation.definition.comment#A0A1A7
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#38484F
punctuation.definition.heading, punctuation.definition.identity#3E7AE2
punctuation.definition.bold#38484Fbold
punctuation.definition.italic#38484Fitalic
punctuation.section.embedded#9A30AD
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#38484F
support.class#9A30AD
support.type#9A30AD
support.function#3E7AE2
support.function.any-method#3E7AE2
entity.name.function#D52262
entity.name.class, entity.name.type.class#9A30AD
entity.name.section#3E7AE2
entity.name.tag#3E7AE2
entity.other.attribute-name#9A30AD
entity.other.attribute-name.id#3E7AE2
meta.class#9A30AD
meta.class.body#38484F
meta.method-call, meta.method#38484F
meta.selector#9A30AD
meta.separator#38484F
meta.tag#38484F
none#38484F
invalid.deprecated#000000
invalid.illegal#000000
markup.bold#9A30ADbold
markup.changed#9A30AD
markup.deleted#9A30AD
markup.italic#9A30ADitalic
markup.heading#3E7AE2
markup.heading punctuation.definition.heading#3E7AE2
markup.link#9A30AD
markup.inserted#50A14F
markup.quote#9A30AD
markup.raw#50A14F
source.c keyword.operator#38484F
source.cpp keyword.operator#38484F
source.cs keyword.operator#38484F
source.css property-name, source.css property-value#38484F
source.css property-name.support, source.css property-value.support#38484F
source.gfm link entity#3E7AE2
source.go storage.type.string#3E7AE2
source.ini keyword.other.definition.ini#3E7AE2
source.java storage.modifier.import#3E7AE2
source.java storage.type#3E7AE2
source.java keyword.operator.instanceof#3E7AE2
source.java-properties meta.key-pair#3E7AE2
source.java-properties meta.key-pair > punctuation#38484F
source.js keyword.operator#38484F
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void#3E7AE2
source.js storage.type.function.js#3E7AE2
source.json meta.structure.dictionary.json > string.quoted.json#3E7AE2
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#3E7AE2
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#50A14F
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#0184BC
source.python keyword.operator.logical.python#3E7AE2
source.python variable.parameter#9A30AD
meta.attribute.rust#3E7AE2
storage.modifier.lifetime.rust, entity.name.lifetime.rust#3E7AE2
keyword.unsafe.rust#3E7AE2
customrule#38484F
support.type.property-name#38484F
string.quoted.double punctuation#50A14F
support.constant#9A30AD
support.type.property-name.json#D52262
support.type.property-name.json punctuation#D52262
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#0184BC
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#0184BC
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#38484F
support.variable.dom.js, support.variable.dom.ts#D52262
support.variable.property.dom.js, support.variable.property.dom.ts#D52262
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#9A30AD
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#3E7AE2
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#38484F
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#38484F
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#D52262
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#3E7AE2
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#3E7AE2
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#3E7AE2
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#38484F
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#38484F
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#38484F
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#9A30AD
source.js support.variable, source.ts support.variable, source.tsx support.variable#9A30AD
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#9A30AD
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#3E7AE2
source.ts keyword.operator, source.tsx keyword.operator#3E7AE2
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #38484F
constant.language.import-export-all.js, constant.language.import-export-all.ts#3E7AE2
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#3E7AE2
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#3E7AE2
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#9A30AD
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#9A30AD
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#9A30AD
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#50A14F
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#38484F
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#50A14F
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#38484F
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#38484F
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#38484F
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#38484F
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#38484F
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#3E7AE2
constant.language.json#3E7AE2
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#9A30AD
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#3E7AE2
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#50A14F
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#50A14F
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#3E7AE2
source.python constant.other#38484F
source.python constant#9A30AD
constant.character.format.placeholder.other.python storage#9A30AD
support.variable.magic.python#9A30AD
meta.function.parameters.python#9A30AD
punctuation.separator.annotation.python#38484F
punctuation.separator.parameters.python#38484F
entity.name.variable.field.cs#9A30AD
source.cs keyword.operator#38484F
variable.other.readwrite.cs#38484F
variable.other.object.cs#38484F
variable.other.object.property.cs#38484F
entity.name.variable.property.cs#9A30AD
storage.type.cs#9A30AD
keyword.other.unsafe.rust#3E7AE2
markup.raw.block.markdown#38484F
punctuation.definition.variable.shell#3E7AE2
support.constant.property-value.css#9A30AD
punctuation.definition.constant.css#9A30AD
punctuation.separator.key-value.scss#D52262
punctuation.definition.constant.scss#9A30AD
meta.property-list.scss punctuation.separator.key-value.scss#38484F
storage.type.primitive.array.java#3E7AE2
entity.name.section.markdown#3E7AE2
punctuation.definition.heading.markdown#3E7AE2
markup.heading.setext#38484F
punctuation.definition.bold.markdown#986801
markup.inline.raw.markdown#50A14F
beginning.punctuation.definition.list.markdown#E45649
markup.quote.markdown#A0A1A7italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#38484F
punctuation.definition.metadata.markdown#A626A4
markup.underline.link.markdown, markup.underline.link.image.markdown#A626A4
string.other.link.title.markdown, string.other.link.description.markdown#3E7AE2
punctuation.separator.variable.ruby#38484F
variable.other.constant.ruby#9A30AD
keyword.operator.other.ruby#9A30AD
punctuation.definition.variable.php#9A30AD
meta.class.php#38484F