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—