Skip to main content
CodingTheme

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.activeBackground#e9e9e9
  • activityBar.background#cccccc
  • activityBar.foreground#6b6b6b
  • activityBar.inactiveForeground#919191
  • activityBarBadge.background#e69966
  • activityBarBadge.foreground#222222
  • badge.background#eebb99
  • badge.foreground#222222
  • breadcrumb.activeSelectionForeground#222222
  • breadcrumb.background#dddddd
  • breadcrumb.focusForeground#222222
  • breadcrumb.foreground#6b6b6b
  • button.background#73b3e6
  • button.foreground#222222
  • dropdown.background#c2def4
  • dropdown.border#a2ccee
  • dropdown.listBackground#dddddd
  • editor.background#eeeeee
  • editor.foreground#222222
  • editor.lineHighlightBackground#e9e9e9
  • editor.selectionBackground#BBBBBB
  • editorBracketMatch.background#919191
  • editorBracketMatch.border#00000000
  • editorGroupHeader.tabsBackground#eeeeee
  • editorGroupHeader.tabsBorder#dddddd
  • editorHoverWidget.background#dddddd
  • editorHoverWidget.border#b7b7b7
  • editorHoverWidget.foreground#5a5a5a
  • editorIndentGuide.activeBackground#BBBBBB
  • editorIndentGuide.background#dddddd
  • editorLineNumber.activeForeground#919191
  • editorLineNumber.foreground#BBBBBB
  • editorPane.background#cccccc
  • editorRuler.foreground#BBBBBB
  • focusBorder#b7b7b7
  • input.background#f4d3bc
  • input.border#eebb99
  • input.placeholderForeground#e9a477
  • inputOption.activeBackground#e9a477
  • inputOption.activeBorder#e9a477
  • list.activeSelectionBackground#eebb99
  • list.activeSelectionForeground#222222
  • list.focusBackground#eebb99
  • list.focusForeground#222222
  • list.highlightForeground#DD7733
  • list.inactiveSelectionBackground#d2d2d2
  • menu.background#dddddd
  • menu.foreground#5a5a5a
  • menu.selectionBackground#e69966
  • menu.selectionForeground#222222
  • menu.separatorBackground#919191
  • menubar.selectionBackground#eebb99
  • menubar.selectionForeground#222222
  • panel.background#e9e9e9
  • panel.border#cccccc
  • panelTitle.activeBorder#4499DD
  • panelTitle.activeForeground#6b6b6b
  • quickInput.background#dddddd
  • quickInput.foreground#5a5a5a
  • sideBar.background#e9e9e9
  • sideBar.border#cccccc
  • sideBar.foreground#6b6b6b
  • sideBarSectionHeader.background#dddddd
  • sideBarSectionHeader.foreground#5a73c0
  • sideBarTitle.foreground#4499DD
  • statusBar.background#dddddd
  • statusBar.debuggingBackground#eed5c4
  • statusBar.debuggingForeground#cc804d
  • statusBar.foreground#919191
  • statusBar.noFolderBackground#cccccc
  • statusBar.noFolderForeground#919191
  • statusBarItem.remoteBackground#d1e6f7
  • statusBarItem.remoteForeground#4499DD
  • tab.activeBackground#dddddd
  • tab.activeBorderTop#BBBBBB
  • tab.activeForeground#6b6b6b
  • tab.border#dddddd
  • tab.inactiveBackground#eeeeee
  • tab.inactiveForeground#b7b7b7
  • tab.unfocusedActiveBackground#dddddd
  • tab.unfocusedActiveBorderTop#dddddd
  • tab.unfocusedActiveForeground#b7b7b7
  • tab.unfocusedInactiveBackground#eeeeee
  • tab.unfocusedInactiveForeground#c8c8c8
  • textLink.foreground#4499DD
  • textPreformat.foreground#DD7733
  • titleBar.activeBackground#dddddd
  • titleBar.activeForeground#6b6b6b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#919191italic
string, punctuation.definition.string.begin, punctuation.definition.string.end, markup.inline.raw.string#DD7733
constant.character.escape#DDAA88
keyword.control, keyword.operator.new, keyword.other, keyword.operator.expression, string.regexp support.other.match.begin, string.regexp support.other.match.end#4499DDitalic
punctuation, keyword.operator.comparison, keyword.operator.relational, keyword.operator.logical, keyword.operator.or, keyword.operator.disjunction, string.regexp keyword.operator.lookahead, meta.brace#4499DD
constant.language, source.css support.constant#2244AAitalic
entity.name.function, support.function, entity.name.tag, markup.heading, string.regexp keyword.operator.quantifier#2244AA
meta.template.expression, string.unquoted.heredoc.php, punctuation.definition.variable.php, variable.other.php, meta.embedded.block.php, meta.interpolation, text.html.php, variable.other.php#222222
storage, keyword.other.namespace, keyword.operator.assignment, keyword.operator.increment, keyword.operator.decrement, punctuation.definition.bold, punctuation.definition.italic, punctuation.definition.underline, punctuation.definition.strikethrough, meta.brace.square, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square#DD7733
entity.name.type, entity.other.inherited-class, support.type, support.class, keyword.type#BB5511italic
keyword.operator.type, keyword.operator.optional, string.regexp constant.other.character-class, string.regexp punctuation.definition.character-class, string.regexp punctuation.character.set, string.regexp support.other.escape.special, string.regexp support.other.match.any#BB5511
constant.numeric, keyword.other.unit, variable.other.property, variable.other.constant.property, support.variable.property, meta.object-literal.key, entity.other.attribute-name, string.regexp constant.other.character-class.set, string.regexp constant.other.character-class.range, string.regexp constant.character.set, markup.bold, markup.italic, markup.underline, markup.strikethrough#992200
markup.italicitalic
markup.boldbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.headingbold
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...