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.activeBorder#e8dcc4
  • activityBar.background#1a1611
  • activityBar.foreground#7a6548
  • activityBar.inactiveForeground#7a6548
  • activityBarBadge.background#5ca7e8
  • activityBarBadge.foreground#1a1611
  • badge.background#5ca7e8
  • badge.foreground#1a1611
  • breadcrumb.activeSelectionForeground#e8dcc4
  • breadcrumb.focusForeground#e8dcc4
  • breadcrumb.foreground#d4c4a8
  • breadcrumbPicker.background#2a251c
  • button.background#5ca7e8
  • button.foreground#1a1611
  • button.hoverBackground#4a94d6
  • descriptionForeground#d4c4a8
  • diffEditor.insertedLineBackground#8ca67420
  • diffEditor.insertedTextBackground#8ca67420
  • diffEditor.removedLineBackground#d67c5c20
  • diffEditor.removedTextBackground#d67c5c20
  • dropdown.background#2a251c
  • dropdown.border#5a4a36
  • dropdown.foreground#e8dcc4
  • editor.background#1a1611
  • editor.findMatchBackground#8ca67430
  • editor.findMatchHighlightBackground#e8a85c50
  • editor.findRangeHighlightBackground#ce7e4a30
  • editor.foreground#e8dcc4
  • editor.lineHighlightBackground#2a251c
  • editor.lineHighlightBorder#00000001
  • editor.selectionBackground#3e3528
  • editor.selectionHighlightBackground#3e352880
  • editor.wordHighlightBackground#5ca7e860
  • editor.wordHighlightStrongBackground#5ca7e860
  • editorBracketHighlight.foreground1#a68860
  • editorBracketHighlight.foreground2#8b6239
  • editorBracketHighlight.foreground3#ce7e4a
  • editorBracketHighlight.foreground4#5ca7e8
  • editorBracketHighlight.foreground5#d4a574
  • editorBracketHighlight.foreground6#e8b88c
  • editorBracketHighlight.unexpectedBracket.foreground#d67c5c
  • editorBracketMatch.background#483d2e40
  • editorBracketMatch.border#9b8e7c80
  • editorCursor.foreground#e8dcc4
  • editorError.foreground#d67c5c
  • editorGroupHeader.tabsBackground#1a1611
  • editorGutter.addedBackground#8ca674
  • editorGutter.deletedBackground#d67c5c
  • editorGutter.modifiedBackground#e8a85c
  • editorHoverWidget.background#2a251c
  • editorHoverWidget.border#5a4a36
  • editorHoverWidget.foreground#e8dcc4
  • editorInfo.foreground#6cb4ee
  • editorLineNumber.activeForeground#e8dcc4
  • editorLineNumber.foreground#7a6548
  • editorOverviewRuler.errorForeground#d67c5c
  • editorOverviewRuler.infoForeground#6cb4ee
  • editorOverviewRuler.warningForeground#e8a85c
  • editorRuler.foreground#5a4a36
  • editorSuggestWidget.background#2a251c
  • editorSuggestWidget.border#5a4a36
  • editorSuggestWidget.selectedBackground#483d2e
  • editorWarning.foreground#e8a85c
  • editorWhitespace.foreground#5a4a36
  • editorWidget.background#2a251c
  • editorWidget.border#5a4a36
  • focusBorder#5ca7e860
  • gitDecoration.addedResourceForeground#8ca674
  • gitDecoration.conflictingResourceForeground#5ca7e8
  • gitDecoration.deletedResourceForeground#d67c5c
  • gitDecoration.ignoredResourceForeground#6b5d4a
  • gitDecoration.modifiedResourceForeground#e8a85c
  • gitDecoration.untrackedResourceForeground#9b8e7c
  • input.background#2a251c
  • input.border#5a4a36
  • input.foreground#e8dcc4
  • input.placeholderForeground#9e8b6f
  • inputOption.activeBorder#5ca7e8
  • inputOption.activeForeground#e8dcc4
  • list.activeSelectionBackground#2a251c
  • list.activeSelectionForeground#e8dcc4
  • list.errorForeground#d67c5c
  • list.highlightForeground#5ca7e8
  • list.hoverBackground#342d22
  • list.inactiveSelectionBackground#342d22
  • list.warningForeground#e8a85c
  • notificationsErrorIcon.foreground#d67c5c
  • notificationsInfoIcon.foreground#6cb4ee
  • notificationsWarningIcon.foreground#e8a85c
  • panel.background#1a1611
  • panel.border#00000000
  • panelTitle.activeForeground#e8dcc4
  • panelTitle.inactiveForeground#d4c4a8
  • peekView.border#5ca7e8
  • peekViewEditor.background#221e17
  • peekViewResult.background#1a1611
  • peekViewTitle.background#221e17
  • peekViewTitleDescription.foreground#d4c4a8
  • pickerGroup.foreground#e8dcc4
  • problemsErrorIcon.foreground#d67c5c
  • problemsInfoIcon.foreground#6cb4ee
  • problemsWarningIcon.foreground#e8a85c
  • quickInput.background#2a251c
  • quickInput.foreground#e8dcc4
  • quickInputList.focusBackground#483d2e
  • quickInputList.focusForeground#e8dcc4
  • scrollbar.shadow#5ca7e830
  • scrollbarSlider.activeBackground#342d2230
  • scrollbarSlider.background#483d2e40
  • scrollbarSlider.hoverBackground#5a4a3660
  • selection.background#3e3528
  • settings.headerForeground#e8dcc4
  • settings.modifiedItemIndicator#5ca7e8
  • sideBar.background#1a1611
  • sideBar.border#5a4a3650
  • sideBar.foreground#e8dcc4
  • sideBarSectionHeader.background#1a1611
  • sideBarSectionHeader.foreground#e8dcc4
  • sideBarTitle.foreground#e8dcc4
  • statusBar.background#221e17
  • statusBar.debuggingBackground#2a251c
  • statusBar.debuggingForeground#e8dcc4
  • statusBar.foreground#d4c4a8
  • statusBar.noFolderBackground#221e17
  • statusBarItem.remoteBackground#5ca7e8
  • statusBarItem.remoteForeground#1a1611
  • tab.activeBackground#2a251c
  • tab.activeBorder#e8dcc440
  • tab.activeForeground#e8dcc4
  • tab.border#00000000
  • tab.inactiveBackground#1a1611
  • tab.inactiveForeground#d4c4a8
  • terminal.ansiBlack#1a1611
  • terminal.ansiBlue#ce7e4a
  • terminal.ansiBrightBlack#7a6548
  • terminal.ansiBrightBlue#6cb4ee
  • terminal.ansiBrightCyan#7ac0d8
  • terminal.ansiBrightGreen#8ca674
  • terminal.ansiBrightMagenta#c88a6a
  • terminal.ansiBrightRed#d67c5c
  • terminal.ansiBrightWhite#f4ede4
  • terminal.ansiBrightYellow#e8a85c
  • terminal.ansiCyan#a68860
  • terminal.ansiGreen#d4a574
  • terminal.ansiMagenta#8b6239
  • terminal.ansiRed#e8b88c
  • terminal.ansiWhite#e8dcc4
  • terminal.ansiYellow#5ca7e8
  • terminal.background#1a1611
  • terminal.foreground#e8dcc4
  • terminalCursor.foreground#e8dcc4
  • textLink.activeForeground#5ca7e8
  • textLink.foreground#5ca7e8
  • titleBar.activeBackground#1a1611
  • titleBar.activeForeground#e8dcc4
  • titleBar.border#00000000
  • titleBar.inactiveBackground#1a1611
  • titleBar.inactiveForeground#d4c4a8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e8b6fitalic
string, string.quoted, string.template#d4a574
constant.numeric#e8b88c
constant.language.boolean#e8b88c
constant.language.null, constant.language.undefined#e8b88c
keyword, keyword.control#ce7e4a
storage, storage.type, storage.modifier#ce7e4a
keyword.operator#ce7e4a
entity.name.function, support.function#5ca7e8
entity.name.method#5ca7e8
entity.name.type, entity.name.class, support.type, support.class#8b6239
variable, entity.name.variable, variable.other#f0e6d2
variable.parameter#e8b88c
variable.other.property, support.type.property-name#a68860
constant, variable.other.constant#e8b88c
entity.name.tag#e8b88c
entity.other.attribute-name#a68860
punctuation#e8dcc4
variable.language.special.self.python, variable.parameter.function.language.special.self.python#e8b88cnormal
support.function.magic.python#5ca7e8normal
invalid, invalid.illegal#d67c5c
constant.other.color#e8dcc4
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ce7e4a
entity.name.function, variable.function, support.function, keyword.other.special-method#5ca7e8
meta.block variable.other#e8dcc4
support.other.variable, string.other.link#e8dcc4
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#e8b88c
string, constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d4a574
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8b6239
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css#e8dcc4
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d67c5c
variable.language#d4c4a8
entity.name.method.js#e8dcc4
meta.class-method.js entity.name.function.js, variable.function.constructor#e8dcc4
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css#a68860
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#5ca7e8
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#5ca7e8
source.sass keyword.control, meta.attribute-selector.scss#e8dcc4
markup.inserted#8ca674
markup.deleted#d67c5c
markup.changed#e8a85c
string.regexp#a68860
constant.character.escape#d4c4a8
*url*, *link*, *uri*#5ca7e8underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5ca7e8
source.js constant.other.object.key.js string.unquoted.label.js#d67c5cnormal
support.type.property-name.json#5ca7e8
text.html.markdown, punctuation.definition.list_item.markdown#e8dcc4
text.html.markdown markup.inline.raw.markdown#d4c4a8
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#e8dcc4
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#5ca7e8
markup.italic#e8dcc4normal
markup.bold, markup.bold string#e8dcc4bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#e8dcc4bold
markup.underline#5ca7e8underline
markup.quote punctuation.definition.blockquote.markdown#e8dcc4
markup.quote#e8dcc4
string.other.link.title.markdown#e8dcc4
string.other.link.description.title.markdown#d4c4a8
constant.other.reference.link.markdown#5ca7e8
markup.raw.block#d4c4a8
markup.raw.block.fenced.markdown#d4a57430
punctuation.definition.fenced.markdown#d4a57430
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e8dcc4
variable.language.fenced.markdown#e8dcc4
meta.separator#9e8b6fbold
markup.table#e8dcc4
meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.section.function, meta.brackets, punctuation.definition.brackets, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section, punctuation.section.block, punctuation.section.braces, punctuation.section.group, punctuation.section.parameters#7a6548
meta.function string.quoted.double.ts, meta.function string.quoted.single.ts, meta.function string.quoted.double.js, meta.function string.quoted.single.js, meta.function string.quoted.double.tsx, meta.function string.quoted.single.tsx#e8b88c
support.function.builtin.python, support.function.magic.python, support.type.builtin.python#5ca7e8bold
variable.parameter.function.python#e8b88cnormal
keyword.control.flow.python, keyword.control.import.python, keyword.control.statement.python, keyword.operator.member.python, keyword.operator.wordlike.python#ce7e4a
keyword.operator.logical.python, keyword.operator.arithmetic.python, keyword.operator.assignment.python, keyword.operator.comparison.python, keyword.operator.bitwise.python#e8b88c
storage.type.python, storage.type.annotation.python, storage.type.function.python, storage.type.class.python, storage.type.union.python, storage.type.intersection.python, storage.type.optional.python, storage.type.any.python, storage.type.unknown.python, storage.type.none.python#8b6239bold
variable.parameter.function.language.special.self.python#e8b88c
entity.name.type.class.python, entity.name.type.class.python punctuation.definition.class.python#8b6239
entity.name.function.python, meta.function.python entity.name.function.python#5ca7e8
variable.other.constant.python, variable.other.enummember.python, variable.other.property.python, variable.other.object.python, variable.other.readwrite.python#5ca7e8
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python punctuation.definition.format.placeholder.python#e8b88c
string.quoted.single.python, string.quoted.double.python, string.quoted.triple.single.python, string.quoted.triple.double.python, string.regexp.python, string.quoted.single.python punctuation.definition.string.begin.python, string.quoted.single.python punctuation.definition.string.end.python, string.quoted.double.python punctuation.definition.string.begin.python, string.quoted.double.python punctuation.definition.string.end.python, string.quoted.triple.single.python punctuation.definition.string.begin.python, string.quoted.triple.single.python punctuation.definition.string.end.python, string.quoted.triple.double.python punctuation.definition.string.begin.python, string.quoted.triple.double.python punctuation.definition.string.end.python#d4a574
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python#d4a574
constant.language.python#e8b88cnormal
meta.object-literal.key string.quoted.single.ts, meta.object-literal.key string.quoted.double.ts, meta.object-literal.key string.quoted.single.js, meta.object-literal.key string.quoted.double.js, meta.object-literal.key string.quoted.single.tsx, meta.object-literal.key string.quoted.double.tsx, meta.object.member string.quoted.single.ts, meta.object.member string.quoted.double.ts, meta.object.member string.quoted.single.js, meta.object.member string.quoted.double.js, meta.object.member string.quoted.single.tsx, meta.object.member string.quoted.double.tsx, meta.array.literal string.quoted.single.ts, meta.array.literal string.quoted.double.ts, meta.array.literal string.quoted.single.js, meta.array.literal string.quoted.double.js, meta.array.literal string.quoted.single.tsx, meta.array.literal string.quoted.double.tsx, meta.enum.declaration string.quoted.single.ts, meta.enum.declaration string.quoted.double.ts, meta.enum.declaration string.quoted.single.js, meta.enum.declaration string.quoted.double.js, meta.enum.declaration string.quoted.single.tsx, meta.enum.declaration string.quoted.double.tsx#8ca674
meta.tag string.quoted.single.ts, meta.tag string.quoted.double.ts, meta.tag string.quoted.single.js, meta.tag string.quoted.double.js, meta.tag string.quoted.single.tsx, meta.tag string.quoted.double.tsx, meta.attribute string.quoted.single.ts, meta.attribute string.quoted.double.ts, meta.attribute string.quoted.single.js, meta.attribute string.quoted.double.js, meta.attribute string.quoted.single.tsx, meta.attribute string.quoted.double.tsx#e8dcc4
meta.import string.quoted.single.ts, meta.import string.quoted.double.ts, meta.import string.quoted.single.js, meta.import string.quoted.double.js, meta.import string.quoted.single.tsx, meta.import string.quoted.double.tsx#e8dcc4
string.template.js, string.template.ts#d4a574
string.quoted.single.ansible, string.quoted.double.ansible, string.quoted.single.yaml.ansible, string.quoted.double.yaml.ansible, punctuation.definition.string.begin.ansible, punctuation.definition.string.end.ansible, punctuation.definition.string.begin.yaml.ansible, punctuation.definition.string.end.yaml.ansible#d4a574
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.quoted.double.json punctuation.definition.string.begin, string.quoted.double.json punctuation.definition.string.end, punctuation.support.type.property-name.begin.json.lines, punctuation.support.type.property-name.end.json.lines#d4a574