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#1e2925
  • activityBar.border#2d4f3a
  • activityBar.foreground#83d6a8
  • activityBar.inactiveForeground#5a8c6a
  • activityBarBadge.background#3e6b4f
  • activityBarBadge.foreground#ffffff
  • editor.background#1c2320
  • editor.foreground#d1dbd9
  • editor.lineHighlightBackground#1a2321
  • editor.lineHighlightBorder#1f2a27
  • editor.selectionBackground#3a5e4680
  • editor.selectionHighlightBackground#add6ff26
  • editor.wordHighlightBackground#4e7d5b40
  • editor.wordHighlightStrongBackground#4e7d5b40
  • editorCursor.foreground#b1bdbb
  • editorGroupHeader.tabsBackground#1c2320
  • editorGutter.background#1e2925
  • editorLineNumber.activeForeground#b1bdbb
  • editorLineNumber.foreground#5f6b64
  • editorOverviewRuler.border#2d4f3a80
  • editorWidget.background#232a27
  • editorWidget.border#3e6b4f
  • errorForeground#ff6b6b
  • list.activeSelectionBackground#2d4f3a
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2d4f3a40
  • list.hoverBackground#2d4f3a40
  • list.inactiveSelectionBackground#2d4f3a80
  • list.inactiveSelectionForeground#d1dbd9
  • minimap.background#1e292580
  • minimap.selectionHighlight#3a5e4680
  • notificationCenterHeader.background#1e2925
  • notificationCenterHeader.foreground#b1bdbb
  • notifications.background#232a27
  • notifications.foreground#d1dbd9
  • notificationsErrorIcon.foreground#ff6b6b
  • notificationsInfoIcon.foreground#83d6a8
  • notificationsWarningIcon.foreground#ffb86c
  • panel.background#1c2320
  • panel.border#3e6b4f
  • panelTitle.activeBorder#3e6b4f
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#b1bdbb
  • scrollbarSlider.activeBackground#2c4d39a0
  • scrollbarSlider.background#2c4d3960
  • scrollbarSlider.hoverBackground#2c4d3980
  • sideBar.background#232a27
  • sideBar.border#2d4f3a
  • sideBar.foreground#b1bdbb
  • sideBarSectionHeader.background#1e2925
  • sideBarSectionHeader.foreground#b1bdbb
  • sideBarTitle.foreground#b1bdbb
  • statusBar.background#1c2320
  • statusBar.debuggingBackground#3e6b4f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • tab.activeBackground#1c2320
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#283230
  • tab.inactiveForeground#b1bdbb
  • titleBar.activeBackground#1c2320
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1c2320
  • titleBar.inactiveForeground#b1bdbb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#629e72—
variable, string constant.other.placeholder#7fbbb3—
constant.other.color#6bba8f—
invalid, invalid.illegal#ff6b6b—
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#7fbbb3—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#70a9a1—
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—
Bonsai Twilight by br1faoro - VS Code Theme