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#D79369
  • activityBar.background#120C08
  • activityBar.border#302722
  • activityBar.foreground#D8D2C4
  • activityBar.inactiveForeground#8A867C
  • activityBarBadge.background#E29668
  • activityBarBadge.foreground#1F211D
  • badge.background#362B25
  • badge.foreground#D8D2C4
  • button.background#D79369
  • button.border#1F211D1A
  • button.foreground#1F211D
  • button.hoverBackground#F2AC81
  • button.secondaryBackground#362B25
  • button.secondaryForeground#D8D2C4
  • button.secondaryHoverBackground#281E19
  • chat.editedFileForeground#D3B373
  • chat.slashCommandBackground#57331D99
  • chat.slashCommandForeground#F2AC81
  • checkbox.background#1E1510
  • checkbox.border#463A34
  • debugToolBar.background#120C08
  • descriptionForeground#8A867C
  • dropdown.background#1E1510
  • dropdown.border#463A34
  • dropdown.foreground#D8D2C4
  • dropdown.listBackground#1E1510
  • editor.background#1E1510
  • editor.findMatchBackground#D3B37388
  • editor.findMatchHighlightBackground#D3B37344
  • editor.foreground#D8D2C4
  • editor.inactiveSelectionBackground#362B25
  • editor.lineHighlightBackground#281E19
  • editor.selectionBackground#57331D
  • editor.selectionHighlightBackground#57331D88
  • editor.wordHighlightBackground#D3B37333
  • editor.wordHighlightStrongBackground#B4B67255
  • editorBracketMatch.background#D3B37355
  • editorBracketMatch.border#D3B373
  • editorCursor.foreground#E29668
  • editorGroup.border#302722
  • editorGroupHeader.tabsBackground#120C08
  • editorGroupHeader.tabsBorder#302722
  • editorGutter.addedBackground#C49A8B
  • editorGutter.deletedBackground#ED8B88
  • editorGutter.modifiedBackground#E19892
  • editorIndentGuide.activeBackground1#8A867C
  • editorIndentGuide.background1#302722
  • editorLineNumber.activeForeground#D79369
  • editorLineNumber.foreground#8A867C
  • editorOverviewRuler.border#302722
  • editorSuggestWidget.background#281E19
  • editorSuggestWidget.border#463A34
  • editorSuggestWidget.foreground#D8D2C4
  • editorSuggestWidget.highlightForeground#E19892
  • editorSuggestWidget.selectedBackground#362B25
  • editorWidget.background#281E19
  • editorWidget.border#463A34
  • errorForeground#ED8B88
  • focusBorder#D79369
  • foreground#D8D2C4
  • icon.foreground#D8D2C4
  • input.background#1E1510
  • input.border#463A34
  • input.foreground#D8D2C4
  • input.placeholderForeground#8A867C
  • inputOption.activeBackground#57331D99
  • inputOption.activeBorder#D79369
  • inputOption.activeForeground#FFFFFF
  • keybindingLabel.background#362B25
  • keybindingLabel.border#463A34
  • keybindingLabel.foreground#D8D2C4
  • list.activeSelectionBackground#57331D
  • list.activeSelectionForeground#FFFFFF
  • list.activeSelectionIconForeground#FFFFFF
  • list.dropBackground#D3B37355
  • list.focusAndSelectionOutline#D79369
  • list.focusBackground#57331D88
  • list.highlightForeground#E19892
  • list.hoverBackground#281E19
  • list.inactiveSelectionBackground#362B25
  • menu.background#1E1510
  • menu.border#463A34
  • menu.foreground#D8D2C4
  • menu.selectionBackground#D79369
  • menu.selectionForeground#1F211D
  • notebook.cellBorderColor#302722
  • notebook.selectedCellBackground#57331D66
  • notificationCenterHeader.background#120C08
  • notificationCenterHeader.foreground#D8D2C4
  • notifications.background#1E1510
  • notifications.border#302722
  • notifications.foreground#D8D2C4
  • panel.background#281E19
  • panel.border#302722
  • panelInput.border#463A34
  • panelTitle.activeBorder#D79369
  • panelTitle.activeForeground#D8D2C4
  • panelTitle.inactiveForeground#8A867C
  • peekViewEditor.background#1E1510
  • peekViewEditor.matchHighlightBackground#D3B37366
  • peekViewResult.background#281E19
  • peekViewResult.matchHighlightBackground#D3B37366
  • pickerGroup.border#463A34
  • pickerGroup.foreground#C49A8B
  • ports.iconRunningProcessForeground#D79369
  • progressBar.background#D79369
  • quickInput.background#281E19
  • quickInput.foreground#D8D2C4
  • searchEditor.textInputBorder#463A34
  • settings.dropdownBackground#1E1510
  • settings.dropdownBorder#463A34
  • settings.headerForeground#F0E8D8
  • settings.modifiedItemIndicator#D3B373
  • settings.numberInputBorder#463A34
  • settings.textInputBorder#463A34
  • sideBar.background#120C08
  • sideBar.border#302722
  • sideBar.foreground#D8D2C4
  • sideBarSectionHeader.background#281E19
  • sideBarSectionHeader.border#302722
  • sideBarSectionHeader.foreground#D8D2C4
  • sideBarTitle.foreground#F0E8D8
  • statusBar.background#120C08
  • statusBar.border#302722
  • statusBar.debuggingBackground#D3B373
  • statusBar.debuggingForeground#1F211D
  • statusBar.focusBorder#D79369
  • statusBar.foreground#D8D2C4
  • statusBar.noFolderBackground#1E1510
  • statusBarItem.errorBackground#ED8B88
  • statusBarItem.focusBorder#D79369
  • statusBarItem.hoverBackground#FFFFFF1A
  • statusBarItem.hoverForeground#F0E8D8
  • statusBarItem.prominentBackground#362B25
  • statusBarItem.remoteBackground#D79369
  • statusBarItem.remoteForeground#1F211D
  • tab.activeBackground#1E1510
  • tab.activeBorder#1E1510
  • tab.activeBorderTop#D79369
  • tab.activeForeground#F0E8D8
  • tab.border#302722
  • tab.hoverBackground#1E1510
  • tab.inactiveBackground#120C08
  • tab.inactiveForeground#8A867C
  • tab.lastPinnedBorder#463A34
  • tab.selectedBorderTop#E29668
  • tab.unfocusedActiveBorder#1E1510
  • tab.unfocusedActiveBorderTop#302722
  • tab.unfocusedHoverBackground#120C08
  • terminal.ansiBlack#1A1B18
  • terminal.ansiBlue#E19892
  • terminal.ansiBrightBlack#8A867C
  • terminal.ansiBrightBlue#E19892
  • terminal.ansiBrightCyan#E5A2AC
  • terminal.ansiBrightGreen#D79369
  • terminal.ansiBrightMagenta#B4B672
  • terminal.ansiBrightRed#E29668
  • terminal.ansiBrightWhite#F0E8D8
  • terminal.ansiBrightYellow#D3B373
  • terminal.ansiCyan#E5A2AC
  • terminal.ansiGreen#D7AB7D
  • terminal.ansiMagenta#B4B672
  • terminal.ansiRed#ED8B88
  • terminal.ansiWhite#D8D2C4
  • terminal.ansiYellow#D3B373
  • terminal.background#1E1510
  • terminal.foreground#D8D2C4
  • terminal.inactiveSelectionBackground#362B25
  • terminal.tab.activeBorder#D79369
  • terminalCursor.foreground#E29668
  • textBlockQuote.background#281E19
  • textBlockQuote.border#C49A8B
  • textCodeBlock.background#281E19
  • textLink.activeForeground#E29668
  • textLink.foreground#E19892
  • textPreformat.background#362B25
  • textPreformat.foreground#D8D2C4
  • textSeparator.foreground#463A34
  • titleBar.activeBackground#120C08
  • titleBar.activeForeground#D8D2C4
  • titleBar.border#302722
  • titleBar.inactiveBackground#1E1510
  • titleBar.inactiveForeground#8A867C
  • welcomePage.progress.foreground#D79369
  • welcomePage.tileBackground#281E19
  • widget.border#463A34

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#D8D2C4
emphasisitalic
strongbold
comment#C49A8B
constant.language#E19892
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#D7AB7D
constant.regexp#B4B672
entity.name.tag, entity.name.selector#E29668
entity.other.attribute-name#E19892
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.scss#D3B373
invalid#ED8B88
markup.underlineunderline
markup.bold#E19892bold
markup.heading#E29668bold
markup.italic#B4B672italic
markup.strikethroughstrikethrough
markup.deleted#ED8B88
markup.inserted#C49A8B
markup.changed#D3B373
markup.quote#C49A8B
markup.inline.raw#D7AB7D
meta.diff.header#E19892
storage#E29668
storage.type#E29668
keyword, keyword.control, keyword.operator.expression#E29668
keyword.operator#D8D2C4
string, constant.other.symbol#D7AB7D
punctuation.definition.string, punctuation.definition.comment#8A867C
support.function, entity.name.function#D3B373
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#E19892
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#C6D6DE
variable.language, constant.character.escape#E29668
meta.object-literal.key, entity.name.label#C6D6DE
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#D3B373
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#E29668
keyword.operator.quantifier.regexp#D8D2C4
constant.character, constant.other.option#E19892