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#262628
  • activityBar.foreground#ACACAE
  • activityBarBadge.background#49494B
  • activityBarBadge.foreground#ACACAE
  • badge.background#49494B
  • badge.foreground#ACACAE
  • button.background#49494B
  • button.foreground#ACACAE
  • debugTokenExpression.number#ACACAE
  • debugTokenExpression.value#6E6E70
  • debugToolBar.background#343436
  • debugView.stateLabelBackground#343436
  • debugView.stateLabelForeground#ACACAE
  • debugView.valueChangedHighlight#49494B
  • diffEditor.insertedTextBackground#88888A40
  • diffEditor.removedTextBackground#2F2F3040
  • dropdown.background#343436
  • dropdown.listBackground#2C2C2E
  • editor.background#2C2C2E
  • editor.findMatchBackground#49494BA0
  • editor.findMatchBorder#6E6E70
  • editor.findMatchHighlightBackground#49494B60
  • editor.findMatchHighlightBorder#49494B
  • editor.foreground#ACACAE
  • editor.lineHighlightBackground#34343648
  • editor.selectionBackground#49494B60
  • editor.selectionHighlightBorder#6E6E7060
  • editor.wordHighlightBackground#49494B48
  • editor.wordHighlightStrongBackground#6E6E7048
  • editorCursor.foreground#ACACAE
  • editorGroup.border#262628
  • editorGroup.dropBackground#262628A0
  • editorGroupHeader.tabsBackground#262628
  • editorHoverWidget.background#343436
  • editorHoverWidget.border#49494B
  • editorIndentGuide.activeBackground#49494B
  • editorIndentGuide.background#343436
  • editorLineNumber.activeForeground#ACACAE
  • editorLineNumber.foreground#6E6E70
  • editorSuggestWidget.background#343436
  • editorSuggestWidget.border#49494B
  • editorSuggestWidget.foreground#ACACAE
  • editorSuggestWidget.highlightForeground#ACACAE
  • editorSuggestWidget.selectedBackground#49494B
  • editorWhitespace.foreground#6E6E7060
  • editorWidget.background#343436
  • editorWidget.foreground#ACACAE
  • extensionButton.prominentBackground#49494B
  • extensionButton.prominentForeground#ACACAE
  • extensionButton.prominentHoverBackground#6E6E70
  • focusBorder#6E6E70
  • gitDecoration.addedResourceForeground#A6A6A7
  • gitDecoration.conflictingResourceForeground#7A7A7C
  • gitDecoration.deletedResourceForeground#6E6E70
  • gitDecoration.ignoredResourceForeground#6E6E70C8
  • gitDecoration.modifiedResourceForeground#ACACAE
  • gitDecoration.submoduleResourceForeground#6E6E70
  • gitDecoration.untrackedResourceForeground#6E6E70
  • input.background#343436
  • input.border#49494B
  • input.foreground#ACACAE
  • input.placeholderForeground#6E6E70A0
  • inputOption.activeBackground#49494B60
  • inputOption.activeBorder#6E6E70
  • inputOption.activeForeground#ACACAE
  • inputValidation.errorBackground#3A3A3C80
  • inputValidation.errorBorder#6E6E70
  • inputValidation.infoBackground#343436
  • inputValidation.infoBorder#6E6E70
  • inputValidation.warningBackground#49494B80
  • inputValidation.warningBorder#6E6E70
  • list.activeSelectionBackground#49494B
  • list.activeSelectionForeground#ACACAE
  • list.dropBackground#343436
  • list.focusBackground#49494B
  • list.highlightForeground#ACACAE
  • list.hoverBackground#343436
  • list.hoverForeground#ACACAE
  • list.inactiveSelectionBackground#49494B
  • list.inactiveSelectionForeground#ACACAE
  • menu.background#343436
  • menu.foreground#ACACAE
  • notifications.foreground#ACACAE
  • panel.border#262628
  • panelTitle.activeBorder#ACACAE
  • panelTitle.activeForeground#ACACAE
  • panelTitle.inactiveForeground#6E6E70
  • peekView.border#49494B
  • peekViewEditor.background#2C2C2E
  • peekViewEditor.matchHighlightBackground#49494B80
  • peekViewResult.background#343436
  • peekViewResult.matchHighlightBackground#49494B60
  • peekViewResult.selectionBackground#49494B
  • peekViewTitle.background#262628
  • pickerGroup.foreground#ACACAE
  • progressBar.background#6E6E70
  • selection.background#49494BA0
  • settings.dropdownForeground#ACACAE
  • settings.headerForeground#ACACAE
  • settings.modifiedItemIndicator#ACACAE
  • settings.numberInputBackground#343436
  • settings.numberInputForeground#ACACAE
  • settings.textInputBackground#343436
  • settings.textInputForeground#ACACAE
  • sideBar.background#262628
  • sideBar.foreground#ACACAE
  • sideBarSectionHeader.background#262628
  • sideBarSectionHeader.foreground#ACACAE
  • statusBar.background#343436
  • statusBar.debuggingBackground#262628
  • statusBar.foreground#ACACAE
  • statusBar.noFolderBackground#262628
  • statusBarItem.remoteBackground#49494B
  • symbolIcon.arrayForeground#C678DD
  • symbolIcon.booleanForeground#E06C75
  • symbolIcon.classForeground#C678DD
  • symbolIcon.colorForeground#98C379
  • symbolIcon.constantForeground#E06C75
  • symbolIcon.constructorForeground#56B6C2
  • symbolIcon.enumeratorForeground#C678DD
  • symbolIcon.enumeratorMemberForeground#E06C75
  • symbolIcon.eventForeground#8FB6F3
  • symbolIcon.fieldForeground#8FB6F3
  • symbolIcon.fileForeground#B8BAC0
  • symbolIcon.folderForeground#B8BAC0
  • symbolIcon.functionForeground#56B6C2
  • symbolIcon.interfaceForeground#C678DD
  • symbolIcon.keyForeground#8FB6F3
  • symbolIcon.keywordForeground#7AA2F7
  • symbolIcon.methodForeground#56B6C2
  • symbolIcon.moduleForeground#C678DD
  • symbolIcon.namespaceForeground#C678DD
  • symbolIcon.nullForeground#E06C75
  • symbolIcon.numberForeground#E5C07B
  • symbolIcon.objectForeground#C678DD
  • symbolIcon.operatorForeground#91B4F9
  • symbolIcon.packageForeground#C678DD
  • symbolIcon.propertyForeground#8FB6F3
  • symbolIcon.referenceForeground#B8BAC0
  • symbolIcon.snippetForeground#98C379
  • symbolIcon.stringForeground#98C379
  • symbolIcon.structForeground#C678DD
  • symbolIcon.textForeground#B8BAC0
  • symbolIcon.typeParameterForeground#C678DD
  • symbolIcon.unitForeground#E5C07B
  • symbolIcon.variableForeground#B8BAC0
  • tab.activeBorder#ACACAE
  • tab.activeForeground#ACACAE
  • tab.border#262628
  • tab.inactiveBackground#262628
  • tab.inactiveForeground#6E6E70
  • terminal.ansiBlack#262628
  • terminal.ansiBlue#6E6E70
  • terminal.ansiBrightBlack#49494B
  • terminal.ansiBrightBlue#ACACAE
  • terminal.ansiBrightCyan#ACACAE
  • terminal.ansiBrightGreen#BCBCBE
  • terminal.ansiBrightMagenta#8D8D8F
  • terminal.ansiBrightRed#6E6E70
  • terminal.ansiBrightWhite#ACACAE
  • terminal.ansiBrightYellow#ACACAE
  • terminal.ansiCyan#6E6E70
  • terminal.ansiGreen#868688
  • terminal.ansiMagenta#5B5B5D
  • terminal.ansiRed#585859
  • terminal.ansiWhite#ACACAE
  • terminal.ansiYellow#ACACAE
  • titleBar.activeBackground#262628
  • titleBar.activeForeground#ACACAE
  • titleBar.inactiveBackground#262628
  • titleBar.inactiveForeground#6E6E70
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, meta.interpolation#ACACAE
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#49494Bitalic
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.single.jsx, string.quoted.double.jsx, string.quoted.single.tsx, string.quoted.double.tsx, string.template, string.template.jsx, string.template.tsx, string.interpolated, string.other.link#98C379
constant.character.escape, constant.other.placeholder#E5C07Bbold
string.regexp, constant.regexp#98C379
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#E5C07B
constant.language.boolean, constant.language.true, constant.language.false#E06C75bold
constant.language, constant.language.null, constant.language.undefined, constant.language.nan, constant.other, constant.character#E06C75
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.async, keyword.control.await, keyword.control.new, keyword.control.return, keyword.control.throw, keyword.control.try, keyword.control.catch, keyword.control.finally, keyword.control.switch, keyword.control.case, keyword.control.default, keyword.control.break, keyword.control.continue, keyword.control.yield, keyword.control.while, keyword.control.for, keyword.control.if, keyword.control.else, keyword.other, keyword.other.important, keyword.other.unit#7AA2F7bold
keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.optional, keyword.operator.ternary#91B4F9
storage, storage.type, storage.type.function, storage.type.class, storage.type.struct, storage.type.enum, storage.type.interface, storage.type.primitive, storage.modifier, storage.modifier.import, storage.modifier.package#7AA2F7bold
punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#91B4F9
variable, variable.other, variable.other.readwrite, variable.other.object#B8BAC0
variable.other.property#8FB6F3
variable.language, variable.language.this, variable.language.self, variable.language.super#E06C75italic
variable.other.constant, variable.other.enummember#E06C75
variable.parameter, variable.parameter.function#6EC4CFitalic
entity.name.function, meta.function-call entity.name.function, meta.function entity.name.function, support.function, support.function.builtin, support.function.misc, support.function.dom, support.function.console, support.function.any-method#56B6C2underline
entity.name.function.member, meta.method-call entity.name.function, meta.method entity.name.function#56B6C2underline
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.namespace, entity.name.scope-resolution, support.class, support.type, support.type.object#C678DDbold
entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.parameter#C678DDitalic
entity.other.inherited-class#C678DDitalic underline
storage.type.generic, support.type.property-name, support.type.builtin, support.type.primitive#C678DDitalic
variable.other.property, support.variable.property, meta.object-literal.key, meta.object-literal.key string, meta.object-literal.key entity.name.tag, string.unquoted.plain.out.yaml, entity.name.tag.yaml#8FB6F3
entity.name.tag, entity.name.tag.localname, meta.tag, meta.tag.sgml#61AFEF
support.class.component, support.class.component.tsx, support.class.component.jsx#C678DDbold
entity.name.tag.jsx, entity.name.tag.tsx#61AFEF
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.jsx, entity.other.attribute-name.class.tsx#7AB2F1
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#91B4F9
meta.import string.quoted, string.quoted.double.import, string.quoted.single.import#98C379
entity.name.type.alias.tsx, entity.name.type.module.tsx, support.type.primitive.tsx, support.type.builtin.tsx, support.type.primitive.ts, support.type.builtin.ts, entity.name.type.ts, entity.name.type.tsx#C678DDitalic
support.type.primitive, support.type.builtin#C678DDitalic
meta.definition.variable, meta.definition.function, meta.definition.method, meta.definition.property#B8BAC0
variable.other.object.property, variable.other.property.tsx, variable.other.property.ts#8FB6F3
support.function.react, support.variable.react#56B6C2underline
entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#7AB2F1
support.type.property-name.css, support.type.vendored.property-name.css#8FB6F3
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#E06C75
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#61AFEF
support.type.property-name.json, meta.object-literal.key string, string.quoted.double.json punctuation, meta.mapping.key.json#8FB6F3
meta.structure.dictionary.json string.quoted.double.json, string.quoted.double.json#98C379
meta.function.decorator.python entity.name.function, entity.name.function.decorator.python, punctuation.definition.decorator.python#D19A66
support.function.magic.python, support.variable.magic.python#56B6C2
entity.name.function.macro.rust, support.function.macro.rust#D19A66
entity.name.package.go#C678DD
comment.line.shebang, comment.line.shebang punctuation#49494Bitalic
markup.heading, markup.heading.1, markup.heading.2, markup.heading.3, markup.heading.4, markup.heading.5, markup.heading.6, markup.heading.setext#56B6C2bold
markup.bold#ACACAEbold
markup.italic#ACACAEitalic
markup.underline.link, string.other.link, markup.underline.link.markdown#98C379underline
markup.inline.raw, markup.fenced_code.block, markup.raw.block#E06C75
markup.quote#49494Bitalic
markup.list, punctuation.definition.list.begin#91B4F9
meta.diff, meta.diff.header#49494B
markup.deleted#F7768E
markup.inserted#56B6C2
markup.changed#98C379
invalid, invalid.illegal#F7768Eunderline
invalid.deprecated#49494Bstrikethrough
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.string, punctuation.section, meta.brace#7A7C80
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#91B4F9
constant.numeric.line-number.find-in-files - match, entity.name.filename.find-in-files#E5C07B
token.info-token#56B6C2
token.warn-token#98C379
token.error-token#F7768E
token.debug-token#49494B
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql#7AA2F7bold
support.function.aggregate.sql, support.function.scalar.sql#56B6C2
entity.name.type.table.sql#C678DDitalic
entity.name.type.column.sql#8FB6F3
storage.type.annotation.java, storage.type.annotation.kotlin, meta.annotation.scala#D19A66bold
entity.name.namespace.java, entity.name.package.kotlin, entity.name.namespace.scala#C678DD
entity.name.type.parameter.java, entity.name.type.parameter.kotlin, entity.name.type.parameter.scala#C678DDitalic
meta.preprocessor, keyword.control.directive, entity.name.function.preprocessor#D19A66bold
keyword.operator.scope-resolution.cpp#91B4F9
entity.name.type.class.attribute-name.cs#D19A66bold
storage.modifier.lifetime.rust#C678DDitalic
entity.name.type.trait.rust#C678DDitalic
support.function.builtin.go, support.type.builtin.go#56B6C2
meta.function.parameters.python support.type, meta.annotation.python#C678DDitalic
variable.parameter.function.language.special.self.python, variable.language.special.self.python#E06C75italic
variable.other.php#B8BAC0
support.other.namespace.php#C678DD
constant.other.symbol.ruby#E06C75
constant.other.symbol.elixir#E06C75
keyword.other.attribute.swift#D19A66bold
entity.name.type.swift, support.type.swift#C678DDitalic
variable.other.normal.shell, variable.parameter.positional.shell#B8BAC0
support.function.builtin.shell, support.function.alias.shell#56B6C2
keyword.other.special-method.dockerfile#7AA2F7bold
entity.name.function.target.makefile#56B6C2underline
entity.name.tag.yaml, meta.mapping.key.yaml#8FB6F3
entity.name.type.anchor.yaml#D19A66
support.type.property-name.table.toml, support.type.property-name.toml#8FB6F3
entity.name.section.group-title.ini#C678DDbold
entity.name.type.graphql#C678DDitalic
entity.name.field.graphql#8FB6F3
entity.name.function.directive.graphql#D19A66bold
support.function.lua, entity.name.function.lua#56B6C2
entity.other.attribute-name.block.hcl, entity.name.block.hcl#C678DD
constant.other.character-class.regexp#E5C07B
punctuation.separator.comma#7A7C80
punctuation.accessor.dot#7A7C80