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#f7faf4
  • activityBar.border#f2f7ee
  • activityBar.foreground#000000
  • activityBarBadge.background#f7faf4
  • button.background#d73a49
  • button.foreground#ffffff
  • dropdown.background#ffffff
  • dropdown.border#b2b2b2
  • dropdown.listBackground#ffffff
  • editor.background#f7faf4
  • editor.foreground#000000
  • editor.lineHighlightBackground#fffbdf
  • editor.lineHighlightBorder#fffbdf
  • editor.selectionBackground#fed442
  • editorCursor.background#f7faf4
  • editorGroupHeader.tabsBackground#f7faf4
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#babbbc
  • editorSuggestWidget.highlightForeground#d73a49
  • editorSuggestWidget.selectedBackground#f0f0f0
  • editorWidget.background#ffffff
  • editorWidget.border#000000
  • focusBorder#dfdebe00
  • foreground#000000
  • input.background#f7faf4
  • input.border#b2b2b2
  • inputOption.activeBorder#000000
  • inputOption.activeForeground#000000
  • list.activeSelectionBackground#eeeeee
  • list.activeSelectionForeground#e94051
  • list.dropBackground#def7de
  • list.focusBackground#eeeeee
  • list.focusForeground#d73a49
  • list.highlightForeground#d73a49
  • list.hoverBackground#f7faf4
  • list.hoverForeground#d73a49
  • list.inactiveSelectionBackground#eeeeee
  • list.inactiveSelectionForeground#ec3f51
  • menu.background#f7faf4
  • notificationCenter.border#ffffff
  • notificationCenterHeader.background#ffffff
  • notifications.background#ffffff
  • notifications.border#ffffff
  • notificationToast.border#ffffff
  • panel.border#d73a49
  • scrollbar.shadow#ffffff
  • sideBar.background#f7faf4
  • sideBar.border#ffffff
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#f7faf4
  • statusBar.background#f7faf4
  • statusBar.border#ffffff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderForeground#000000
  • tab.activeBackground#f7faf4
  • tab.activeBorder#f13d4f
  • tab.inactiveBackground#f7faf4
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#ffffff
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#518b77
constant, entity.name.constant, variable.other.constant, variable.language#ad07ce
keyword.operator.symbole, keyword.other.mark#4a54b6
entity, entity.name#0d2ec5
variable.parameter.function#0a0a0a
entity.name.tag#0baa6d
keyword#e20f24
storage, storage.type#f10a21