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#ffffff
  • activityBar.foreground#222222
  • breadcrumb.activeSelectionForeground#222222
  • breadcrumb.background#ffffff
  • breadcrumb.foreground#555555
  • editor.background#ffffff
  • editor.findMatchBackground#fcbc05
  • editor.findMatchHighlightBackground#fcbc0550
  • editor.foreground#222222
  • editor.inactiveSelectionBackground#eeeeee80
  • editor.lineHighlightBackground#f7f7f7
  • editor.selectionBackground#dddddd
  • editorCursor.foreground#222222
  • editorError.foreground#e84135
  • editorIndentGuide.activeBackground1#dddddd
  • editorIndentGuide.background1#f0f0f0
  • editorInfo.foreground#fcbc05
  • editorLineNumber.activeForeground#222222
  • editorLineNumber.foreground#555555
  • editorRuler.foreground#f0f0f0
  • editorWarning.foreground#ea4334
  • editorWhitespace.foreground#f0f0f0
  • panel.background#fefefe
  • panel.border#f0f0f0
  • sideBar.background#ffffff
  • sideBar.foreground#222222
  • sideBarSectionHeader.background#f7f7f7
  • statusBar.background#ffffff
  • statusBar.foreground#222222
  • tab.activeBackground#ffffff
  • tab.activeForeground#222222
  • tab.inactiveBackground#f7f7f7
  • tab.inactiveForeground#555555
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#4285f4
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#4fafff
  • terminal.ansiBrightCyan#4adc6e
  • terminal.ansiBrightGreen#4adc6e
  • terminal.ansiBrightMagenta#ea4334
  • terminal.ansiBrightRed#ff3e25
  • terminal.ansiBrightWhite#222222
  • terminal.ansiBrightYellow#fcde00
  • terminal.ansiCyan#4adc6e
  • terminal.ansiGreen#34a853
  • terminal.ansiMagenta#ea4334
  • terminal.ansiRed#e84135
  • terminal.ansiWhite#222222
  • terminal.ansiYellow#fcbc05
  • terminal.background#fefefe
  • terminal.foreground#333333
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#222222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#454545italic
comment.block.documentation, comment.line.documentation#777777italic
string, string.quoted#222222
constant.numeric#222222
keyword, storage.type, storage.modifier#4285f4
keyword.operator#555555
entity.name.function, support.function#34a853
meta.function-call, variable.function#33a652
entity.name.class, entity.name.type, support.class#ea4334
variable, variable.other#ea4334
constant, constant.language, support.constant#34a853bold
support.type, support.variable, variable.language#34a853italic
entity.name.tag#4285f4
entity.other.attribute-name#34a853
support.type.property-name.json#4285f4
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json#34a853
variable.other.php, punctuation.definition.variable.php#ea4334
variable.other.property.php#34a853
storage.type.php, keyword.other.type.php#ea4334
support.function.js, support.function.dom.js#8e00
variable.other.object.property.js#8e00
markup.inline.raw.markdown, markup.fenced_code.block.markdown#424242italic
punctuation.definition.markdown#000000
entity.name.tag.yaml#34a853
invalid.deprecated#ea4334strikethrough
invalid#e84135