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#333842
  • activityBar.foreground#24bfa5
  • activityBarBadge.background#528BFF
  • activityBarBadge.foreground#D7DAE0
  • badge.background#528BFF
  • badge.foreground#D7DAE0
  • button.background#4D78CC
  • button.foreground#FFFFFF
  • button.hoverBackground#6087CF
  • debugIcon.pauseForeground#007fff
  • debugIcon.restartForeground#24bfa5
  • debugIcon.stepIntoForeground#ffd700
  • debugIcon.stepOutForeground#ffff00
  • debugIcon.stopForeground#FF6103
  • debugToolBar.background#020202
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#353b45
  • dropdown.border#181A1F
  • editor.background#282C34
  • editor.lineHighlightBackground#2C313A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#528BFF
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#21252B
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3C4049
  • editorLineNumber.foreground#636D83
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#3C4049
  • editorWidget.background#21252B
  • extensionButton.prominentBackground#00b294
  • extensionButton.prominentHoverBackground#24bfa5
  • 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#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • panel.border#008080
  • panelTitle.activeBorder#8470FF
  • panelTitle.activeForeground#00C78C
  • panelTitle.inactiveForeground#8470FF
  • 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#21252B
  • sideBarSectionHeader.background#333842
  • sideBarSectionHeader.foreground#24bfa5
  • statusBar.background#21252B
  • statusBar.debuggingBackground#483D8B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#9DA5B4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#282C34
  • tab.activeBorderTop#24bfa5
  • tab.border#181A1F
  • tab.hoverBackground#292421
  • tab.hoverBorder#8470FF
  • tab.inactiveBackground#21252B
  • titleBar.activeBackground#21252B
  • titleBar.activeForeground#9DA5B4
  • titleBar.inactiveBackground#21252B
  • titleBar.inactiveForeground#9DA5B4
  • widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
punctuation.separator.comma.js, punctuation.separator.array.json, punctuation.terminator.statement.js, punctuation.terminator.statement.tsx, punctuation.separator.dictionary.pair.json, punctuation.comma.dart, punctuation.terminator.dart, punctuation.separator.comma.ts, punctuation.terminator.statement.ts, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.keyword.css, punctuation.terminator.rule.scss, punctuation.terminator.statement.cs#daa520—
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#ffff20—
punctuation.separator.dictionary.key-value.json#007fff—
source.json meta.structure.dictionary.json support.type.property-name.json#0892d0—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF8C00—
string.quoted.double.json#00C78C—
storage.modifier.ts#FF6103—
entity.name.type.ts, meta.method.declaration.ts, keyword.other.class.cs#FF7D40—
support.type.builtin.ts#0892d0—
string.quoted.multi.python, string.quoted.single.python#24bfa5—
keyword.operator.assignment.python#0892d0—
source.python, keyword.other.namespace.cs#f2d133—
variable.parameter.function.language.python#FF6347italic
variable.parameter.function.language.special.self.python#007fff—
entity.name.type.class.python#ED9121—
support.class.dart, source.dart, support.class#FF9912italic
keyword.operator.comparison.dart#007fffitalic
punctuation.comma.dart#ffff00italic
constant.numeric.dart#c0c0c0italic
constant.numeric.dart#8470FFitalic
keyword.operator.assignment.dart, keyword.operator.ternary.dart, punctuation.dot.dart, storage.type.primitive.dart, keyword.operator.closure.dart#007fff—
support.class.dart#f2d133—
punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs#ffff20—
punctuation.parenthesis.open.cs, punctuation.parenthesis.close.cs#DA70D6—
entity.name.variable.local.cs#FF9912—
keyword.package.go#007fffitalic
keyword.type.go#faa61aitalic
source.go#0892d0—
entity.name.package.go#008080italic
keyword.interface.go#ff9933—
keyword.function.go#FF0000italic
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, punctuation.decorator.js.jsx#ffff20—
punctuation.definition.typeparameters.begin.js.jsx, punctuation.definition.typeparameters.end.js.jsx, punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx, keyword.operator.logical.js.jsx#007fff—
punctuation.definition.string.begin.css, punctuation.definition.string.end.css, punctuation.definition.keyword.less#ffff20—
punctuation.definition.variable.less#daa520—
keyword.other.DML.sql, keyword.operator.comparison.sql#007fff—
support.function.security.sql#00C957—
invalid.deprecated.html#8470FF—
entity.name.type.instance.jsdoc#e32636—
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.operator.ternary.js, punctuation.terminator.rule.css#ffd700—
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#b666d2—
constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.python#00C957italic
constant.language.boolean.false.js#24bfa5italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.separator.key-value.html, punctuation.separator.key-value.css, punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts#007fff—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#FFFF20—
text.html.derivative#c0c0c0—
support.type.property-name.css#1a9fffitalic
support.constant.property-value.css#8470FF—
keyword.other.important.css, punctuation.definition.entity.css, support.type.vendored.property-name.media.css#007fffitalic
entity.other.attribute-name.class.css#faa61a—
support.type.vendored.property-name.css#ff4500—
keyword.operator.logical.and.media.css#24bfa5—
meta.at-rule.media.header.css#00C78C—
variable.parameter.url.css#0892d0—
meta.property-value.css, support.constant.media.css#ff8040—
comment markup.link#5C6370—
entity.name.type#00b294—
entity.other.inherited-class#98FB98italic
keyword#C678DD—
keyword.control#ff4500italic
keyword.operator#ABB2BF—
keyword.other.special-method#61AFEF—
keyword.other.unit#0892d0italic
storage#007fffitalic
storage.type.annotation, storage.type.primitive#C678DD—
storage.modifier.package, storage.modifier.import#ABB2BF—
constant#D19A66—
constant.variable#D19A66—
constant.character.escape#56B6C2—
constant.numeric#c0c0c0—
constant.other.color#56B6C2—
constant.other.symbol#56B6C2—
variable#ff9933—
variable.interpolation#BE5046—
variable.parameter#fd5e53—
string#00C78C—
string.regexp#56B6C2—
string.regexp source.ruby.embedded#E5C07B—
string.other.link#E06C75—
punctuation.definition.comment#5C6370—
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#ABB2BF—
punctuation.definition.heading, punctuation.definition.identity#61AFEF—
punctuation.definition.bold#E5C07Bbold
punctuation.definition.italic#C678DDitalic
punctuation.section.embedded#BE5046—
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#ABB2BF—
support.class#E5C07B—
support.type#56B6C2—
support.function#56B6C2—
support.function.any-method#61AFEF—
entity.name.function#8470FFitalic
punctuation.definition.string.begin.js, punctuation.definition.string.end.js#ffff20—
entity.name.class, entity.name.type.class#FF6103—
entity.name.section#61AFEF—
entity.name.tag#8470FFitalic
entity.other.attribute-name#FF8C00italic
entity.other.attribute-name.id#61AFEF—
meta.class#E5C07B—
meta.class.body#ABB2BF—
meta.method-call, meta.method#ABB2BF—
meta.definition.variable#E06C75—
meta.link#D19A66—
meta.require#61AFEF—
meta.selector#C678DD—
meta.separator#ABB2BF—
meta.tag#ABB2BF—
underline—underline
none#ABB2BF—
invalid.deprecated#523D14—
invalid.illegal#ffffff—
markup.bold#D19A66bold
markup.changed#C678DD—
markup.deleted#E06C75—
markup.italic#C678DDitalic
markup.heading#E06C75—
markup.heading punctuation.definition.heading#61AFEF—
markup.link#C678DD—
markup.inserted#98C379—
markup.quote#D19A66—
markup.raw#98C379—
source.c keyword.operator#C678DD—
source.cpp keyword.operator#C678DD—
source.cs keyword.operator#C678DD—
source.css property-name, source.css property-value#828997—
source.css property-name.support, source.css property-value.support#ABB2BF—
source.gfm markup—italic
source.gfm link entity#61AFEF—
source.go storage.type.string#C678DD—
source.ini keyword.other.definition.ini#E06C75—
source.java storage.modifier.import#E5C07B—
source.java storage.type#E5C07B—
source.java keyword.operator.instanceof#C678DD—
source.java-properties meta.key-pair#E06C75—
source.java-properties meta.key-pair > punctuation#ABB2BF—
source.js keyword.operator#00ffff—
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#C678DD—
source.ruby constant.other.symbol > punctuation#24bfa5—
source.python keyword.operator.logical.python#C678DD—
source.python variable.parameter#D19A66—
meta.attribute.rust#BCC199—
storage.modifier.lifetime.rust, entity.name.lifetime.rust#33E8EC—
keyword.unsafe.rust#CC6B73—
customrule#ABB2BF—
string.quoted.double punctuation#98C379—
support.constant#D19A66—
support.type.property-name.json#FF9912—
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—
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—
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 #daa520—
constant.language.import-export-all.js, constant.language.import-export-all.ts, constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#007fff—
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#FF9912—
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#8470FF—
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—
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#ba55d3—
variable.other.object.cs#FF7D40—
variable.other.object.property.cs#ff4500—
entity.name.variable.property.cs#61AFEF—
storage.type.cs#FF6347—
keyword.other.unsafe.rust#E06C75—
markup.raw.block.markdown#ABB2BF—
punctuation.definition.variable.shell#E06C75—
punctuation.definition.constant.css#daa520—
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#ff4500italic bold
punctuation.definition.heading.markdown#ff9933bold
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, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#007fff—
text.html.markdown#c0c0c0—
punctuation.definition.metadata.markdown#C678DD—
markup.underline.link.markdown, markup.underline.link.image.markdown#0892d0—
string.other.link.title.markdown, string.other.link.description.markdown#FF6347—
punctuation.separator.variable.ruby#E06C75—
variable.other.constant.ruby#D19A66—
keyword.operator.other.ruby#98C379—
punctuation.definition.variable.php#E06C75—
meta.class.php#ABB2BF—