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#161d1b
  • activityBar.border#1f3028
  • activityBar.foreground#6bba8f
  • activityBar.inactiveForeground#4a765e
  • activityBarBadge.background#2c4d39
  • activityBarBadge.foreground#e0ece9
  • editor.background#141a18
  • editor.foreground#b8c5c2
  • editor.lineHighlightBackground#1a2321
  • editor.lineHighlightBorder#1f2a27
  • editor.selectionBackground#2c4d3980
  • editor.selectionHighlightBackground#add6ff1a
  • editor.wordHighlightBackground#3d664a33
  • editor.wordHighlightStrongBackground#3d664a33
  • editorCursor.foreground#9ba7a4
  • editorGroupHeader.tabsBackground#141a18
  • editorGutter.background#161d1b
  • editorLineNumber.activeForeground#9ba7a4
  • editorLineNumber.foreground#4a5651
  • editorOverviewRuler.border#1f302880
  • editorWidget.background#181f1d
  • editorWidget.border#2c4d39
  • errorForeground#e85757
  • list.activeSelectionBackground#1f3028
  • list.activeSelectionForeground#d1dbd9
  • list.dropBackground#1f302840
  • list.hoverBackground#1f302840
  • list.inactiveSelectionBackground#1f302880
  • list.inactiveSelectionForeground#b8c5c2
  • minimap.background#161d1b80
  • minimap.selectionHighlight#2c4d3980
  • notificationCenterHeader.background#161d1b
  • notificationCenterHeader.foreground#9ba7a4
  • notifications.background#181f1d
  • notifications.foreground#b8c5c2
  • notificationsErrorIcon.foreground#e85757
  • notificationsInfoIcon.foreground#6bba8f
  • notificationsWarningIcon.foreground#e0a75c
  • panel.background#141a18
  • panel.border#2c4d39
  • panelTitle.activeBorder#6bba8f
  • panelTitle.activeForeground#6bba8f
  • panelTitle.inactiveForeground#4a765e
  • peekView.border#2c4d39
  • peekViewEditor.background#141a18
  • peekViewResult.background#181f1d
  • peekViewTitle.background#181f1d
  • scrollbarSlider.activeBackground#2c4d39a0
  • scrollbarSlider.background#2c4d3960
  • scrollbarSlider.hoverBackground#2c4d3980
  • sideBar.background#181f1d
  • sideBar.border#1f3028
  • sideBar.foreground#9ba7a4
  • sideBarSectionHeader.background#161d1b
  • sideBarSectionHeader.foreground#9ba7a4
  • sideBarTitle.foreground#9ba7a4
  • statusBar.background#141a18
  • statusBar.debuggingBackground#2c4d39
  • statusBar.debuggingForeground#e0ece9
  • statusBar.foreground#d1dbd9
  • statusBar.noFolderBackground#141a18
  • statusBarItem.prominentBackground#2c4d39
  • statusBarItem.remoteBackground#2c4d39
  • tab.activeBackground#141a18
  • tab.activeForeground#d1dbd9
  • tab.inactiveBackground#1c2320
  • tab.inactiveForeground#9ba7a4
  • titleBar.activeBackground#141a18
  • titleBar.activeForeground#d1dbd9
  • titleBar.inactiveBackground#141a18
  • titleBar.inactiveForeground#9ba7a4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#527f60
variable, string constant.other.placeholder#6ba8a1
constant.other.color#6bba8f
invalid, invalid.illegal#e85757
keyword, storage.type, storage.modifier#a99ed0
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#6ba8a1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#629992
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#6bba8f
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#d4b483
meta.object-literal.key, variable.object.property, support.type.property-name, constant.other.object.key.js, string.unquoted.label.js, constant.other.key.php, string.quoted.single.php, string.quoted.double.php#d4b483