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#FFD700
  • activityBar.background#034694
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#FFD700
  • activityBarBadge.foreground#034694
  • breadcrumb.activeSelectionForeground#007FA6
  • breadcrumb.foreground#9CA3AF
  • breadcrumbPicker.background#F1F5F9
  • button.background#007FA6
  • button.foreground#FFFFFF
  • button.hoverBackground#0195C8
  • diffEditor.insertedTextBackground#17C96422
  • diffEditor.removedTextBackground#EE242C22
  • editor.background#F7F9FC
  • editor.foreground#1D1D1F
  • editor.lineHighlightBackground#E4ECF5
  • editor.selectionBackground#CCE8F1
  • editorBracketMatch.background#CCE8F1
  • editorBracketMatch.border#007FA6
  • editorCursor.foreground#DBA111
  • editorGutter.addedBackground#17C964
  • editorGutter.deletedBackground#EE242C
  • editorGutter.modifiedBackground#FFD700
  • editorIndentGuide.activeBackground1#BFD8E6
  • editorIndentGuide.background1#E0E7EF
  • editorLineNumber.activeForeground#007FA6
  • editorLineNumber.foreground#9CA3AF
  • editorOverviewRuler.border#BFD8E6
  • editorWhitespace.foreground#E0E0E0
  • focusBorder#007FA6
  • gitDecoration.addedResourceForeground#17C964
  • gitDecoration.deletedResourceForeground#EE242C
  • gitDecoration.ignoredResourceForeground#D1D5DB
  • gitDecoration.modifiedResourceForeground#007FA6
  • gitDecoration.untrackedResourceForeground#007FA6
  • input.background#E6F4F8
  • input.border#007FA6
  • input.foreground#1D1D1F
  • input.placeholderForeground#6B7280
  • list.activeSelectionBackground#CCE8F1
  • list.activeSelectionForeground#1D1D1F
  • list.focusBackground#007FA6
  • list.focusForeground#FFFFFF
  • list.highlightForeground#007FA6
  • list.hoverBackground#F0F7FA
  • list.hoverForeground#1D1D1F
  • list.inactiveSelectionBackground#E2E8F0
  • list.inactiveSelectionForeground#1D1D1F
  • minimap.background#F7F9FC
  • minimap.selectionHighlight#CCE8F1
  • notebook.cellBorderColor#D1D5DB
  • notebook.cellEditorBackground#FFFFFF
  • notebook.cellHoverBackground#F1F5F9
  • notebook.cellInsertionIndicator#007FA6
  • notebook.cellToolbarSeparator#D1D5DB
  • notebook.editorBackground#FFFFFF
  • notebook.focusedCellBackground#F7F9FC
  • notebook.focusedCellBorder#007FA6
  • notebook.outputContainerBackgroundColor#FAFAFA
  • notebook.outputContainerBorderColor#E5E7EB
  • notebookSymbolHighlightBackground#CCE8F199
  • panel.background#FFFFFF
  • panel.border#D1D5DB
  • panelTitle.activeForeground#007FA6
  • panelTitle.inactiveForeground#9CA3AF
  • peekView.border#007FA6
  • peekViewEditor.background#F7F9FC
  • pickerGroup.border#CCE8F1
  • pickerGroup.foreground#007FA6
  • quickInput.background#FFFFFF
  • quickInput.foreground#1D1D1F
  • scrollbarSlider.activeBackground#007FA6AA
  • scrollbarSlider.background#CCE8F199
  • scrollbarSlider.hoverBackground#BFD8E699
  • sideBar.background#E6F4F8
  • sideBar.border#CCE8F1
  • sideBar.foreground#1D1D1F
  • sideBarSectionHeader.background#FFD700
  • sideBarSectionHeader.foreground#007FA6
  • sideBarTitle.foreground#1D1D1F
  • statusBar.background#FFD700
  • statusBar.debuggingBackground#EE242C
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#0A0B3B
  • statusBar.noFolderBackground#F1F5F9
  • tab.activeBackground#FFF8DC
  • tab.activeForeground#DBA111
  • tab.border#FFD700
  • tab.inactiveBackground#F1F5F9
  • tab.inactiveForeground#6B7280
  • terminal.ansiBlack#F7F9FC
  • terminal.ansiBlue#007FA6
  • terminal.ansiCyan#00BFFF
  • terminal.ansiGreen#17C964
  • terminal.ansiMagenta#FF6B00
  • terminal.ansiRed#EE242C
  • terminal.ansiWhite#1D1D1F
  • terminal.ansiYellow#DBA111
  • terminal.background#FFFFFF
  • terminal.foreground#1D1D1F
  • terminalCursor.foreground#007FA6
  • titleBar.activeBackground#FFD700
  • titleBar.activeForeground#0A0B3B
  • titleBar.inactiveBackground#FFE066
  • titleBar.inactiveForeground#1D1D1F
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9CA3AFitalic
keyword, storage.type#034694bold
string, constant.other.symbol#007FA6—
entity.name.function, support.function, keyword.other.special-method#DBA111bold
variable, support.variable#1F2937—
constant.numeric, constant.language, constant#EE242Cbold
entity.name.type, support.class, storage.type.class#004F9Fbold
punctuation, keyword.operator#1D1D1F—
variable.readonly#D97706italic
variable.parameter#1F2937—
entity.name.tag, meta.tag#007FA6bold
entity.other.attribute-name#004F9F—
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml#EE242C—
punctuation.definition.tag.begin, punctuation.definition.tag.end#1F2937—
markup.heading#034694bold
markup.underline.link#007FA6underline
markup.list#1F2937—
markup.quote#9CA3AFitalic
markup.raw#1D1D1Fitalic
entity.other.attribute-name.class, entity.other.attribute-name.id#004F9Fbold
support.type.property-name#007FA6—
constant.other.color, constant.other.unit#DBA111—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#1F2937italic
string.quoted.double.json#004F9F—
constant.numeric.json, string.quoted.double.json, boolean.json#1D1D1F—
comment.line.double-slash.json#9CA3AFitalic
entity.name.tag.yaml#004F9F—
string.quoted.double.yaml, constant.numeric.yaml#1D1D1F—
comment.line.number-sign.yaml#9CA3AFitalic
entity.name.tag, meta.tag, markup.deleted.git_gutter#007FA6bold
entity.other.attribute-name, markup.changed.git_gutter#004F9F—
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml#EE242C—
punctuation.definition.tag.begin, punctuation.definition.tag.end#1F2937—