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#0d0d0d
  • activityBar.border#1e1e1e
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#303030
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#0d0d0d
  • editor.background#0d0d0d
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#ffffff
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#ffffff80
  • editor.foreground#f0f0f0
  • editor.selectionBackground#ffffff18
  • editor.selectionHighlightBackground#ffffff18
  • editor.selectionHighlightBorder#ffffff
  • editorWidget.background#0d0d0d
  • editorWidget.border#1e1e1e
  • gitDecoration.ignoredResourceForeground#8c5a3a
  • input.background#0d0d0d
  • input.border#1e1e1e
  • input.foreground#f0f0f0
  • list.activeSelectionBackground#ffffff18
  • list.activeSelectionForeground#ffffff
  • list.focusForeground#ffffff
  • list.hoverBackground#ffffff10
  • list.hoverForeground#ffffff
  • list.inactiveSelectionForeground#ffffff
  • menu.background#0d0d0d
  • menu.border#1e1e1e
  • menu.foreground#303030
  • menu.selectionBackground#ffffff18
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#1e1e1e
  • selection.background#ffffff
  • sideBar.background#0d0d0d
  • sideBar.border#1e1e1e
  • sideBar.dropBackground#0d0d0d
  • sideBar.foreground#303030
  • sideBarSectionHeader.background#0d0d0d
  • sideBarSectionHeader.border#1e1e1e
  • sideBarSectionHeader.foreground#f0f0f0
  • sideBarTitle.foreground#ffffff
  • statusBar.background#0d0d0d
  • statusBar.border#1e1e1e
  • statusBar.foreground#f0f0f0
  • statusBarItem.activeBackground#0d0d0d
  • statusBarItem.hoverBackground#181818
  • tab.activeBackground#0d0d0d
  • tab.activeBorder#ffffff
  • tab.activeForeground#ffffff
  • tab.border#1e1e1e
  • tab.hoverBackground#181818
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#0d0d0d
  • tab.inactiveForeground#303030
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedInactiveForeground#303030
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#303030
  • terminal.ansiBrightBlue#a0c0ff
  • terminal.ansiBrightCyan#8ababa
  • terminal.ansiBrightGreen#88bc88
  • terminal.ansiBrightMagenta#bc9ecc
  • terminal.ansiBrightRed#c07a7a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#c0a080
  • terminal.ansiCyan#6a8aba
  • terminal.ansiGreen#669966
  • terminal.ansiMagenta#9c7eba
  • terminal.ansiRed#a65a5a
  • terminal.ansiWhite#f0f0f0
  • terminal.ansiYellow#a08060
  • terminal.background#0d0d0d
  • terminal.border#1e1e1e
  • terminal.foreground#f0f0f0
  • terminal.selectionBackground#ffffff18
  • terminalCursor.background#0d0d0d
  • terminalCursor.foreground#ffffff
  • titleBar.activeBackground#0d0d0d
  • titleBar.activeForeground#f0f0f0
  • titleBar.border#1e1e1e
  • titleBar.inactiveBackground#0d0d0d
  • titleBar.inactiveForeground#f0f0f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#303030italic
variable, string constant.other.placeholder#dedede
constant.other.color#ffffff
invalid, invalid.illegal#8c4444
keyword, storage.type, storage.modifier#9c7eba
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#708090
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#a65a5a
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#82aaff
meta.block variable.other#888888
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#a08060
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter#669966
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#5a8a7a
support.type#6a7a9a
entity.other.attribute-name#8a8a4a
markup.inserted#5a8a5a
markup.deleted#a65a5a
markup.changed#9c7eba
*url*, *link*, *uri*#6a8abaunderline