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#0A0A0A
  • activityBar.foreground#DBDBDB
  • activityBarBadge.background#5F6062
  • activityBarBadge.foreground#DBDBDB
  • badge.background#5F6062
  • badge.foreground#DBDBDB
  • button.background#5F6062
  • button.foreground#DBDBDB
  • debugTokenExpression.number#DBDBDB
  • debugTokenExpression.value#999999
  • debugToolBar.background#373839
  • debugView.stateLabelBackground#373839
  • debugView.stateLabelForeground#DBDBDB
  • debugView.valueChangedHighlight#5F6062
  • diffEditor.insertedTextBackground#97979840
  • diffEditor.removedTextBackground#3D3E3F40
  • dropdown.background#373839
  • dropdown.listBackground#1F1F20
  • editor.background#1F1F20
  • editor.findMatchBackground#5F6062A0
  • editor.findMatchBorder#999999
  • editor.findMatchHighlightBackground#5F606260
  • editor.findMatchHighlightBorder#5F6062
  • editor.foreground#DBDBDB
  • editor.lineHighlightBackground#37383948
  • editor.selectionBackground#5F606260
  • editor.selectionHighlightBorder#99999960
  • editor.wordHighlightBackground#5F606248
  • editor.wordHighlightStrongBackground#99999948
  • editorCursor.foreground#DBDBDB
  • editorGroup.border#0A0A0A
  • editorGroup.dropBackground#0A0A0AA0
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorHoverWidget.background#373839
  • editorHoverWidget.border#5F6062
  • editorIndentGuide.activeBackground#5F6062
  • editorIndentGuide.background#373839
  • editorLineNumber.activeForeground#DBDBDB
  • editorLineNumber.foreground#999999
  • editorSuggestWidget.background#373839
  • editorSuggestWidget.border#5F6062
  • editorSuggestWidget.foreground#DBDBDB
  • editorSuggestWidget.highlightForeground#DBDBDB
  • editorSuggestWidget.selectedBackground#5F6062
  • editorWhitespace.foreground#99999960
  • editorWidget.background#373839
  • editorWidget.foreground#DBDBDB
  • extensionButton.prominentBackground#5F6062
  • extensionButton.prominentForeground#DBDBDB
  • extensionButton.prominentHoverBackground#999999
  • focusBorder#999999
  • gitDecoration.addedResourceForeground#BDBDBD
  • gitDecoration.conflictingResourceForeground#9D9D9E
  • gitDecoration.deletedResourceForeground#999999
  • gitDecoration.ignoredResourceForeground#999999C8
  • gitDecoration.modifiedResourceForeground#DBDBDB
  • gitDecoration.submoduleResourceForeground#999999
  • gitDecoration.untrackedResourceForeground#999999
  • input.background#373839
  • input.border#5F6062
  • input.foreground#DBDBDB
  • input.placeholderForeground#999999A0
  • inputOption.activeBackground#5F606260
  • inputOption.activeBorder#999999
  • inputOption.activeForeground#DBDBDB
  • inputValidation.errorBackground#4C4C4E80
  • inputValidation.errorBorder#999999
  • inputValidation.infoBackground#373839
  • inputValidation.infoBorder#999999
  • inputValidation.warningBackground#5F606280
  • inputValidation.warningBorder#999999
  • list.activeSelectionBackground#5F6062
  • list.activeSelectionForeground#DBDBDB
  • list.dropBackground#373839
  • list.focusBackground#5F6062
  • list.highlightForeground#DBDBDB
  • list.hoverBackground#373839
  • list.hoverForeground#DBDBDB
  • list.inactiveSelectionBackground#5F6062
  • list.inactiveSelectionForeground#DBDBDB
  • menu.background#373839
  • menu.foreground#DBDBDB
  • notifications.foreground#DBDBDB
  • panel.border#0A0A0A
  • panelTitle.activeBorder#DBDBDB
  • panelTitle.activeForeground#DBDBDB
  • panelTitle.inactiveForeground#999999
  • peekView.border#5F6062
  • peekViewEditor.background#1F1F20
  • peekViewEditor.matchHighlightBackground#5F606280
  • peekViewResult.background#373839
  • peekViewResult.matchHighlightBackground#5F606260
  • peekViewResult.selectionBackground#5F6062
  • peekViewTitle.background#0A0A0A
  • pickerGroup.foreground#DBDBDB
  • progressBar.background#999999
  • selection.background#5F6062A0
  • settings.dropdownForeground#DBDBDB
  • settings.headerForeground#DBDBDB
  • settings.modifiedItemIndicator#DBDBDB
  • settings.numberInputBackground#373839
  • settings.numberInputForeground#DBDBDB
  • settings.textInputBackground#373839
  • settings.textInputForeground#DBDBDB
  • sideBar.background#0A0A0A
  • sideBar.foreground#DBDBDB
  • sideBarSectionHeader.background#0A0A0A
  • sideBarSectionHeader.foreground#DBDBDB
  • statusBar.background#373839
  • statusBar.debuggingBackground#0A0A0A
  • statusBar.foreground#DBDBDB
  • statusBar.noFolderBackground#0A0A0A
  • statusBarItem.remoteBackground#5F6062
  • symbolIcon.arrayForeground#B684E0
  • symbolIcon.booleanForeground#E06A8D
  • symbolIcon.classForeground#B684E0
  • symbolIcon.colorForeground#78C47B
  • symbolIcon.constantForeground#E06A8D
  • symbolIcon.constructorForeground#4FB8CC
  • symbolIcon.enumeratorForeground#B684E0
  • symbolIcon.enumeratorMemberForeground#E06A8D
  • symbolIcon.eventForeground#8EB4FF
  • symbolIcon.fieldForeground#8EB4FF
  • symbolIcon.fileForeground#C8C8C8
  • symbolIcon.folderForeground#C8C8C8
  • symbolIcon.functionForeground#4FB8CC
  • symbolIcon.interfaceForeground#B684E0
  • symbolIcon.keyForeground#8EB4FF
  • symbolIcon.keywordForeground#5EA1FF
  • symbolIcon.methodForeground#4FB8CC
  • symbolIcon.moduleForeground#B684E0
  • symbolIcon.namespaceForeground#B684E0
  • symbolIcon.nullForeground#E06A8D
  • symbolIcon.numberForeground#F0B35E
  • symbolIcon.objectForeground#B684E0
  • symbolIcon.operatorForeground#7CB4FF
  • symbolIcon.packageForeground#B684E0
  • symbolIcon.propertyForeground#8EB4FF
  • symbolIcon.referenceForeground#C8C8C8
  • symbolIcon.snippetForeground#78C47B
  • symbolIcon.stringForeground#78C47B
  • symbolIcon.structForeground#B684E0
  • symbolIcon.textForeground#C8C8C8
  • symbolIcon.typeParameterForeground#B684E0
  • symbolIcon.unitForeground#F0B35E
  • symbolIcon.variableForeground#C8C8C8
  • tab.activeBorder#DBDBDB
  • tab.activeForeground#DBDBDB
  • tab.border#0A0A0A
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#999999
  • terminal.ansiBlack#0A0A0A
  • terminal.ansiBlue#999999
  • terminal.ansiBrightBlack#5F6062
  • terminal.ansiBrightBlue#DBDBDB
  • terminal.ansiBrightCyan#DBDBDB
  • terminal.ansiBrightGreen#E2E2E2
  • terminal.ansiBrightMagenta#BABABA
  • terminal.ansiBrightRed#999999
  • terminal.ansiBrightWhite#DBDBDB
  • terminal.ansiBrightYellow#DBDBDB
  • terminal.ansiCyan#999999
  • terminal.ansiGreen#B3B3B3
  • terminal.ansiMagenta#7C7C7D
  • terminal.ansiRed#7A7A7A
  • terminal.ansiWhite#DBDBDB
  • terminal.ansiYellow#DBDBDB
  • titleBar.activeBackground#0A0A0A
  • titleBar.activeForeground#DBDBDB
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#999999
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, meta.interpolation#DBDBDB
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#5F6062italic
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#78C47B
constant.character.escape, constant.other.placeholder#F0B35Ebold
string.regexp, constant.regexp#78C47B
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#F0B35E
constant.language.boolean, constant.language.true, constant.language.false#E06A8Dbold
constant.language, constant.language.null, constant.language.undefined, constant.language.nan, constant.other, constant.character#E06A8D
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#5EA1FFbold
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#7CB4FF
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#5EA1FFbold
punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#7CB4FF
variable, variable.other, variable.other.readwrite, variable.other.object#C8C8C8
variable.other.property#8EB4FF
variable.language, variable.language.this, variable.language.self, variable.language.super#E06A8Ditalic
variable.other.constant, variable.other.enummember#E06A8D
variable.parameter, variable.parameter.function#67C6D4italic
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#4FB8CCunderline
entity.name.function.member, meta.method-call entity.name.function, meta.method entity.name.function#4FB8CCunderline
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#B684E0bold
entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.parameter#B684E0italic
entity.other.inherited-class#B684E0italic underline
storage.type.generic, support.type.property-name, support.type.builtin, support.type.primitive#B684E0italic
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#8EB4FF
entity.name.tag, entity.name.tag.localname, meta.tag, meta.tag.sgml#6EA8FF
support.class.component, support.class.component.tsx, support.class.component.jsx#B684E0bold
entity.name.tag.jsx, entity.name.tag.tsx#6EA8FF
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.jsx, entity.other.attribute-name.class.tsx#7FAEFF
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#7CB4FF
meta.import string.quoted, string.quoted.double.import, string.quoted.single.import#78C47B
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#B684E0italic
support.type.primitive, support.type.builtin#B684E0italic
meta.definition.variable, meta.definition.function, meta.definition.method, meta.definition.property#C8C8C8
variable.other.object.property, variable.other.property.tsx, variable.other.property.ts#8EB4FF
support.function.react, support.variable.react#4FB8CCunderline
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#7FAEFF
support.type.property-name.css, support.type.vendored.property-name.css#8EB4FF
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#E06A8D
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6EA8FF
support.type.property-name.json, meta.object-literal.key string, string.quoted.double.json punctuation, meta.mapping.key.json#8EB4FF
meta.structure.dictionary.json string.quoted.double.json, string.quoted.double.json#78C47B
meta.function.decorator.python entity.name.function, entity.name.function.decorator.python, punctuation.definition.decorator.python#DDAA66
support.function.magic.python, support.variable.magic.python#4FB8CC
entity.name.function.macro.rust, support.function.macro.rust#DDAA66
entity.name.package.go#B684E0
comment.line.shebang, comment.line.shebang punctuation#5F6062italic
markup.heading, markup.heading.1, markup.heading.2, markup.heading.3, markup.heading.4, markup.heading.5, markup.heading.6, markup.heading.setext#4FB8CCbold
markup.bold#DBDBDBbold
markup.italic#DBDBDBitalic
markup.underline.link, string.other.link, markup.underline.link.markdown#78C47Bunderline
markup.inline.raw, markup.fenced_code.block, markup.raw.block#E06A8D
markup.quote#5F6062italic
markup.list, punctuation.definition.list.begin#7CB4FF
meta.diff, meta.diff.header#5F6062
markup.deleted#FF6B6B
markup.inserted#4FB8CC
markup.changed#78C47B
invalid, invalid.illegal#FF6B6Bunderline
invalid.deprecated#5F6062strikethrough
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#8A8B8D
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#7CB4FF
constant.numeric.line-number.find-in-files - match, entity.name.filename.find-in-files#F0B35E
token.info-token#4FB8CC
token.warn-token#78C47B
token.error-token#FF6B6B
token.debug-token#5F6062
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql#5EA1FFbold
support.function.aggregate.sql, support.function.scalar.sql#4FB8CC
entity.name.type.table.sql#B684E0italic
entity.name.type.column.sql#8EB4FF
storage.type.annotation.java, storage.type.annotation.kotlin, meta.annotation.scala#DDAA66bold
entity.name.namespace.java, entity.name.package.kotlin, entity.name.namespace.scala#B684E0
entity.name.type.parameter.java, entity.name.type.parameter.kotlin, entity.name.type.parameter.scala#B684E0italic
meta.preprocessor, keyword.control.directive, entity.name.function.preprocessor#DDAA66bold
keyword.operator.scope-resolution.cpp#7CB4FF
entity.name.type.class.attribute-name.cs#DDAA66bold
storage.modifier.lifetime.rust#B684E0italic
entity.name.type.trait.rust#B684E0italic
support.function.builtin.go, support.type.builtin.go#4FB8CC
meta.function.parameters.python support.type, meta.annotation.python#B684E0italic
variable.parameter.function.language.special.self.python, variable.language.special.self.python#E06A8Ditalic
variable.other.php#C8C8C8
support.other.namespace.php#B684E0
constant.other.symbol.ruby#E06A8D
constant.other.symbol.elixir#E06A8D
keyword.other.attribute.swift#DDAA66bold
entity.name.type.swift, support.type.swift#B684E0italic
variable.other.normal.shell, variable.parameter.positional.shell#C8C8C8
support.function.builtin.shell, support.function.alias.shell#4FB8CC
keyword.other.special-method.dockerfile#5EA1FFbold
entity.name.function.target.makefile#4FB8CCunderline
entity.name.tag.yaml, meta.mapping.key.yaml#8EB4FF
entity.name.type.anchor.yaml#DDAA66
support.type.property-name.table.toml, support.type.property-name.toml#8EB4FF
entity.name.section.group-title.ini#B684E0bold
entity.name.type.graphql#B684E0italic
entity.name.field.graphql#8EB4FF
entity.name.function.directive.graphql#DDAA66bold
support.function.lua, entity.name.function.lua#4FB8CC
entity.other.attribute-name.block.hcl, entity.name.block.hcl#B684E0
constant.other.character-class.regexp#F0B35E
punctuation.separator.comma#8A8B8D
punctuation.accessor.dot#8A8B8D