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.background#2B211B
  • activityBar.foreground#EAC28B
  • activityBar.inactiveForeground#8E6E5E
  • activityBarBadge.background#C77D4A
  • activityBarBadge.foreground#2B211B
  • badge.background#EAC28B
  • badge.foreground#2B211B
  • button.background#C77D4A
  • button.foreground#2B211B
  • editor.background#2B211B
  • editor.foreground#EDE3DC
  • editor.inactiveSelectionBackground#34261F
  • editor.selectionBackground#3A2B23
  • editorCursor.foreground#F0C27B
  • editorGroupHeader.tabsBackground#2B211B
  • editorHoverWidget.background#2F241E
  • editorLineNumber.activeForeground#EDE3DC
  • editorLineNumber.foreground#8E6E5E
  • editorSuggestWidget.background#2B211B
  • editorSuggestWidget.highlightForeground#EAC28B
  • editorSuggestWidget.selectedBackground#3A2B23
  • focusBorder#C77D4A
  • input.background#32261F
  • input.foreground#EDE3DC
  • list.activeSelectionBackground#3A2B23
  • list.activeSelectionForeground#EDE3DC
  • list.hoverBackground#33251E
  • notificationCenterHeader.background#2B211B
  • notificationCenterHeader.foreground#EDE3DC
  • notificationLink.foreground#EAC28B
  • notifications.background#2B211B
  • notifications.border#3A2B23
  • notifications.foreground#EDE3DC
  • notificationsErrorIcon.foreground#D86A6A
  • notificationsInfoIcon.foreground#EAC28B
  • notificationsWarningIcon.foreground#F0C27B
  • quickInput.background#2B211B
  • scrollbarSlider.background#3A2B23
  • sideBar.background#2B211B
  • sideBar.foreground#EDE3DC
  • statusBar.background#2B211B
  • statusBar.foreground#EDE3DC
  • tab.inactiveBackground#2B211B
  • titleBar.activeBackground#2B211B
  • titleBar.activeForeground#EDE3DC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8E6E5Eitalic
keyword, storage#C77D4A
string, constant.other.symbol#EAC28B
constant.numeric, number#F0C27B
entity.name.function, support.function#D9A679
variable, identifier#F2D7C3
storage.type, entity.name.type#B88A6A
constant.language, constant.character#F2B8A2
punctuation, meta.brace#A07C69
variable.property, support.variable.property#E6CDB9
Chromatica by Halim Qarroum - VS Code Theme