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#383838
  • activityBar.foreground#ffffffde
  • activityBar.inactiveForeground#ffffff99
  • activityBarBadge.foreground#ffffffde
  • breadcrumb.background#323232
  • breadcrumb.foreground#ffffff99
  • debugConsole.errorForeground#e74c3c
  • debugConsole.infoForeground#2ecc71
  • debugConsole.sourceForeground#ffffffde
  • debugConsole.warningForeground#f1c40f
  • editor.background#121212
  • editor.foreground#ffffffde
  • editorCursor.foreground#ffffff
  • editorGroupHeader.tabsBackground#262626
  • editorLineNumber.activeForeground#ffffffde
  • editorLineNumber.foreground#ffffff99
  • editorRuler.foreground#ffffff99
  • focusBorder#ffffff00
  • panel.background#282828
  • panelTitle.activeBorder#ffffffde
  • panelTitle.activeForeground#ffffffde
  • panelTitle.inactiveForeground#ffffff99
  • peekView.border#383838
  • peekViewEditor.background#2E2E2E
  • peekViewResult.background#323232
  • peekViewResult.fileForeground#ffffffde
  • peekViewResult.lineForeground#ffffffde
  • peekViewTitle.background#383838
  • peekViewTitleDescription.foreground#ffffff99
  • peekViewTitleLabel.foreground#ffffffde
  • sideBar.background#282828
  • sideBar.foreground#ffffffde
  • sideBarSectionHeader.background#323232
  • sideBarSectionHeader.foreground#ffffffde
  • statusBar.background#383838
  • statusBar.border#ffffff00
  • statusBar.debuggingBackground#383838
  • statusBar.debuggingBorder#ffffff00
  • statusBar.debuggingForeground#ffffffde
  • statusBar.focusBorder#ffffff00
  • statusBar.foreground#ffffffde
  • statusBar.noFolderBackground#383838
  • statusBar.noFolderBorder#ffffff00
  • statusBar.noFolderForeground#ffffffde
  • statusBarItem.remoteBackground#60003d
  • statusBarItem.remoteForeground#ffffffde
  • tab.activeBackground#323232
  • tab.activeForeground#ffffffde
  • tab.activeModifiedBorder#f1c40f
  • tab.hoverBackground#323232
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#ffffffde
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5595ff
  • terminal.ansiBrightBlack#334265
  • terminal.ansiBrightBlue#95bdfe
  • terminal.ansiBrightCyan#05f3fc
  • terminal.ansiBrightGreen#88f56f
  • terminal.ansiBrightMagenta#ed9eff
  • terminal.ansiBrightRed#ffa2a1
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd794
  • terminal.ansiCyan#01ced6
  • terminal.ansiGreen#65d24b
  • terminal.ansiMagenta#d26ce8
  • terminal.ansiRed#ff5b66
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#f3ae04
  • terminal.background#000f32
  • terminal.foreground#e0e0e0
  • terminal.selectionBackground#264f78
  • terminalCursor.background#000f32
  • terminalCursor.foreground#e0e0e0
  • titleBar.activeBackground#383838
  • titleBar.activeForeground#ffffffde
  • titleBar.inactiveBackground#383838
  • titleBar.inactiveForeground#ffffff99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring#a0a0a0italic
constant#d26ce8
entity#65d24b
keyword#ff5b66
storage#5595ff
string#f3ae04
support#01ced6
variable#e0e0e0
invalidstrikethrough
entity.other.inherited-class#65d24bitalic
string.quoted source#f3ae04
string constant#d26ce8
string.regexp#5595ff
string variable#e0e0e0
support.function#5595ff
support.constant#65d24b
other.preprocessor.c#5595ff
other.preprocessor.c entity#65d24b
punctuation.separator.key-value.js#d26ce8
meta.object-literal.key.js#f3ae04
entity.name.tag#ff5b66
entity.other.attribute-name#65d24b
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#e0e0e0
meta.selector.css entity.name.tag#65d24b
meta.selector.css entity.other.attribute-name.id#65d24b
meta.selector.css entity.other.attribute-name.class#65d24b
support.type.property-name.css#5595ff
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#65d24b italic
meta.preprocessor.at-rule keyword.control.at-rule#f3ae04
meta.property-value support.constant.named-color.css, meta.property-value constant#ff5b66
meta.constructor.argument.css#ff5b66
meta.diff, meta.diff.header#e0e0e0italic
markup.deleted#ff5b66
markup.changed#f3ae04
markup.inserted#65d24b
entity.other.attribute-name.id.html#65d24b
entity.other.attribute-name.html#65d24b
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#e0e0e0
keyword.control.at-rule.import.css#f3ae04
variable.other.less#e0e0e0
entity.other.less.mixin#d26ce8
source.css.less keyword.unit.css#5595ff
entity.other.attribute-name.angular.html, source.angular.embedded.html#ff5b66
constant.character.entity.html#5595ff
variable.other.readwrite.instance.coffee#f3ae04
meta.brace.round.coffee, meta.brace.square.coffee#f3ae04
punctuation.section.embedded.coffee#01ced6
variable.assignment.coffee variable.assignment.coffee#e0e0e0
meta.delimiter.method.period.coffee#5595ff
meta.brace.curly.coffee#65d24b
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#5595ff
punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#f3ae04
markup.heading.markdown entity.name.section.markdown#d26ce8
markup.bold.markdownbold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough
string.other.link.title.markdown#5595ff
markup.underline.link.markdown#a0a0a0underline
comment, string.quoted.docstring#a0a0a0italic
constant#d26ce8
entity#65d24b
keyword#ff5b66
storage#5595ff
string#f3ae04
support#01ced6
variable#e0e0e0
invalidstrikethrough
entity.other.inherited-class#65d24bitalic
string.quoted source#f3ae04
string constant#d26ce8
string.regexp#5595ff
string variable#e0e0e0
support.function#5595ff
support.constant#65d24b
other.preprocessor.c#5595ff
other.preprocessor.c entity#65d24b
punctuation.separator.key-value.js#d26ce8
meta.object-literal.key.js#f3ae04
entity.name.tag#ff5b66
entity.other.attribute-name#65d24b
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#e0e0e0
meta.selector.css entity.name.tag#65d24b
meta.selector.css entity.other.attribute-name.id#65d24b
meta.selector.css entity.other.attribute-name.class#65d24b
support.type.property-name.css#5595ff
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#65d24b italic
meta.preprocessor.at-rule keyword.control.at-rule#f3ae04
meta.property-value support.constant.named-color.css, meta.property-value constant#ff5b66
meta.constructor.argument.css#ff5b66
meta.diff, meta.diff.header#e0e0e0italic
markup.deleted#ff5b66
markup.changed#f3ae04
markup.inserted#65d24b
entity.other.attribute-name.id.html#65d24b
entity.other.attribute-name.html#65d24b
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#e0e0e0
keyword.control.at-rule.import.css#f3ae04
variable.other.less#e0e0e0
entity.other.less.mixin#d26ce8
source.css.less keyword.unit.css#5595ff
entity.other.attribute-name.angular.html, source.angular.embedded.html#ff5b66
constant.character.entity.html#5595ff
variable.other.readwrite.instance.coffee#f3ae04
meta.brace.round.coffee, meta.brace.square.coffee#f3ae04
punctuation.section.embedded.coffee#01ced6
variable.assignment.coffee variable.assignment.coffee#e0e0e0
meta.delimiter.method.period.coffee#5595ff
meta.brace.curly.coffee#65d24b
meta.tag.sgml.doctype.xml, declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string, doctype#5595ff
punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#f3ae04
markup.heading.markdown entity.name.section.markdown#d26ce8
markup.bold.markdownbold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough
string.other.link.title.markdown#5595ff
markup.underline.link.markdown#a0a0a0underline