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#A55251
  • activityBar.background#FCECEB
  • activityBar.border#E6D2D1
  • activityBar.foreground#2F2B26
  • activityBar.inactiveForeground#7B766A
  • activityBarBadge.background#954343
  • activityBarBadge.foreground#FFFFFF
  • badge.background#F1DBDA
  • badge.foreground#2F2B26
  • button.background#A55251
  • button.border#FFFFFF1A
  • button.foreground#FFFFFF
  • button.hoverBackground#883839
  • button.secondaryBackground#F1DBDA
  • button.secondaryForeground#2F2B26
  • button.secondaryHoverBackground#FFF2F1
  • chat.editedFileForeground#945D36
  • chat.slashCommandBackground#FFCDCA99
  • chat.slashCommandForeground#883839
  • checkbox.background#FFF7F6
  • checkbox.border#D9C1BF
  • debugToolBar.background#FCECEB
  • descriptionForeground#7B766A
  • dropdown.background#FFF7F6
  • dropdown.border#D9C1BF
  • dropdown.foreground#2F2B26
  • dropdown.listBackground#FFF7F6
  • editor.background#FFF7F6
  • editor.findMatchBackground#945D3666
  • editor.findMatchHighlightBackground#945D3655
  • editor.foreground#2F2B26
  • editor.inactiveSelectionBackground#F1DBDA
  • editor.lineHighlightBackground#FFF2F1
  • editor.selectionBackground#FFCDCA
  • editor.selectionHighlightBackground#FFCDCA88
  • editor.wordHighlightBackground#945D3640
  • editor.wordHighlightStrongBackground#7E5D1D66
  • editorBracketMatch.background#945D3655
  • editorBracketMatch.border#945D36
  • editorCursor.foreground#954343
  • editorGroup.border#E6D2D1
  • editorGroupHeader.tabsBackground#FCECEB
  • editorGroupHeader.tabsBorder#E6D2D1
  • editorGutter.addedBackground#764E54
  • editorGutter.deletedBackground#9C4343
  • editorGutter.modifiedBackground#874A64
  • editorIndentGuide.activeBackground1#7B766A
  • editorIndentGuide.background1#E6D2D1
  • editorLineNumber.activeForeground#A55251
  • editorLineNumber.foreground#7B766A
  • editorOverviewRuler.border#E6D2D1
  • editorSuggestWidget.background#FFF2F1
  • editorSuggestWidget.border#D9C1BF
  • editorSuggestWidget.foreground#2F2B26
  • editorSuggestWidget.highlightForeground#874A64
  • editorSuggestWidget.selectedBackground#F1DBDA
  • editorWidget.background#FFF2F1
  • editorWidget.border#D9C1BF
  • errorForeground#9C4343
  • focusBorder#A55251
  • foreground#2F2B26
  • icon.foreground#2F2B26
  • input.background#FFF7F6
  • input.border#D9C1BF
  • input.foreground#2F2B26
  • input.placeholderForeground#7B766A
  • inputOption.activeBackground#FFCDCA99
  • inputOption.activeBorder#A55251
  • inputOption.activeForeground#1F211D
  • keybindingLabel.background#F1DBDA
  • keybindingLabel.border#D9C1BF
  • keybindingLabel.foreground#2F2B26
  • list.activeSelectionBackground#FFCDCA
  • list.activeSelectionForeground#1F211D
  • list.activeSelectionIconForeground#1F211D
  • list.dropBackground#945D3655
  • list.focusAndSelectionOutline#A55251
  • list.focusBackground#FFCDCA88
  • list.highlightForeground#874A64
  • list.hoverBackground#FFF2F1
  • list.inactiveSelectionBackground#F1DBDA
  • menu.background#FFF7F6
  • menu.border#D9C1BF
  • menu.foreground#2F2B26
  • menu.selectionBackground#A55251
  • menu.selectionForeground#FFFFFF
  • notebook.cellBorderColor#E6D2D1
  • notebook.selectedCellBackground#FFCDCA66
  • notificationCenterHeader.background#FCECEB
  • notificationCenterHeader.foreground#2F2B26
  • notifications.background#FFF7F6
  • notifications.border#E6D2D1
  • notifications.foreground#2F2B26
  • panel.background#FFF2F1
  • panel.border#E6D2D1
  • panelInput.border#D9C1BF
  • panelTitle.activeBorder#A55251
  • panelTitle.activeForeground#2F2B26
  • panelTitle.inactiveForeground#7B766A
  • peekViewEditor.background#FFF7F6
  • peekViewEditor.matchHighlightBackground#945D3666
  • peekViewResult.background#FFF2F1
  • peekViewResult.matchHighlightBackground#945D3666
  • pickerGroup.border#D9C1BF
  • pickerGroup.foreground#764E54
  • ports.iconRunningProcessForeground#A55251
  • progressBar.background#A55251
  • quickInput.background#FFF2F1
  • quickInput.foreground#2F2B26
  • searchEditor.textInputBorder#D9C1BF
  • settings.dropdownBackground#FFF7F6
  • settings.dropdownBorder#D9C1BF
  • settings.headerForeground#1F1B16
  • settings.modifiedItemIndicator#945D36
  • settings.numberInputBorder#D9C1BF
  • settings.textInputBorder#D9C1BF
  • sideBar.background#FCECEB
  • sideBar.border#E6D2D1
  • sideBar.foreground#2F2B26
  • sideBarSectionHeader.background#FFF2F1
  • sideBarSectionHeader.border#E6D2D1
  • sideBarSectionHeader.foreground#2F2B26
  • sideBarTitle.foreground#1F1B16
  • statusBar.background#FCECEB
  • statusBar.border#E6D2D1
  • statusBar.debuggingBackground#945D36
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#A55251
  • statusBar.foreground#2F2B26
  • statusBar.noFolderBackground#FFF7F6
  • statusBarItem.errorBackground#9C4343
  • statusBarItem.focusBorder#A55251
  • statusBarItem.hoverBackground#1F211D1A
  • statusBarItem.hoverForeground#1F1B16
  • statusBarItem.prominentBackground#F1DBDA
  • statusBarItem.remoteBackground#A55251
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FFF7F6
  • tab.activeBorder#FFF7F6
  • tab.activeBorderTop#A55251
  • tab.activeForeground#1F1B16
  • tab.border#E6D2D1
  • tab.hoverBackground#FFF7F6
  • tab.inactiveBackground#FCECEB
  • tab.inactiveForeground#7B766A
  • tab.lastPinnedBorder#D9C1BF
  • tab.selectedBorderTop#954343
  • tab.unfocusedActiveBorder#FFF7F6
  • tab.unfocusedActiveBorderTop#E6D2D1
  • tab.unfocusedHoverBackground#FCECEB
  • terminal.ansiBlack#2F2B26
  • terminal.ansiBlue#874A64
  • terminal.ansiBrightBlack#7B766A
  • terminal.ansiBrightBlue#874A64
  • terminal.ansiBrightCyan#885677
  • terminal.ansiBrightGreen#A55251
  • terminal.ansiBrightMagenta#7E5D1D
  • terminal.ansiBrightRed#954343
  • terminal.ansiBrightWhite#1F1B16
  • terminal.ansiBrightYellow#945D36
  • terminal.ansiCyan#885677
  • terminal.ansiGreen#8A5241
  • terminal.ansiMagenta#7E5D1D
  • terminal.ansiRed#9C4343
  • terminal.ansiWhite#E8E1D3
  • terminal.ansiYellow#945D36
  • terminal.background#FFF7F6
  • terminal.foreground#2F2B26
  • terminal.inactiveSelectionBackground#F1DBDA
  • terminal.tab.activeBorder#A55251
  • terminalCursor.foreground#954343
  • textBlockQuote.background#FFF2F1
  • textBlockQuote.border#764E54
  • textCodeBlock.background#FFF2F1
  • textLink.activeForeground#954343
  • textLink.foreground#874A64
  • textPreformat.background#F1DBDA
  • textPreformat.foreground#2F2B26
  • textSeparator.foreground#D9C1BF
  • titleBar.activeBackground#FCECEB
  • titleBar.activeForeground#2F2B26
  • titleBar.border#E6D2D1
  • titleBar.inactiveBackground#FFF7F6
  • titleBar.inactiveForeground#7B766A
  • welcomePage.progress.foreground#A55251
  • welcomePage.tileBackground#FFF2F1
  • widget.border#D9C1BF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#2F2B26
emphasisitalic
strongbold
comment#764E54
constant.language#874A64
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#8A5241
constant.regexp#7E5D1D
entity.name.tag, entity.name.selector#954343
entity.other.attribute-name#874A64
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#945D36
invalid#9C4343
markup.underlineunderline
markup.bold#874A64bold
markup.heading#954343bold
markup.italic#7E5D1Ditalic
markup.strikethroughstrikethrough
markup.deleted#9C4343
markup.inserted#764E54
markup.changed#945D36
markup.quote#764E54
markup.inline.raw#8A5241
meta.diff.header#874A64
storage#954343
storage.type#954343
keyword, keyword.control, keyword.operator.expression#954343
keyword.operator#2F2B26
string, constant.other.symbol#8A5241
punctuation.definition.string, punctuation.definition.comment#7B766A
support.function, entity.name.function#945D36
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#874A64
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#42516A
variable.language, constant.character.escape#954343
meta.object-literal.key, entity.name.label#42516A
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#945D36
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#954343
keyword.operator.quantifier.regexp#2F2B26
constant.character, constant.other.option#874A64