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#2C2C2E
  • activityBar.border#000000
  • activityBar.foreground#007AFF
  • activityBar.inactiveForeground#A6A6A8
  • breadcrumb.background#1C1C1E
  • breadcrumb.focusForeground#F2F2F7
  • breadcrumb.foreground#F2F2F7
  • editor.background#1C1C1E
  • editor.foreground#F2F2F7E5
  • editor.lineHighlightBackground#2C2C2E
  • editor.selectionBackground#3A3A3C
  • editorCursor.background#1C1C1E
  • editorCursor.foreground#F2F2F7
  • editorGroupHeader.border#3A3A3C
  • editorGroupHeader.noTabsBackground#1C1C1E
  • editorGroupHeader.tabsBackground#1C1C1E
  • editorInlayHint.background#F2F2F711
  • editorInlayHint.foreground#8E8E93
  • editorLineNumber.activeForeground#F2F2F7
  • editorLineNumber.foreground#8E8E93
  • editorSuggestWidget.foreground#F2F2F7CC
  • editorSuggestWidget.selectedForeground#FFFFFFFF
  • editorWhitespace.foreground#48484A
  • editorWidget.background#2C2C2E
  • editorWidget.border#3A3A3C
  • focusBorder#007AFF
  • foreground#F2F2F7
  • input.background#1C1C1E
  • input.border#3A3A3C
  • input.placeholderForeground#8E8E93
  • list.activeSelectionBackground#007AFF
  • list.focusHighlightForeground#FFFFFF
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#00000000
  • panel.background#1C1C1E
  • panel.border#000000
  • quickInput.foreground#F2F2F7CC
  • quickInputList.focusForeground#FFFFFFFF
  • scrollbar.shadow#00000000
  • selection.background#0A84FF
  • sideBar.background#2C2C2E
  • sideBar.border#000000
  • sideBar.foreground#FFFFFF
  • statusBar.background#1C1C1E
  • statusBar.foreground#A6A6A8
  • tab.activeBackground#007AFF
  • tab.activeForeground#FFFFFF
  • tab.border#3A3A3C
  • tab.inactiveBackground#1C1C1E
  • tab.inactiveForeground#F2F2F7
  • tab.unfocusedActiveBackground#3A3A3C
  • terminalCursor.background#1C1C1E
  • terminalCursor.foreground#F2F2F7
  • titleBar.activeBackground#3A3A3C
  • titleBar.activeForeground#F2F2F7
  • titleBar.border#000000
  • titleBar.inactiveBackground#2C2C2E
  • titleBar.inactiveForeground#8E8E93

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#FF6B6B
constant.character#FFD60A
constant.numeric#FFD60A
constant.other.placeholder, constant.character.escape#F2F2F7
keyword, keyword.operator.new, keyword.operator.wordlike, keyword.operator.logical.and, keyword.operator.sizeof, storage, variable.language, constant.language#FF375Fbold
keyword.control.directive, punctuation.definition.directive#FF9F0A
entity.name.type.class, entity.name.type#5AC8FA
variable.parameter#64D2FF
entity.name.type, entity.other.inherited-class#67DA10
support.class#BF5AF2
entity.name.function#6AC4DC
support.function#B084EB
constant.other#6AC4DC
variable.other.property, variable.other.object.property#6AC4DC
entity.name.function.preprocessor#FF9F0A
entity.name.tag#BF5AF2
entity.other.attribute-name#B084EB
markup.inserted, punctuation.definition.inserted#30D158
markup.deleted, punctuation.definition.deleted#FF3B30
variable, meta.function-call.generic#F2F2F7
keyword.operator#F2F2F7
Xcode Theme for VSCode by xcode-theme-for-vscode - VS Code Theme