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#FFB9B9
  • activityBar.background#573936
  • activityBar.foreground#F8E5DC
  • activityBar.inactiveForeground#C0A198
  • activityBarBadge.background#FFDDD2
  • activityBarBadge.foreground#593D38
  • badge.background#FFB9B9
  • badge.foreground#302321
  • button.background#FFDDD2
  • button.foreground#593D38
  • button.hoverBackground#FFE6DD
  • descriptionForeground#C0A198
  • dropdown.background#3D2C28
  • dropdown.border#61453E
  • dropdown.foreground#F8E5DC
  • editor.background#302321
  • editor.findMatchBackground#665A35
  • editor.findMatchHighlightBackground#665A3577
  • editor.foreground#F8E5DC
  • editor.inactiveSelectionBackground#67424899
  • editor.lineHighlightBackground#3B2B27
  • editor.selectionBackground#674248
  • editorBracketMatch.background#674248
  • editorBracketMatch.border#FFB9B9
  • editorCursor.foreground#FFB9B9
  • editorError.foreground#E69DA8
  • editorGroupHeader.tabsBackground#47312C
  • editorHoverWidget.background#3D2C28
  • editorHoverWidget.border#61453E
  • editorHoverWidget.foreground#F8E5DC
  • editorIndentGuide.activeBackground1#C0A198
  • editorIndentGuide.background1#61453E66
  • editorInfo.foreground#A8CCD2
  • editorLineNumber.activeForeground#FFB9B9
  • editorLineNumber.foreground#C0A198
  • editorSuggestWidget.background#3D2C28
  • editorSuggestWidget.border#61453E
  • editorSuggestWidget.foreground#F8E5DC
  • editorSuggestWidget.selectedBackground#674248
  • editorWarning.foreground#EAC18C
  • editorWhitespace.foreground#61453E
  • editorWidget.background#3D2C28
  • editorWidget.border#61453E
  • editorWidget.foreground#F8E5DC
  • errorForeground#E69DA8
  • focusBorder#FFB9B9
  • foreground#F8E5DC
  • gitDecoration.addedResourceForeground#C3D1A7
  • gitDecoration.deletedResourceForeground#E69DA8
  • gitDecoration.modifiedResourceForeground#A8CCD2
  • input.background#3D2C28
  • input.border#61453E
  • input.foreground#F8E5DC
  • input.placeholderForeground#C0A198
  • list.activeSelectionBackground#674248
  • list.activeSelectionForeground#F8E5DC
  • list.highlightForeground#FFB9B9
  • list.hoverBackground#503831
  • list.inactiveSelectionBackground#67424899
  • list.inactiveSelectionForeground#F8E5DC
  • notifications.background#3D2C28
  • notifications.border#61453E
  • notifications.foreground#F8E5DC
  • panel.background#3D2C28
  • panel.border#61453E
  • panel.foreground#F8E5DC
  • quickInput.background#3D2C28
  • quickInput.foreground#F8E5DC
  • scrollbarSlider.background#61453E88
  • scrollbarSlider.hoverBackground#61453EBB
  • selection.background#674248
  • sideBar.background#3D2C28
  • sideBar.border#61453E
  • sideBar.foreground#F8E5DC
  • statusBar.background#3D2C28
  • statusBar.debuggingBackground#FFB9B9
  • statusBar.debuggingForeground#302321
  • statusBar.foreground#F8E5DC
  • statusBar.noFolderBackground#3D2C28
  • statusBar.noFolderForeground#F8E5DC
  • tab.activeBackground#302321
  • tab.activeBorderTop#FFB9B9
  • tab.activeForeground#F8E5DC
  • tab.border#61453E
  • tab.inactiveBackground#47312C
  • tab.inactiveForeground#C0A198
  • terminal.ansiBlack#151C2A
  • terminal.ansiBlue#A8CCD2
  • terminal.ansiBrightBlack#C0A198
  • terminal.ansiBrightBlue#A8CCD2
  • terminal.ansiBrightCyan#A8CCD2
  • terminal.ansiBrightGreen#FFB9B9
  • terminal.ansiBrightMagenta#FFACC7
  • terminal.ansiBrightRed#E69DA8
  • terminal.ansiBrightWhite#F8E5DC
  • terminal.ansiBrightYellow#EAC18C
  • terminal.ansiCyan#A8CCD2
  • terminal.ansiGreen#C3D1A7
  • terminal.ansiMagenta#FFACC7
  • terminal.ansiRed#E69DA8
  • terminal.ansiWhite#CDD6EA
  • terminal.ansiYellow#EAC18C
  • terminal.background#302321
  • terminal.foreground#F8E5DC
  • textLink.activeForeground#FFB9B9
  • textLink.foreground#FFB9B9
  • titleBar.activeBackground#47312C
  • titleBar.activeForeground#F8E5DC
  • titleBar.inactiveBackground#302321
  • titleBar.inactiveForeground#C0A198

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#C0A198
keyword, storage#FFB9B9
string#C3D1A7
constant.numeric, constant.language#EAC18C
entity.name.type, support.type, support.class#FFACC7
entity.name.function, support.function#A8CCD2
variable#F8E5DC
entity.name.tag#FFB9B9
entity.other.attribute-name#EAC18C
markup.heading#FFB9B9
invalid#E69DA8
Peach Sorbet Theme by lilin - VS Code Theme