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