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#323438
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528BFF
  • activityBarBadge.foreground#D7DAE0
  • badge.background#528BFF
  • badge.foreground#D7DAE0
  • button.background#4D78CC
  • button.foreground#FFFFFF
  • button.hoverBackground#6087CF
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#232427
  • dropdown.border#181A1F
  • editor.background#323438
  • editor.findMatchHighlightBackground#528BFF3D
  • editor.foreground#00a8f7
  • editor.lineHighlightBackground#2324275e
  • editor.selectionBackground#535761
  • editorBracketHighlight.foreground1#ffe553
  • editorBracketHighlight.foreground2#ffe553
  • editorBracketHighlight.foreground3#ffe553
  • editorBracketHighlight.foreground4#ffe553
  • editorBracketHighlight.foreground5#ffe553
  • editorBracketHighlight.foreground6#ffe553
  • editorBracketHighlight.unexpectedBracket.foreground#ffe553
  • editorCursor.foreground#8eb4ff
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#232427
  • editorHoverWidget.background#232427
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground1#626772
  • editorIndentGuide.background1#f0f0f026
  • editorInlayHint.background#232427
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#f0f0f0
  • editorLineNumber.foreground#70747a
  • editorRuler.foreground#f0f0f026
  • editorSuggestWidget.background#232427
  • editorSuggestWidget.border#528cffc0
  • editorSuggestWidget.selectedBackground#528BFF3D
  • editorWarning.foreground#e6a0a0
  • editorWhitespace.foreground#f0f0f026
  • editorWidget.background#232427
  • editorWidget.border#232427
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#528BFF
  • input.background#0f0f0f
  • input.border#181A1F
  • list.activeSelectionBackground#323438
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#232427
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A66
  • list.inactiveSelectionBackground#232427
  • list.inactiveSelectionForeground#D7DAE0
  • notebook.cellEditorBackground#232427
  • peekView.border#528BFF
  • peekViewEditor.background#0f0f0f
  • peekViewResult.background#232427
  • peekViewResult.selectionBackground#232427
  • peekViewTitle.background#0f0f0f
  • pickerGroup.border#528BFF
  • scrollbarSlider.activeBackground#5a5a5a91
  • scrollbarSlider.background#5a5a5a4b
  • scrollbarSlider.hoverBackground#5a5a5a91
  • sideBar.background#232427
  • sideBarSectionHeader.background#323438
  • statusBar.background#232427
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#d6dbe4
  • statusBar.noFolderBackground#232427
  • statusBarItem.hoverBackground#232427
  • tab.activeBackground#323438
  • tab.activeForeground#D7DAE0
  • tab.border#181A1F
  • tab.inactiveBackground#232427
  • titleBar.activeBackground#232427
  • titleBar.activeForeground#d6dbe4
  • titleBar.inactiveBackground#232427
  • titleBar.inactiveForeground#d6dbe4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#696F7395italic
comment markup.link#696F7395
entity.name.type#ffaa0d
entity.other.inherited-class#ffaa0d
keyword#c87edf
keyword.control#c87edf
keyword.operator#c87edf
keyword.other.special-method#dbdbdb
keyword.other.unit#ffaa0d
storage#c87edf
storage.type.annotation, storage.type.primitive#c87edf
storage.modifier.package, storage.modifier.import#00a8f7
constant#ffaa0d
constant.variable#ffaa0d
constant.character.escape#00a8f7
constant.numeric#ffaa0d
constant.other.color#00a8f7
constant.other.symbol#00a8f7
variable#eb3b49
variable.interpolation#eb3b49
variable.parameter#00a8f7
string#61dd09
string > source, string embedded#00a8f7
string.regexp#00a8f7
string.regexp source.ruby.embedded#ffaa0d
string.other.link#eb3b49
punctuation.definition.comment#696F7395
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#00a8f7
punctuation.definition.heading, punctuation.definition.identity#0099ff
punctuation.definition.bold#ffaa0dbold
punctuation.definition.italic#c87edfitalic
punctuation.section.embedded#eb3b49
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#00a8f7
support.class#ffaa0d
support.type#00a8f7
support.function#00a8f7
support.function.any-method#dbdbdb
entity.name.function#dbdbdb
entity.name.class, entity.name.type.class#ffaa0d
entity.name.section#dbdbdb
entity.name.tag#eb3b49
entity.other.attribute-name#ffaa0d
entity.other.attribute-name.id#dbdbdb
meta.class#ffaa0d
meta.class.body#00a8f7
meta.method-call, meta.method#00a8f7
meta.definition.variable#eb3b49
meta.link#ffaa0d
meta.require#dbdbdb
meta.selector#c87edf
meta.separator#00a8f7
meta.tag#00a8f7
underline
none#00a8f7
invalid.deprecated#523D14
invalid.illegal#ffffff
markup.bold#ffaa0dbold
markup.changed#c87edf
markup.deleted#eb3b49
markup.italic#c87edfitalic
markup.heading#eb3b49
markup.heading punctuation.definition.heading#dbdbdb
markup.link#00a8f7
markup.inserted#09a1dd
markup.quote#ffaa0d
markup.raw#61dd09
source.c keyword.operator#c87edf
source.cpp keyword.operator#c87edf
source.cs keyword.operator#c87edf
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#00a8f7
source.elixir source.embedded.source#00a8f7
source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition#dbdbdb
source.elixir variable.definition, source.elixir variable.anonymous#c87edf
source.elixir parameter.variable.function#ffaa0ditalic
source.elixir quoted#61dd09
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty#eb3b49
source.elixir readwrite.module punctuation#eb3b49
source.elixir regexp.section, source.elixir regexp.string#eb3b49
source.elixir separator, source.elixir keyword.operator#ffaa0d
source.elixir variable.constant#ffaa0d
source.elixir array, source.elixir scope, source.elixir section#828997
source.gfm markup
source.gfm link entity#dbdbdb
source.go storage.type.string#c87edf
source.ini keyword.other.definition.ini#eb3b49
source.java storage.modifier.import#ffaa0d
source.java storage.type#ffaa0d
source.java keyword.operator.instanceof#c87edf
source.java-properties meta.key-pair#eb3b49
source.java-properties meta.key-pair > punctuation#00a8f7
source.js keyword.operator#00a8f7
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#c87edf
source.ts keyword.operator#00a8f7
source.flow keyword.operator#00a8f7
source.json meta.structure.dictionary.json > string.quoted.json#eb3b49
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#eb3b49
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#61dd09
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#00a8f7
ng.interpolation#eb3b49
ng.interpolation.begin, ng.interpolation.end#dbdbdb
ng.interpolation function#eb3b49
ng.interpolation function.begin, ng.interpolation function.end#dbdbdb
ng.interpolation bool#ffaa0d
ng.interpolation bracket#00a8f7
ng.pipe, ng.operator#00a8f7
ng.tag#00a8f7
ng.attribute-with-value attribute-name#ffaa0d
ng.attribute-with-value string#c87edf
ng.attribute-with-value string.begin, ng.attribute-with-value string.end#00a8f7
source.ruby constant.other.symbol > punctuation
source.php class.bracket#00a8f7
source.python keyword.operator.logical.python#c87edf
source.python variable.parameter#ffaa0d
customrule#00a8f7
support.type.property-name#00a8f7
string.quoted.double punctuation#61dd09
support.constant#ffaa0d
support.type.property-name.json#eb3b49
support.type.property-name.json punctuation#eb3b49
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#00a8f7
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#00a8f7
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#00a8f7
support.variable.dom.js, support.variable.dom.ts#eb3b49
support.variable.property.dom.js, support.variable.property.dom.ts#eb3b49
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#eb3b49
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#00a8f7
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#00a8f7
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#00a8f7
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#eb3b49
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#eb3b49
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#c87edf
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#c87edf
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#00a8f7
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#00a8f7
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#00a8f7
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#ffaa0d
source.js support.variable, source.ts support.variable, source.tsx support.variable#eb3b49
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#ffaa0d
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#c87edf
source.ts keyword.operator, source.tsx keyword.operator#00a8f7
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #00a8f7
constant.language.import-export-all.js, constant.language.import-export-all.ts#eb3b49
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#00a8f7
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#00a8f7
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#eb3b49
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#ffaa0d
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#eb3b49
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#61dd09
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#00a8f7
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#61dd09
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#00a8f7
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#00a8f7
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#00a8f7
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#00a8f7
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#00a8f7
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#ffaa0d
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#eb3b49
constant.language.json#00a8f7
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#ffaa0d
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#00a8f7
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#61dd09
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#61dd09
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#c87edf
variable.other.object.js, variable.other.object.ts#00a8f7
meta.object-literal.key.js, meta.object-literal.key.ts#eb3b49
source.python constant.other#00a8f7
source.python constant#ffaa0d
constant.character.format.placeholder.other.python storage#ffaa0d
support.variable.magic.python#eb3b49
meta.function.parameters.python#ffaa0d
punctuation.separator.annotation.python#00a8f7
punctuation.separator.parameters.python#00a8f7
entity.name.variable.field.cs#eb3b49
source.cs keyword.operator#00a8f7
variable.other.readwrite.cs#00a8f7
variable.other.object.cs#00a8f7
variable.other.object.property.cs#00a8f7
entity.name.variable.property.cs#dbdbdb
storage.type.cs#ffaa0d
keyword.other.unsafe.rust#c87edf
entity.name.type.rust#00a8f7
storage.modifier.lifetime.rust#00a8f7
entity.name.lifetime.rust#ffaa0d
storage.type.core.rust#00a8f7
meta.attribute.rust#ffaa0d
storage.class.std.rust#00a8f7
markup.raw.block.markdown#00a8f7
punctuation.definition.variable.shell#eb3b49
support.constant.property-value.css#00a8f7
punctuation.definition.constant.css#ffaa0d
punctuation.separator.key-value.scss#eb3b49
punctuation.definition.constant.scss#ffaa0d
meta.property-list.scss punctuation.separator.key-value.scss#00a8f7
storage.type.primitive.array.java#ffaa0d
entity.name.section.markdown#eb3b49
punctuation.definition.heading.markdown#eb3b49
markup.heading.setext#00a8f7
punctuation.definition.bold.markdown#ffaa0d
markup.inline.raw.markdown#61dd09
beginning.punctuation.definition.list.markdown#eb3b49
markup.quote.markdown#7d8086italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#00a8f7
punctuation.definition.metadata.markdown#c87edf
markup.underline.link.markdown, markup.underline.link.image.markdown#c87edf
string.other.link.title.markdown, string.other.link.description.markdown#dbdbdb
punctuation.separator.variable.ruby#eb3b49
variable.other.constant.ruby#ffaa0d
keyword.operator.other.ruby#61dd09
punctuation.definition.variable.php#eb3b49
meta.class.php#00a8f7