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.activeBackground#D07C5B20
  • activityBar.activeBorder#E2BB77
  • activityBar.background#201713
  • activityBar.border#2B1F1A
  • activityBar.foreground#D07C5B
  • activityBar.inactiveForeground#82685E
  • activityBarBadge.background#D07C5B
  • activityBarBadge.foreground#1B1614
  • badge.background#D07C5B
  • badge.foreground#1B1614
  • breadcrumb.activeSelectionForeground#D07C5B
  • breadcrumb.background#1B1614
  • breadcrumb.focusForeground#EBDCC8
  • breadcrumb.foreground#9C8779
  • breadcrumbPicker.background#2A1D19
  • button.background#D07C5B
  • button.foreground#1B1614
  • button.hoverBackground#C36C4B
  • button.secondaryBackground#402C24
  • button.secondaryForeground#EBDCC8
  • button.secondaryHoverBackground#503C34
  • dropdown.background#2A1D19
  • dropdown.border#402C24
  • dropdown.foreground#EBDCC8
  • dropdown.listBackground#2A1D19
  • editor.background#1B1614
  • editor.findMatchBackground#E2BB7760
  • editor.findMatchHighlightBackground#E2BB7740
  • editor.findRangeHighlightBackground#D07C5B20
  • editor.foreground#EBDCC8
  • editor.inactiveSelectionBackground#402C2460
  • editor.lineHighlightBackground#2B1F1A
  • editor.selectionBackground#D07C5B40
  • editor.selectionHighlightBackground#D07C5B20
  • editor.wordHighlightBackground#E2BB7730
  • editor.wordHighlightStrongBackground#C78C9930
  • editorBracketHighlight.foreground1#D07C5B
  • editorBracketHighlight.foreground2#E2BB77
  • editorBracketHighlight.foreground3#C78C99
  • editorBracketHighlight.foreground4#A6B07A
  • editorBracketHighlight.foreground5#9AB0B8
  • editorBracketHighlight.foreground6#92B8B0
  • editorBracketMatch.background#D07C5B40
  • editorBracketMatch.border#D07C5B
  • editorCodeLens.foreground#9C8779
  • editorCursor.foreground#E2BB77
  • editorError.foreground#D07C5B
  • editorGroup.border#2B1F1A
  • editorGroupHeader.tabsBackground#1B1614
  • editorGroupHeader.tabsBorder#2B1F1A
  • editorHint.foreground#92B8B0
  • editorIndentGuide.activeBackground1#D07C5B
  • editorIndentGuide.background1#3A2C26
  • editorInfo.foreground#9AB0B8
  • editorLightBulb.foreground#E2BB77
  • editorLightBulbAutoFix.foreground#A6B07A
  • editorLineNumber.activeForeground#D07C5B
  • editorLineNumber.foreground#7A665B
  • editorRuler.foreground#3A2C26
  • editorWarning.foreground#E2BB77
  • extensionButton.prominentBackground#D07C5B
  • extensionButton.prominentForeground#1B1614
  • extensionButton.prominentHoverBackground#C36C4B
  • gitDecoration.addedResourceForeground#A6B07A
  • gitDecoration.conflictingResourceForeground#C78C99
  • gitDecoration.deletedResourceForeground#D07C5B
  • gitDecoration.ignoredResourceForeground#7A665B
  • gitDecoration.modifiedResourceForeground#E2BB77
  • gitDecoration.submoduleResourceForeground#92B8B0
  • gitDecoration.untrackedResourceForeground#9AB0B8
  • input.background#2A1D19
  • input.border#402C24
  • input.foreground#EBDCC8
  • input.placeholderForeground#9C8779
  • inputOption.activeBorder#D07C5B
  • inputValidation.errorBackground#D07C5B20
  • inputValidation.errorBorder#D07C5B
  • inputValidation.infoBackground#9AB0B820
  • inputValidation.infoBorder#9AB0B8
  • inputValidation.warningBackground#E2BB7720
  • inputValidation.warningBorder#E2BB77
  • list.activeSelectionBackground#3A261F
  • list.activeSelectionForeground#F3E8DC
  • list.dropBackground#402C24
  • list.errorForeground#D07C5B
  • list.focusBackground#211712
  • list.focusForeground#EBDCC8
  • list.highlightForeground#D07C5B
  • list.hoverBackground#2A1D19
  • list.inactiveSelectionBackground#251A17
  • list.inactiveSelectionForeground#D2B8A1
  • list.warningForeground#E2BB77
  • menu.background#2A1D19
  • menu.foreground#EBDCC8
  • menu.selectionBackground#3A261F
  • menu.selectionBorder#D07C5B
  • menu.selectionForeground#F3E8DC
  • menu.separatorBackground#402C24
  • menubar.selectionBackground#3A261F
  • menubar.selectionForeground#F3E8DC
  • notificationCenter.border#2B1F1A
  • notificationCenterHeader.background#2B1F1A
  • notificationCenterHeader.foreground#EBDCC8
  • notificationLink.foreground#D07C5B
  • notifications.background#2A1D19
  • notifications.border#2B1F1A
  • notifications.foreground#EBDCC8
  • notificationToast.border#2B1F1A
  • panel.background#1B1614
  • panel.border#2B1F1A
  • panelTitle.activeBorder#D07C5B
  • panelTitle.activeForeground#EBDCC8
  • panelTitle.inactiveForeground#9C8779
  • peekView.border#D07C5B
  • peekViewEditor.background#251A17
  • peekViewEditor.matchHighlightBackground#D07C5B40
  • peekViewResult.background#1B1614
  • peekViewResult.fileForeground#EBDCC8
  • peekViewResult.lineForeground#D2B8A1
  • peekViewResult.matchHighlightBackground#D07C5B40
  • peekViewResult.selectionBackground#3A261F
  • peekViewResult.selectionForeground#F3E8DC
  • peekViewTitle.background#201713
  • peekViewTitleDescription.foreground#9C8779
  • peekViewTitleLabel.foreground#EBDCC8
  • pickerGroup.border#2B1F1A
  • pickerGroup.foreground#D07C5B
  • quickInput.background#2A1D19
  • quickInput.foreground#EBDCC8
  • scrollbarSlider.activeBackground#6B5340
  • scrollbarSlider.background#6B534050
  • scrollbarSlider.hoverBackground#6B534080
  • settings.checkboxBackground#2A1D19
  • settings.checkboxBorder#402C24
  • settings.checkboxForeground#EBDCC8
  • settings.dropdownBackground#2A1D19
  • settings.dropdownBorder#402C24
  • settings.dropdownForeground#EBDCC8
  • settings.headerForeground#EBDCC8
  • settings.modifiedItemIndicator#D07C5B
  • settings.numberInputBackground#2A1D19
  • settings.numberInputBorder#402C24
  • settings.numberInputForeground#EBDCC8
  • settings.textInputBackground#2A1D19
  • settings.textInputBorder#402C24
  • settings.textInputForeground#EBDCC8
  • sideBar.background#191311
  • sideBar.border#2B1F1A
  • sideBar.foreground#D2B8A1
  • sideBarSectionHeader.background#2B1F1A
  • sideBarSectionHeader.border#3A2C26
  • sideBarSectionHeader.foreground#D07C5B
  • sideBarTitle.foreground#EBDCC8
  • statusBar.background#1B1614
  • statusBar.border#2B1F1A
  • statusBar.debuggingBackground#D07C5B
  • statusBar.debuggingForeground#1B1614
  • statusBar.foreground#D07C5B
  • statusBar.noFolderBackground#1B1614
  • statusBar.noFolderForeground#D07C5B
  • statusBarItem.activeBackground#D07C5B40
  • statusBarItem.hoverBackground#D07C5B20
  • statusBarItem.prominentBackground#E2BB77
  • statusBarItem.prominentForeground#1B1614
  • statusBarItem.prominentHoverBackground#C78C99
  • tab.activeBackground#1B1614
  • tab.activeBorder#D07C5B
  • tab.activeBorderTop#E2BB77
  • tab.activeForeground#F3E8DC
  • tab.border#2B1F1A
  • tab.hoverBackground#2B1F1A
  • tab.hoverForeground#D2B8A1
  • tab.inactiveBackground#1B161488
  • tab.inactiveForeground#82685E
  • tab.unfocusedActiveBackground#1B161488
  • tab.unfocusedActiveForeground#D2B8A1
  • tab.unfocusedInactiveForeground#7A665B
  • terminal.ansiBlack#1E1815
  • terminal.ansiBlue#9AB0B8
  • terminal.ansiBrightBlack#7A665B
  • terminal.ansiBrightBlue#AAC0C8
  • terminal.ansiBrightCyan#A2C8C0
  • terminal.ansiBrightGreen#B6C08A
  • terminal.ansiBrightMagenta#D79CA9
  • terminal.ansiBrightRed#E08C6B
  • terminal.ansiBrightWhite#F7EEDD
  • terminal.ansiBrightYellow#F2CB87
  • terminal.ansiCyan#92B8B0
  • terminal.ansiGreen#A6B07A
  • terminal.ansiMagenta#C78C99
  • terminal.ansiRed#D07C5B
  • terminal.ansiWhite#EBDCC8
  • terminal.ansiYellow#E2BB77
  • terminal.background#1B1614
  • terminal.border#2B1F1A
  • terminal.foreground#EBDCC8
  • terminal.selectionBackground#D07C5B40
  • titleBar.activeBackground#1B1614
  • titleBar.activeForeground#EBDCC8
  • titleBar.border#2B1F1A
  • titleBar.inactiveBackground#1B161488
  • titleBar.inactiveForeground#9C8779
  • tree.indentGuidesStroke#3A2C26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8D7569italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator, keyword.other, keyword.operator.new, keyword.operator.expression, keyword.other.debugger#C78C99italic
string, constant.other.symbol, string.quoted, string.template#A6B07A
string.template, punctuation.definition.string.template#A6B07A
meta.template.expression, punctuation.definition.template-expression#E2BB77
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#D07C5B
constant.language, support.constant, variable.language#9AB0B8
variable, identifier, meta.definition.variable, meta.definition.variable.name, support.variable#F3E8DC
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#E2BB77
entity.name.type, entity.name.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#92B8B0
support.type#92B8B0
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#92B8B0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#D07C5B
variable.language.this, variable.language.super#C78C99italic
entity.name.method.js#E2BB77
meta.class-method.js entity.name.function.js, variable.function.constructor#E2BB77
entity.other.attribute-name#C78C99italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#C78C99italic
entity.other.attribute-name.class#E2BB77
source.sass keyword.control#E2BB77
markup.inserted#A6B07A
markup.deleted#D07C5B
markup.changed#C78C99
string.regexp#92B8B0
constant.character.escape#92B8B0
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#E2BB77italic
source.js constant.other.object.key.js string.unquoted.label.js#D07C5Bitalic
source.json meta.structure.dictionary.json support.type.property-name.json#C78C99
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E2BB77
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D07C5B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A6B07A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9AB0B8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#92B8B0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C78C99
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E2BB77
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#D07C5B
text.html.markdown, punctuation.definition.list_item.markdown#EBDCC8
text.html.markdown markup.inline.raw.markdown#C78C99
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#92B8B0
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#E2BB77bold
markup.italic#C78C99italic
markup.bold, markup.bold string#D07C5Bbold
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#E2BB77bold
markup.underline#E2BB77underline
markup.quote punctuation.definition.blockquote.markdown#92B8B0
markup.quoteitalic
string.other.link.title.markdown#E2BB77
string.other.link.description.title.markdown#C78C99
constant.other.reference.link.markdown#D07C5B
markup.raw.block#C78C99
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EBDCC8
variable.language.fenced.markdown#92B8B0
meta.separator#92B8B0bold
markup.table#EBDCC8
entity.name.tag, meta.tag, punctuation.definition.tag#C78C99
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, source.css entity.name.tag#C78C99
support.type.property-name.css#92B8B0
support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css#A6B07A
invalid, invalid.illegal#D07C5Bitalic underline
invalid.deprecated#C78C99italic underline
support.class.component#C78C99italic
support.function.lifecycle.react#E2BB77
entity.name.type.ts, entity.name.type.tsx, support.type.primitive.ts, support.type.primitive.tsx#92B8B0
entity.name.type.interface.ts, entity.name.type.interface.tsx#9AB0B8
meta.type.parameters.ts, meta.type.parameters.tsx#C78C99
storage, storage.modifier#C78C99italic bold
entity.name.function.constructor#E2BB77bold
support.variable, support.constant#9AB0B8bold
variable.other.constant#D07C5Bitalic
meta.embedded, source.groovy.embedded, string.template#A6B07A
variable.parameter#F3E8DCitalic
punctuation.separator.key-value, punctuation.separator.dictionary.key-value, punctuation.separator.key-value.json, punctuation.separator.dictionary.key-value.json#D2B8A1
string.quoted.double.json#A6B07A
meta.structure.dictionary.json string.quoted.double.json#F3E8DC
constant.language.json, constant.numeric.json#D07C5B
comment.line.double-slash.json#8D7569italic
entity.name.class.coffee, support.class.roast#8B4513bold
meta.mystic, entity.name.mystic#D2691Eitalic
constant.roast.level, variable.roast.temperature#CD853Fbold italic