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#00000000
  • activityBar.background#F2F2F7
  • activityBar.border#D1D1D6
  • activityBar.foreground#007AFF
  • activityBar.inactiveForeground#8E8E93
  • breadcrumb.background#FFFFFF
  • breadcrumb.focusForeground#1D1D1F
  • breadcrumb.foreground#1D1D1F
  • editor.background#FFFFFF
  • editor.foreground#1D1D1FFF
  • editor.lineHighlightBackground#F5F5F7
  • editor.selectionBackground#B7E5FF
  • editorCursor.background#FFFFFF
  • editorCursor.foreground#1D1D1F
  • editorGroupHeader.border#E5E5EA
  • editorGroupHeader.noTabsBackground#FFFFFF
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorInlayHint.background#1D1D1F11
  • editorInlayHint.foreground#8E8E93
  • editorLineNumber.activeForeground#1D1D1F
  • editorLineNumber.foreground#A6A6A8
  • editorSuggestWidget.foreground#1D1D1FFF
  • editorSuggestWidget.selectedForeground#FFFFFFFF
  • editorWhitespace.foreground#D1D1D6
  • editorWidget.background#F2F2F7
  • editorWidget.border#E5E5EA
  • focusBorder#007AFF
  • foreground#1D1D1F
  • input.background#FFFFFF
  • input.border#E5E5EA
  • input.placeholderForeground#A6A6A8
  • list.activeSelectionBackground#007AFF
  • list.focusHighlightForeground#FFFFFF
  • list.highlightForeground#1D1D1F
  • list.hoverBackground#00000000
  • panel.background#F9F9FB
  • panel.border#D1D1D6
  • quickInput.foreground#1D1D1FFF
  • quickInputList.focusForeground#FFFFFFFF
  • scrollbar.shadow#00000000
  • selection.background#0A84FF
  • sideBar.background#F2F2F7
  • sideBar.border#D1D1D6
  • sideBar.foreground#000000
  • statusBar.background#FFFFFF
  • statusBar.foreground#8E8E93
  • tab.activeBackground#007AFF
  • tab.activeForeground#FFFFFF
  • tab.border#E5E5EA
  • tab.inactiveBackground#FFFFFF
  • tab.inactiveForeground#1D1D1F
  • tab.unfocusedActiveBackground#E5E5EA
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#1D1D1F
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#1D1D1F
  • titleBar.border#D1D1D6
  • titleBar.inactiveBackground#F2F2F7
  • titleBar.inactiveForeground#A6A6A8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8E8E93
string, punctuation.definition.string, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#D70015
constant.character#1D77EF
constant.numeric#1D77EF
constant.other.placeholder, constant.character.escape#1D1D1F
keyword, keyword.operator.new, keyword.operator.wordlike, keyword.operator.logical.and, keyword.operator.sizeof, storage, variable.language, constant.language#AD3DA4bold
keyword.control.directive, punctuation.definition.directive#804000
entity.name.type.class, entity.name.type#0058A0
variable.parameter#0073C7
entity.name.type, entity.other.inherited-class#248A3D
support.class#5856D6
entity.name.function#0F68A0
support.function#804FB8
constant.other#0F68A0
variable.other.property, variable.other.object.property#0F68A0
entity.name.function.preprocessor#804000
entity.name.tag#5856D6
entity.other.attribute-name#804FB8
markup.inserted, punctuation.definition.inserted#28CD41
markup.deleted, punctuation.definition.deleted#FF3333
variable, meta.function-call.generic#1D1D1F
keyword.operator#1D1D1F