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#061C3E
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#FFD700
  • activityBarBadge.foreground#061C3E
  • breadcrumb.activeSelectionForeground#FFD700
  • breadcrumb.foreground#B0C4DE
  • breadcrumbPicker.background#102A54
  • button.background#FFD700
  • button.foreground#0A0B3B
  • button.hoverBackground#DBAA11
  • diffEditor.insertedTextBackground#17C96422
  • diffEditor.removedTextBackground#EE242C22
  • editor.background#0A0B3B
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#141E50
  • editor.selectionBackground#1C2C70
  • editorBracketMatch.background#1C2C70
  • editorBracketMatch.border#00A3E0
  • editorCursor.foreground#FFD700
  • editorGutter.addedBackground#17C964
  • editorGutter.deletedBackground#FF3B30
  • editorGutter.modifiedBackground#FFD700
  • editorIndentGuide.activeBackground1#034694
  • editorIndentGuide.background1#1C2C70
  • editorLineNumber.activeForeground#DBAA11
  • editorLineNumber.foreground#4E5A70
  • editorOverviewRuler.border#034694
  • editorWhitespace.foreground#1C2C70
  • focusBorder#FFD700
  • gitDecoration.addedResourceForeground#17C964
  • gitDecoration.deletedResourceForeground#EE242C
  • gitDecoration.ignoredResourceForeground#4E5A70
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.untrackedResourceForeground#87CEFA
  • input.background#102A54
  • input.border#1C2C70
  • input.foreground#FFFFFF
  • input.placeholderForeground#B0B6C1
  • minimap.background#0A0B3B
  • minimap.selectionHighlight#FFD70066
  • panel.background#0A0B3B
  • panel.border#102A54
  • panelTitle.activeForeground#FFD700
  • panelTitle.inactiveForeground#B0C4DE
  • peekView.border#FFD700
  • peekViewEditor.background#0A0B3B
  • pickerGroup.border#1C2C70
  • pickerGroup.foreground#FFD700
  • quickInput.background#102A54
  • quickInput.foreground#FFFFFF
  • scrollbarSlider.activeBackground#FFD700AA
  • scrollbarSlider.background#1C2C70AA
  • scrollbarSlider.hoverBackground#034694AA
  • sideBar.background#061C3E
  • sideBar.border#102A54
  • sideBar.foreground#B0C4DE
  • sideBarSectionHeader.background#102A54
  • sideBarSectionHeader.foreground#DBAA11
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#0A0B3B
  • statusBar.debuggingBackground#EE242C
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#061C3E
  • tab.activeBackground#0A0B3B
  • tab.activeForeground#FFD700
  • tab.border#102A54
  • tab.inactiveBackground#141E50
  • tab.inactiveForeground#B0B6C1
  • terminal.ansiBlack#0A0B3B
  • terminal.ansiBlue#1E90FF
  • terminal.ansiCyan#00BFFF
  • terminal.ansiGreen#17C964
  • terminal.ansiMagenta#FF6B00
  • terminal.ansiRed#FF3B30
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#DBAA11
  • terminal.background#0A0B3B
  • terminal.foreground#F2F2F2
  • terminalCursor.foreground#FFD700
  • titleBar.activeBackground#061C3E
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#0A0B3B
  • titleBar.inactiveForeground#B0B6C1
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A9A9A9italic
keyword, storage.type#1E90FFbold
string, constant.other.symbol#DBAA11
entity.name.function, support.function, keyword.other.special-method#FF4500bold
variable, support.variable#87CEFA
constant.numeric, constant.language, constant#FFA500bold
entity.name.type, support.class, storage.type.class#FFD700bold
punctuation, keyword.operator#FFFFFF
variable.readonly#FF8C00italic
variable.parameter#B0C4DE
entity.name.tag, meta.tag, markup.deleted.git_gutter#00A3E0bold
entity.other.attribute-name, markup.changed.git_gutter#FFD700
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml#EE242C
punctuation.definition.tag#FFFFFF
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#1E90FFbold
support.type.property-name.css#FFD700
constant.other.color.rgb-value.css, constant.numeric.css#EE242C
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#00A3E0
support.type.property-name.json#FFD700
string.quoted.double.json, constant.numeric.json#EE242C
markup.heading#1E90FFbold
markup.italic#FF8C00italic
markup.bold#FFD700bold
markup.underline.link, markup.image#00A3E0underline
entity.name.tag.yaml#FFD700
string.unquoted.yaml, string.quoted.single.yaml, string.quoted.double.yaml#EE242C
punctuation.definition.anchor.yaml, variable.other.alias.yaml#00A3E0
Chelsea Pride Theme by noobster - VS Code Theme