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#131313
  • activityBar.foreground#EBD49D
  • activityBarBadge.background#777674
  • activityBarBadge.foreground#EBD49D
  • badge.background#777674
  • badge.foreground#EBD49D
  • button.background#777674
  • button.foreground#EBD49D
  • debugTokenExpression.number#EBD49D
  • debugTokenExpression.value#A4A4A4
  • debugToolBar.background#4B4A48
  • debugView.stateLabelBackground#4B4A48
  • debugView.stateLabelForeground#EBD49D
  • debugView.valueChangedHighlight#777674
  • diffEditor.insertedTextBackground#A6A5A440
  • diffEditor.removedTextBackground#4D4C4B40
  • dropdown.background#4B4A48
  • dropdown.listBackground#262625
  • editor.background#262625
  • editor.findMatchBackground#777674A0
  • editor.findMatchBorder#A4A4A4
  • editor.findMatchHighlightBackground#77767460
  • editor.findMatchHighlightBorder#777674
  • editor.foreground#EBD49D
  • editor.lineHighlightBackground#4B4A4848
  • editor.selectionBackground#77767460
  • editor.selectionHighlightBorder#A4A4A460
  • editor.wordHighlightBackground#77767448
  • editor.wordHighlightStrongBackground#A4A4A448
  • editorCursor.foreground#EBD49D
  • editorGroup.border#131313
  • editorGroup.dropBackground#131313A0
  • editorGroupHeader.tabsBackground#131313
  • editorHoverWidget.background#4B4A48
  • editorHoverWidget.border#777674
  • editorIndentGuide.activeBackground#777674
  • editorIndentGuide.background#4B4A48
  • editorLineNumber.activeForeground#EBD49D
  • editorLineNumber.foreground#A4A4A4
  • editorSuggestWidget.background#4B4A48
  • editorSuggestWidget.border#777674
  • editorSuggestWidget.foreground#EBD49D
  • editorSuggestWidget.highlightForeground#EBD49D
  • editorSuggestWidget.selectedBackground#777674
  • editorWhitespace.foreground#A4A4A460
  • editorWidget.background#4B4A48
  • editorWidget.foreground#EBD49D
  • extensionButton.prominentBackground#777674
  • extensionButton.prominentForeground#EBD49D
  • extensionButton.prominentHoverBackground#A4A4A4
  • focusBorder#A4A4A4
  • gitDecoration.addedResourceForeground#C5BA9E
  • gitDecoration.conflictingResourceForeground#B1A588
  • gitDecoration.deletedResourceForeground#A4A4A4
  • gitDecoration.ignoredResourceForeground#A4A4A4C8
  • gitDecoration.modifiedResourceForeground#EBD49D
  • gitDecoration.submoduleResourceForeground#A4A4A4
  • gitDecoration.untrackedResourceForeground#A4A4A4
  • input.background#4B4A48
  • input.border#777674
  • input.foreground#EBD49D
  • input.placeholderForeground#A4A4A4A0
  • inputOption.activeBackground#77767460
  • inputOption.activeBorder#A4A4A4
  • inputOption.activeForeground#EBD49D
  • inputValidation.errorBackground#5F5E5C80
  • inputValidation.errorBorder#A4A4A4
  • inputValidation.infoBackground#4B4A48
  • inputValidation.infoBorder#A4A4A4
  • inputValidation.warningBackground#77767480
  • inputValidation.warningBorder#A4A4A4
  • list.activeSelectionBackground#777674
  • list.activeSelectionForeground#EBD49D
  • list.dropBackground#4B4A48
  • list.focusBackground#777674
  • list.highlightForeground#EBD49D
  • list.hoverBackground#4B4A48
  • list.hoverForeground#EBD49D
  • list.inactiveSelectionBackground#777674
  • list.inactiveSelectionForeground#EBD49D
  • menu.background#4B4A48
  • menu.foreground#EBD49D
  • notifications.foreground#EBD49D
  • panel.border#131313
  • panelTitle.activeBorder#EBD49D
  • panelTitle.activeForeground#EBD49D
  • panelTitle.inactiveForeground#A4A4A4
  • peekView.border#777674
  • peekViewEditor.background#262625
  • peekViewEditor.matchHighlightBackground#77767480
  • peekViewResult.background#4B4A48
  • peekViewResult.matchHighlightBackground#77767460
  • peekViewResult.selectionBackground#777674
  • peekViewTitle.background#131313
  • pickerGroup.foreground#EBD49D
  • progressBar.background#A4A4A4
  • selection.background#777674A0
  • settings.dropdownForeground#EBD49D
  • settings.headerForeground#EBD49D
  • settings.modifiedItemIndicator#EBD49D
  • settings.numberInputBackground#4B4A48
  • settings.numberInputForeground#EBD49D
  • settings.textInputBackground#4B4A48
  • settings.textInputForeground#EBD49D
  • sideBar.background#131313
  • sideBar.foreground#EBD49D
  • sideBarSectionHeader.background#131313
  • sideBarSectionHeader.foreground#EBD49D
  • statusBar.background#4B4A48
  • statusBar.debuggingBackground#131313
  • statusBar.foreground#EBD49D
  • statusBar.noFolderBackground#131313
  • statusBarItem.remoteBackground#777674
  • symbolIcon.arrayForeground#B790C2
  • symbolIcon.booleanForeground#C97A63
  • symbolIcon.classForeground#B790C2
  • symbolIcon.colorForeground#8FB573
  • symbolIcon.constantForeground#C97A63
  • symbolIcon.constructorForeground#78A6C8
  • symbolIcon.enumeratorForeground#B790C2
  • symbolIcon.enumeratorMemberForeground#C97A63
  • symbolIcon.eventForeground#A0C0F0
  • symbolIcon.fieldForeground#A0C0F0
  • symbolIcon.fileForeground#C4C0B8
  • symbolIcon.folderForeground#C4C0B8
  • symbolIcon.functionForeground#78A6C8
  • symbolIcon.interfaceForeground#B790C2
  • symbolIcon.keyForeground#A0C0F0
  • symbolIcon.keywordForeground#8AB4F8
  • symbolIcon.methodForeground#78A6C8
  • symbolIcon.moduleForeground#B790C2
  • symbolIcon.namespaceForeground#B790C2
  • symbolIcon.nullForeground#C97A63
  • symbolIcon.numberForeground#E6B566
  • symbolIcon.objectForeground#B790C2
  • symbolIcon.operatorForeground#A0C3FA
  • symbolIcon.packageForeground#B790C2
  • symbolIcon.propertyForeground#A0C0F0
  • symbolIcon.referenceForeground#C4C0B8
  • symbolIcon.snippetForeground#8FB573
  • symbolIcon.stringForeground#8FB573
  • symbolIcon.structForeground#B790C2
  • symbolIcon.textForeground#C4C0B8
  • symbolIcon.typeParameterForeground#B790C2
  • symbolIcon.unitForeground#E6B566
  • symbolIcon.variableForeground#C4C0B8
  • tab.activeBorder#EBD49D
  • tab.activeForeground#EBD49D
  • tab.border#131313
  • tab.inactiveBackground#131313
  • tab.inactiveForeground#A4A4A4
  • terminal.ansiBlack#131313
  • terminal.ansiBlue#A4A4A4
  • terminal.ansiBrightBlack#777674
  • terminal.ansiBrightBlue#EBD49D
  • terminal.ansiBrightCyan#EBD49D
  • terminal.ansiBrightGreen#EFDCB0
  • terminal.ansiBrightMagenta#C7BCA0
  • terminal.ansiBrightRed#A4A4A4
  • terminal.ansiBrightWhite#EBD49D
  • terminal.ansiBrightYellow#EBD49D
  • terminal.ansiCyan#A4A4A4
  • terminal.ansiGreen#C0B7A1
  • terminal.ansiMagenta#8D8D8C
  • terminal.ansiRed#838383
  • terminal.ansiWhite#EBD49D
  • terminal.ansiYellow#EBD49D
  • titleBar.activeBackground#131313
  • titleBar.activeForeground#EBD49D
  • titleBar.inactiveBackground#131313
  • titleBar.inactiveForeground#A4A4A4
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, meta.interpolation#EBD49D
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#777674italic
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#8FB573
constant.character.escape, constant.other.placeholder#E6B566bold
string.regexp, constant.regexp#8FB573
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#E6B566
constant.language.boolean, constant.language.true, constant.language.false#C97A63bold
constant.language, constant.language.null, constant.language.undefined, constant.language.nan, constant.other, constant.character#C97A63
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#8AB4F8bold
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#A0C3FA
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#8AB4F8bold
punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#A0C3FA
variable, variable.other, variable.other.readwrite, variable.other.object#C4C0B8
variable.other.property#A0C0F0
variable.language, variable.language.this, variable.language.self, variable.language.super#C97A63italic
variable.other.constant, variable.other.enummember#C97A63
variable.parameter, variable.parameter.function#86B8D4italic
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#78A6C8underline
entity.name.function.member, meta.method-call entity.name.function, meta.method entity.name.function#78A6C8underline
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#B790C2bold
entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.parameter#B790C2italic
entity.other.inherited-class#B790C2italic underline
storage.type.generic, support.type.property-name, support.type.builtin, support.type.primitive#B790C2italic
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#A0C0F0
entity.name.tag, entity.name.tag.localname, meta.tag, meta.tag.sgml#6FA8DC
support.class.component, support.class.component.tsx, support.class.component.jsx#B790C2bold
entity.name.tag.jsx, entity.name.tag.tsx#6FA8DC
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.jsx, entity.other.attribute-name.class.tsx#89B5E7
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#A0C3FA
meta.import string.quoted, string.quoted.double.import, string.quoted.single.import#8FB573
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#B790C2italic
support.type.primitive, support.type.builtin#B790C2italic
meta.definition.variable, meta.definition.function, meta.definition.method, meta.definition.property#C4C0B8
variable.other.object.property, variable.other.property.tsx, variable.other.property.ts#A0C0F0
support.function.react, support.variable.react#78A6C8underline
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#89B5E7
support.type.property-name.css, support.type.vendored.property-name.css#A0C0F0
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css#C97A63
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#6FA8DC
support.type.property-name.json, meta.object-literal.key string, string.quoted.double.json punctuation, meta.mapping.key.json#A0C0F0
meta.structure.dictionary.json string.quoted.double.json, string.quoted.double.json#8FB573
meta.function.decorator.python entity.name.function, entity.name.function.decorator.python, punctuation.definition.decorator.python#D8A15B
support.function.magic.python, support.variable.magic.python#78A6C8
entity.name.function.macro.rust, support.function.macro.rust#D8A15B
entity.name.package.go#B790C2
comment.line.shebang, comment.line.shebang punctuation#777674italic
markup.heading, markup.heading.1, markup.heading.2, markup.heading.3, markup.heading.4, markup.heading.5, markup.heading.6, markup.heading.setext#78A6C8bold
markup.bold#EBD49Dbold
markup.italic#EBD49Ditalic
markup.underline.link, string.other.link, markup.underline.link.markdown#8FB573underline
markup.inline.raw, markup.fenced_code.block, markup.raw.block#C97A63
markup.quote#777674italic
markup.list, punctuation.definition.list.begin#A0C3FA
meta.diff, meta.diff.header#777674
markup.deleted#D06D6D
markup.inserted#78A6C8
markup.changed#8FB573
invalid, invalid.illegal#D06D6Dunderline
invalid.deprecated#777674strikethrough
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#8A8884
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#A0C3FA
constant.numeric.line-number.find-in-files - match, entity.name.filename.find-in-files#E6B566
token.info-token#78A6C8
token.warn-token#8FB573
token.error-token#D06D6D
token.debug-token#777674
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql#8AB4F8bold
support.function.aggregate.sql, support.function.scalar.sql#78A6C8
entity.name.type.table.sql#B790C2italic
entity.name.type.column.sql#A0C0F0
storage.type.annotation.java, storage.type.annotation.kotlin, meta.annotation.scala#D8A15Bbold
entity.name.namespace.java, entity.name.package.kotlin, entity.name.namespace.scala#B790C2
entity.name.type.parameter.java, entity.name.type.parameter.kotlin, entity.name.type.parameter.scala#B790C2italic
meta.preprocessor, keyword.control.directive, entity.name.function.preprocessor#D8A15Bbold
keyword.operator.scope-resolution.cpp#A0C3FA
entity.name.type.class.attribute-name.cs#D8A15Bbold
storage.modifier.lifetime.rust#B790C2italic
entity.name.type.trait.rust#B790C2italic
support.function.builtin.go, support.type.builtin.go#78A6C8
meta.function.parameters.python support.type, meta.annotation.python#B790C2italic
variable.parameter.function.language.special.self.python, variable.language.special.self.python#C97A63italic
variable.other.php#C4C0B8
support.other.namespace.php#B790C2
constant.other.symbol.ruby#C97A63
constant.other.symbol.elixir#C97A63
keyword.other.attribute.swift#D8A15Bbold
entity.name.type.swift, support.type.swift#B790C2italic
variable.other.normal.shell, variable.parameter.positional.shell#C4C0B8
support.function.builtin.shell, support.function.alias.shell#78A6C8
keyword.other.special-method.dockerfile#8AB4F8bold
entity.name.function.target.makefile#78A6C8underline
entity.name.tag.yaml, meta.mapping.key.yaml#A0C0F0
entity.name.type.anchor.yaml#D8A15B
support.type.property-name.table.toml, support.type.property-name.toml#A0C0F0
entity.name.section.group-title.ini#B790C2bold
entity.name.type.graphql#B790C2italic
entity.name.field.graphql#A0C0F0
entity.name.function.directive.graphql#D8A15Bbold
support.function.lua, entity.name.function.lua#78A6C8
entity.other.attribute-name.block.hcl, entity.name.block.hcl#B790C2
constant.other.character-class.regexp#E6B566
punctuation.separator.comma#8A8884
punctuation.accessor.dot#8A8884