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—
ThemeDatabase All Themes by enes ozturk - VS Code Theme