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#1F1912
  • activityBar.border#1A3529
  • activityBar.foreground#D0C3AE
  • activityBar.inactiveForeground#938A7A
  • activityBarBadge.background#D95B4A
  • agentSessionReadIndicator.foreground#7DA494
  • agentSessionSelectedBadge.border#453B2B
  • badge.background#244A3C
  • badge.foreground#D0C3AE
  • breadcrumb.activeSelectionForeground#7DA494
  • breadcrumb.background#261F16
  • breadcrumb.focusForeground#D0C3AE
  • breadcrumb.foreground#938A7A
  • button.background#244A3C
  • button.foreground#D0C3AE
  • button.hoverBackground#305A4A
  • button.secondaryBackground#2F271C
  • button.secondaryForeground#D0C3AE
  • button.secondaryHoverBackground#453B2B
  • chat.avatarBackground#244A3C
  • chat.avatarForeground#D0C3AE
  • chat.checkpointSeparator#453B2B
  • chat.requestBackground#261F16
  • chat.requestBorder#453B2B
  • chat.requestBubbleBackground#261F16
  • chat.requestCodeBorder#453B2B
  • chat.thinkingShimmer#2F271C
  • commandCenter.background#261F16
  • commandCenter.border#453B2B
  • commandCenter.foreground#D0C3AE
  • commandCenter.inactiveForeground#938A7A
  • descriptionForeground#938A7A
  • diffEditor.insertedTextBackground#7B9E5A22
  • diffEditor.removedTextBackground#D95B4A22
  • dropdown.background#261F16
  • dropdown.border#453B2B
  • dropdown.foreground#D0C3AE
  • editor.background#261F16
  • editor.findMatchBackground#8B6350
  • editor.findMatchHighlightBackground#6B5040
  • editor.findRangeHighlightBackground#453B2B66
  • editor.foreground#D0C3AE
  • editor.hoverHighlightBackground#7DA4941A
  • editor.inactiveSelectionBackground#453B2B66
  • editor.lineHighlightBackground#2F271C
  • editor.selectionBackground#5C4A3A
  • editor.selectionHighlightBackground#4A3C2F
  • editor.wordHighlightBackground#4A3C2F
  • editor.wordHighlightStrongBackground#5C4A3A
  • editorBracketHighlight.foreground1#D9A85F
  • editorBracketHighlight.foreground2#7DA494
  • editorBracketHighlight.foreground3#E3947C
  • editorBracketHighlight.foreground5#D0C3AE
  • editorBracketHighlight.foreground6#938A7A
  • editorBracketHighlight.unexpectedBracket.foreground#D95B4A
  • editorBracketMatch.background#D95B4A33
  • editorBracketMatch.border#D95B4A
  • editorBracketPairGuide.activeBackground1#8B635099
  • editorBracketPairGuide.activeBackground2#D9A85F88
  • editorBracketPairGuide.activeBackground3#7DA49488
  • editorBracketPairGuide.activeBackground4#D95B4A88
  • editorBracketPairGuide.activeBackground5#A45F8B88
  • editorBracketPairGuide.activeBackground6#938A7A88
  • editorBracketPairGuide.background1#6B504033
  • editorBracketPairGuide.background2#D9A85F2E
  • editorBracketPairGuide.background3#7DA49433
  • editorBracketPairGuide.background4#D95B4A2E
  • editorBracketPairGuide.background5#A45F8B2E
  • editorBracketPairGuide.background6#938A7A33
  • editorCursor.foreground#7DA494
  • editorError.foreground#D95B4A
  • editorGroupHeader.tabsBackground#1F1912
  • editorGutter.addedBackground#7B9E5A
  • editorGutter.background#261F16
  • editorGutter.deletedBackground#D95B4A
  • editorHint.foreground#938A7A
  • editorHoverWidget.background#261F16
  • editorHoverWidget.border#453B2B
  • editorIndentGuide.activeBackground#6B6255
  • editorIndentGuide.activeBackground1#6B6255
  • editorIndentGuide.activeBackground2#8A7E6D
  • editorIndentGuide.activeBackground3#5A8A78
  • editorIndentGuide.activeBackground4#6B6255
  • editorIndentGuide.activeBackground5#8A7E6D
  • editorIndentGuide.activeBackground6#5A8A78
  • editorIndentGuide.background#453B2B
  • editorIndentGuide.background1#453B2B66
  • editorIndentGuide.background2#5C4A3A66
  • editorIndentGuide.background3#244A3C66
  • editorIndentGuide.background4#453B2B66
  • editorIndentGuide.background5#5C4A3A66
  • editorIndentGuide.background6#244A3C66
  • editorInfo.foreground#7DA494
  • editorLineNumber.activeForeground#D0C3AE
  • editorLineNumber.foreground#938A7A
  • editorOverviewRuler.border#453B2B
  • editorOverviewRuler.findMatchForeground#D95B4A
  • editorRuler.foreground#453B2B
  • editorSuggestWidget.background#261F16
  • editorSuggestWidget.border#453B2B
  • editorSuggestWidget.selectedBackground#2F271C
  • editorWarning.foreground#E3947C
  • editorWhitespace.foreground#938A7A
  • editorWidget.background#261F16
  • editorWidget.border#453B2B
  • errorForeground#D95B4A
  • focusBorder#7DA49466
  • foreground#D0C3AE
  • git.blame.editorDecorationForeground#6B5040
  • gitDecoration.addedResourceForeground#7B9E5A
  • gitDecoration.conflictingResourceForeground#D95B4A
  • gitDecoration.deletedResourceForeground#D95B4A
  • gitDecoration.ignoredResourceForeground#938A7A
  • gitDecoration.untrackedResourceForeground#7B9E5A
  • input.background#1F1912
  • input.border#453B2B
  • input.foreground#D0C3AE
  • input.placeholderForeground#938A7A
  • inputOption.activeBorder#7DA494
  • inputValidation.errorBackground#261F16
  • inputValidation.errorBorder#D95B4A
  • inputValidation.infoBackground#261F16
  • inputValidation.infoBorder#7DA494
  • inputValidation.warningBackground#261F16
  • inputValidation.warningBorder#E3947C
  • list.activeSelectionBackground#453B2B
  • list.activeSelectionForeground#D0C3AE
  • list.focusBackground#2F271C
  • list.focusForeground#D0C3AE
  • list.highlightForeground#7DA494
  • list.hoverBackground#2F271C
  • list.inactiveSelectionBackground#2F271C
  • menu.background#261F16
  • menu.foreground#D0C3AE
  • menu.selectionBackground#2F271C
  • menu.selectionForeground#D0C3AE
  • menu.separatorBackground#453B2B
  • minimap.background#1F1912
  • minimap.selectionHighlight#453B2B
  • notebook.cellBorderColor#453B2B
  • notebook.cellHoverBackground#2F271C
  • notebook.cellInsertionIndicator#7DA494
  • notebook.cellStatusBarItemHoverBackground#453B2B
  • notebook.editorBackground#261F16
  • notificationCenterHeader.background#1F1912
  • notificationCenterHeader.foreground#D0C3AE
  • notifications.background#261F16
  • notifications.border#453B2B
  • notifications.foreground#D0C3AE
  • panel.background#1F1912
  • panel.border#453B2B
  • panelTitle.activeBorder#7DA494
  • panelTitle.activeForeground#D0C3AE
  • panelTitle.inactiveForeground#938A7A
  • peekView.border#453B2B
  • peekViewEditor.background#2F271C
  • peekViewEditor.matchHighlightBackground#D95B4A44
  • peekViewResult.background#261F16
  • peekViewResult.matchHighlightBackground#D95B4A44
  • peekViewResult.selectionBackground#453B2B
  • peekViewTitle.background#1F1912
  • pickerGroup.border#453B2B
  • pickerGroup.foreground#7DA494
  • progressBar.background#7DA494
  • quickInput.background#261F16
  • quickInput.foreground#D0C3AE
  • quickInputTitle.background#1F1912
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#938A7A
  • scrollbarSlider.background#453B2B66
  • scrollbarSlider.hoverBackground#453B2B
  • settings.dropdownBackground#261F16
  • settings.dropdownBorder#453B2B
  • settings.headerForeground#7DA494
  • settings.textInputBackground#1F1912
  • settings.textInputBorder#453B2B
  • sideBar.background#1F1912
  • sideBar.border#453B2B
  • sideBar.foreground#D0C3AE
  • sideBarSectionHeader.background#1F1912
  • sideBarSectionHeader.border#453B2B
  • sideBarSectionHeader.foreground#D0C3AE
  • sideBarTitle.foreground#D0C3AE
  • statusBar.background#A83E32
  • statusBar.debuggingBackground#E3947C
  • statusBar.debuggingForeground#261F16
  • statusBar.noFolderBackground#6B5040
  • statusBar.noFolderForeground#D0C3AE
  • statusBarItem.activeBackground#FFFFFF33
  • statusBarItem.prominentBackground#D95B4A
  • statusBarItem.prominentHoverBackground#E3947C
  • tab.activeBackground#261F16
  • tab.activeBorderTop#D95B4A
  • tab.activeForeground#D0C3AE
  • tab.border#453B2B
  • tab.inactiveBackground#1F1912
  • tab.inactiveForeground#938A7A
  • terminal.ansiBlack#1F1912
  • terminal.ansiBlue#7DA494
  • terminal.ansiBrightBlack#938A7A
  • terminal.ansiBrightBlue#9DBFAD
  • terminal.ansiBrightCyan#A8CCBB
  • terminal.ansiBrightGreen#A0C48A
  • terminal.ansiBrightRed#E3947C
  • terminal.ansiBrightWhite#F3EAD8
  • terminal.ansiCyan#9DBFAD
  • terminal.ansiGreen#7B9E5A
  • terminal.ansiRed#D95B4A
  • terminal.ansiWhite#D0C3AE
  • terminal.background#261F16
  • terminal.foreground#D0C3AE
  • testing.coveredBackground#2F271C
  • testing.coveredBorder#453B2B
  • testing.iconErrored#E3947C
  • testing.iconFailed#D95B4A
  • testing.iconPassed#7B9E5A
  • testing.runAction#7DA494
  • textBlockQuote.background#1F1912
  • textBlockQuote.border#453B2B
  • textCodeBlock.background#2F271C
  • textLink.activeForeground#9DBFAD
  • textLink.foreground#7DA494
  • textPreformat.foreground#D0C3AE
  • textSeparator.foreground#453B2B
  • titleBar.activeBackground#1F1912
  • titleBar.activeForeground#9DBFAD
  • titleBar.border#453B2B
  • titleBar.inactiveBackground#241D15
  • titleBar.inactiveForeground#7DA494
  • tree.indentGuidesStroke#938A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#D0C3AE
comment, punctuation.definition.comment#938A7A
keyword, storage.type, storage.modifier#D95B4A
string, punctuation.definition.string#E3947C
constant.numeric, constant.language, support.constant#D95B4A
entity.name.function, support.function#7DA494
entity.name.type, entity.name.class, entity.name.tag, support.type, support.class#7DA494
variable, variable.parameter, variable.other#D0C3AE
punctuation, meta.brace, punctuation.definition#938A7A
entity.name.tag#7DA494
entity.other.attribute-name#D95B4A
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, support.variable.property#D9A85F
variable.parameter, meta.function.parameters#C5B79F
entity.name.namespace, entity.name.module, support.module#7DA494
meta.decorator, entity.name.function.decorator, punctuation.decorator#E3947C
string.regexp, constant.character.escape#E3947C
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json#7DA494
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, support.type.property-name.css#9DBFAD
markup.heading, punctuation.definition.heading#E3947C
markup.inline.raw, markup.underline.link, string.other.link#7DA494
invalid#D95B4A
source#D0C3AE
comment, punctuation.definition.comment#938A7A
keyword, storage.type, storage.modifier#D95B4A
string, punctuation.definition.string#E3947C
constant.numeric, constant.language, support.constant#D95B4A
entity.name.function, support.function#7DA494
entity.name.type, entity.name.class, entity.name.tag, support.type, support.class#7DA494
variable, variable.parameter, variable.other#D0C3AE
punctuation, meta.brace, punctuation.definition#938A7A
entity.name.tag#7DA494
entity.other.attribute-name#D95B4A
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, support.variable.property#D9A85F
variable.parameter, meta.function.parameters#C5B79F
entity.name.namespace, entity.name.module, support.module#7DA494
meta.decorator, entity.name.function.decorator, punctuation.decorator#E3947C
string.regexp, constant.character.escape#E3947C
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json#7DA494
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, support.type.property-name.css#9DBFAD
markup.heading, punctuation.definition.heading#E3947C
markup.inline.raw, markup.underline.link, string.other.link#7DA494
invalid#D95B4A
source
comment, punctuation.definition.commentnormal
keyword, storage.type, storage.modifierbold
string, punctuation.definition.stringitalic
constant.numeric, constant.language, support.constant
entity.name.function, support.function
entity.name.type, entity.name.class, entity.name.tag, support.type, support.classbold
variable, variable.parameter, variable.other
punctuation, meta.brace, punctuation.definition
entity.name.tag
entity.other.attribute-name
variable.other.property, variable.other.object.property, variable.other.member, meta.object-literal.key, support.variable.property
variable.parameter, meta.function.parameters
entity.name.namespace, entity.name.module, support.module
meta.decorator, entity.name.function.decorator, punctuation.decorator
string.regexp, constant.character.escape
support.type.property-name.json, meta.structure.dictionary.json string.quoted.double.json
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, support.type.property-name.css
markup.heading, punctuation.definition.headingbold
markup.inline.raw, markup.underline.link, string.other.link
markup.italicitalic
markup.boldbold
invalidunderline