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.activeBorder#9CF
  • activityBar.background#000
  • activityBar.foreground#9CF
  • activityBar.inactiveForeground#FFF
  • activityBarBadge.background#9CF
  • breadcrumb.background#000
  • editor.background#000
  • editor.foreground#FFF
  • editor.selectionBackground#99C0CC55
  • editorBracketHighlight.foreground1#F44
  • editorBracketHighlight.foreground2#9CF
  • editorBracketHighlight.foreground3#F44
  • editorBracketHighlight.foreground4#9CF
  • editorBracketHighlight.foreground5#F44
  • editorBracketHighlight.foreground6#9CF
  • editorCursor.foreground#FFF
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#000
  • editorWidget.background#000
  • editorWidget.foreground#FFF
  • gitDecoration.addedResourceForeground#0D0
  • gitDecoration.conflictingResourceForeground#F00
  • gitDecoration.deletedResourceForeground#F00
  • gitDecoration.ignoredResourceForeground#AAA
  • gitDecoration.modifiedResourceForeground#9CF
  • gitDecoration.stageDeletedResourceForeground#F00
  • gitDecoration.stageModifiedResourceForeground#9CF
  • gitDecoration.untrackedResourceForeground#FA0
  • input.background#000
  • input.foreground#FFF
  • list.activeSelectionBackground#99C0CC55
  • list.activeSelectionForeground#FFF
  • list.hoverBackground#99C0CC55
  • list.inactiveSelectionBackground#99C0CC55
  • sideBar.activeBackground#99C0CC55
  • sideBar.background#000
  • sideBar.border#000
  • sideBar.foreground#DDD
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.foreground#FFF
  • sideBarTitle.foreground#DDD
  • statusBar.background#000
  • statusBar.foreground#FFF
  • tab.activeBackground#000
  • tab.activeBorderTop#9CF
  • tab.activeForeground#FFF
  • tab.border#000
  • tab.inactiveBackground#000
  • terminal.ansiBlack#FFF
  • terminal.ansiBlue#9CF
  • terminal.ansiBrightBlack#444
  • terminal.ansiBrightBlue#9CF
  • terminal.ansiBrightCyan#4DD
  • terminal.ansiBrightGreen#4D4
  • terminal.ansiBrightMagenta#F4F
  • terminal.ansiBrightRed#F44
  • terminal.ansiBrightWhite#000
  • terminal.ansiBrightYellow#FAA
  • terminal.ansiCyan#0DD
  • terminal.ansiGreen#0D0
  • terminal.ansiMagenta#F0F
  • terminal.ansiRed#F00
  • terminal.ansiWhite#AAA
  • terminal.ansiYellow#FA0
  • terminal.background#000
  • terminal.foreground#FFF
  • titleBar.activeBackground#000
  • titleBar.inactiveBackground#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAitalic
comment.block.preprocessor#AAAitalic
comment.documentation, comment.block.documentation#AAAitalic
invalid.illegal#D00underline
keyword, storage, support.class, entity.name.class#F00
entity.name.type, support.type#FFF
constant.language, support.constant, variable.language#0D0
variable, entity, support.variable#9CF
entity.name.function, support.function, entity.name.method#9CF
entity.name.type, entity.other.inherited-class, support.class#FFF
entity.name.exception#F00
entity.name.sectionbold
constant.numeric, constant.character, constant#0D0
string#0D0
constant.character.escape#0D0
string.regexp#0D0
constant.other.symbol#0D0
punctuation#F00
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F00
entity.name.tag#9CF
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#F00italic
constant.character.entity, punctuation.definition.entity#9CF
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#F00
meta.property-name, support.type.property-name#9CF
meta.property-value, meta.property-value constant.other, support.constant.property-value#F00
markup.changed#FFF
markup.deleted#FFF
markup.italicitalic
markup.error#F00
markup.inserted#FFF
meta.link#0D0
markup.output, markup.raw#777
markup.prompt#F00
markup.heading#F00
markup.boldbold
markup.traceback#9CF
markup.underlineunderline
markup.quote#9CF
markup.list#F00
markup.bold, markup.italic, markup.underline#9CF
markup.inline.raw#9CF
meta.diff.range, meta.diff.index, meta.separator#9CF
meta.diff.header.from-file#0D0
meta.diff.header.to-file#F00
vscode-brutal-light by Tianji Yang - VS Code Theme