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.background#233240
  • activityBar.foreground#F5F5F5
  • badge.background#008080
  • badge.foreground#F5F5F5
  • breadcrumb.activeSelectionForeground#F5F5F5
  • breadcrumb.focusForeground#F5F5F5
  • breadcrumb.foreground#8EA2B9
  • breadcrumbPicker.background#233240
  • editor.background#1B2631
  • editor.foreground#F5F5F5
  • editor.lineHighlightBackground#2C3E5066
  • editor.selectionBackground#34495E99
  • editorCursor.foreground#3AA99F
  • editorGroupHeader.tabsBackground#233240
  • editorGroupHeader.tabsBorder#34495E
  • editorIndentGuide.activeBackground#4A658599
  • editorIndentGuide.background#4A658533
  • editorWhitespace.foreground#4A658580
  • gitDecoration.addedResourceForeground#879A39
  • gitDecoration.conflictingResourceForeground#CE5D97
  • gitDecoration.deletedResourceForeground#D14D41
  • gitDecoration.ignoredResourceForeground#6B84A2
  • gitDecoration.modifiedResourceForeground#DA702C
  • gitDecoration.untrackedResourceForeground#3AA99F
  • input.background#233240
  • input.foreground#F5F5F5
  • input.placeholderForeground#8EA2B9
  • inputOption.activeBorder#008080
  • list.activeSelectionBackground#34495E
  • list.activeSelectionForeground#F5F5F5
  • list.highlightForeground#3AA99F
  • list.hoverBackground#2C3E5066
  • list.inactiveSelectionBackground#2C3E50
  • list.inactiveSelectionForeground#F5F5F5
  • notificationCenter.border#008080
  • notificationsErrorIcon.foreground#D14D41
  • notificationsInfoIcon.foreground#4385BE
  • notificationsWarningIcon.foreground#DA702C
  • panel.background#1D2A36
  • panel.border#34495E
  • panelTitle.activeForeground#F5F5F5
  • panelTitle.inactiveForeground#B1BFD0
  • scrollbarSlider.activeBackground#4A658599
  • scrollbarSlider.background#4A658533
  • scrollbarSlider.hoverBackground#4A658566
  • sideBar.background#1D2A36
  • sideBar.foreground#DCE4ED
  • statusBar.background#008080
  • statusBar.foreground#F5F5F5
  • tab.activeBackground#34495E
  • tab.activeForeground#F5F5F5
  • tab.inactiveBackground#2C3E50
  • titleBar.activeBackground#233240
  • titleBar.activeForeground#F5F5F5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B84A2
string, constant.other.symbol#3AA99F
string.regexp, constant.character, constant.other#3AA99F
constant.numeric#8B7EC8
constant.language#D0A215
variable, variable.parameter, support.variable#4385BE
variable.member#D14D41
variable.language#CE5D97
storage#879A39
keyword#879A39
keyword.operator#B3B6B7
punctuation.separator, punctuation.terminator#B3B6B7
punctuation.section#F5F5F5
punctuation.accessor#B3B6B7
entity.name.type, entity.other.inherited-class, support.type#4385BE
entity.name.function, support.function#DA702C
meta.method entity.name.function#DA702C
entity.other.attribute-name#4385BE
entity.other.attribute-name.class#D0A215
entity.other.attribute-name.id#DA702C
support.type.property-name.css#4385BE
entity.name.tag#4385BE
markup.italic#D14D41italic
markup.bold#D0A215bold
markup.heading#879A39bold
markup.underline#8B7EC8underline
markup.underline.link#3AA99F
markup.quote#DA702Citalic
markup.raw#3AA99F
markup.fenced_code.block#F5F5F5
keyword.control.import#D14D41
meta.tag.jsx entity.name.tag, meta.tag.components.jsx entity.name.tag#4385BE
meta.tag.jsx punctuation.definition.tag, meta.tag.components.jsx punctuation.definition.tag#4385BE
meta.structure.dictionary.json support.type.property-name.json#4385BE
meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#3AA99F