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
Chelsea Pride Theme by noobster - VS Code Theme