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#F7F2EB
  • activityBar.background#293227
  • activityBar.foreground#F7F2EB
  • activityBar.inactiveForeground#A5AF9B
  • activityBarBadge.background#354131
  • activityBarBadge.foreground#F7F2EB
  • badge.background#8B9A6E
  • badge.foreground#20271F
  • button.background#8B9A6E
  • button.foreground#20271F
  • button.hoverBackground#A0B080
  • descriptionForeground#A5AF9B
  • dropdown.background#293227
  • dropdown.border#4B5844
  • dropdown.foreground#F7F2EB
  • editor.background#20271F
  • editor.findMatchBackground#C29C5777
  • editor.findMatchHighlightBackground#C29C5733
  • editor.foreground#F7F2EB
  • editor.inactiveSelectionBackground#414E3799
  • editor.lineHighlightBackground#4B584433
  • editor.selectionBackground#414E37
  • editorBracketMatch.background#414E37
  • editorBracketMatch.border#B4C695
  • editorCursor.foreground#B4C695
  • editorError.foreground#E8A0A0
  • editorGroupHeader.tabsBackground#293227
  • editorHoverWidget.background#293227
  • editorHoverWidget.border#4B5844
  • editorHoverWidget.foreground#F7F2EB
  • editorIndentGuide.activeBackground1#A5AF9B
  • editorIndentGuide.background1#4B584466
  • editorInfo.foreground#A4C7D7
  • editorLineNumber.activeForeground#B4C695
  • editorLineNumber.foreground#A5AF9B
  • editorSuggestWidget.background#293227
  • editorSuggestWidget.border#4B5844
  • editorSuggestWidget.foreground#F7F2EB
  • editorSuggestWidget.selectedBackground#414E37
  • editorWarning.foreground#DBBD93
  • editorWhitespace.foreground#4B5844
  • editorWidget.background#293227
  • editorWidget.border#4B5844
  • editorWidget.foreground#F7F2EB
  • errorForeground#E8A0A0
  • focusBorder#B4C695
  • foreground#F7F2EB
  • gitDecoration.addedResourceForeground#B4C695
  • gitDecoration.deletedResourceForeground#E8A0A0
  • gitDecoration.modifiedResourceForeground#A4C7D7
  • input.background#293227
  • input.border#4B5844
  • input.foreground#F7F2EB
  • input.placeholderForeground#A5AF9B
  • list.activeSelectionBackground#414E37
  • list.activeSelectionForeground#F7F2EB
  • list.highlightForeground#B4C695
  • list.hoverBackground#4B584444
  • list.inactiveSelectionBackground#414E3799
  • list.inactiveSelectionForeground#F7F2EB
  • notifications.background#293227
  • notifications.border#4B5844
  • notifications.foreground#F7F2EB
  • panel.background#293227
  • panel.border#4B5844
  • panel.foreground#F7F2EB
  • quickInput.background#293227
  • quickInput.foreground#F7F2EB
  • scrollbarSlider.background#4B584488
  • scrollbarSlider.hoverBackground#4B5844BB
  • selection.background#414E37
  • sideBar.background#293227
  • sideBar.border#4B5844
  • sideBar.foreground#F7F2EB
  • statusBar.background#293227
  • statusBar.debuggingBackground#8B9A6E
  • statusBar.debuggingForeground#20271F
  • statusBar.foreground#F7F2EB
  • statusBar.noFolderBackground#293227
  • statusBar.noFolderForeground#F7F2EB
  • tab.activeBackground#20271F
  • tab.activeBorderTop#B4C695
  • tab.activeForeground#F7F2EB
  • tab.border#4B5844
  • tab.inactiveBackground#293227
  • tab.inactiveForeground#A5AF9B
  • terminal.ansiBlack#F7F2EB
  • terminal.ansiBlue#A4C7D7
  • terminal.ansiBrightBlack#A5AF9B
  • terminal.ansiBrightBlue#A4C7D7
  • terminal.ansiBrightCyan#A4C7D7
  • terminal.ansiBrightGreen#B4C695
  • terminal.ansiBrightMagenta#CBAFCB
  • terminal.ansiBrightRed#E8A0A0
  • terminal.ansiBrightWhite#F7F2EB
  • terminal.ansiBrightYellow#DBBD93
  • terminal.ansiCyan#A4C7D7
  • terminal.ansiGreen#B4C695
  • terminal.ansiMagenta#CBAFCB
  • terminal.ansiRed#E8A0A0
  • terminal.ansiWhite#A5AF9B
  • terminal.ansiYellow#DBBD93
  • terminal.background#20271F
  • terminal.foreground#F7F2EB
  • textLink.activeForeground#B4C695
  • textLink.foreground#B4C695
  • titleBar.activeBackground#293227
  • titleBar.activeForeground#F7F2EB
  • titleBar.inactiveBackground#20271F
  • titleBar.inactiveForeground#A5AF9B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#A5AF9B
keyword, storage#B4C695
string#B4C695
constant.numeric, constant.language#DBBD93
entity.name.type, support.type, support.class#CBAFCB
entity.name.function, support.function#A4C7D7
variable#F7F2EB
entity.name.tag#B4C695
entity.other.attribute-name#DBBD93
markup.heading#B4C695
invalid#E8A0A0
Matcha Ivory Theme by lilin - VS Code Theme