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#5394ff
  • terminal.ansiBrightBlack#454545
  • terminal.ansiBrightBlue#94bcff
  • terminal.ansiBrightCyan#05f3fc
  • terminal.ansiBrightGreen#87f56e
  • terminal.ansiBrightMagenta#ed9dff
  • terminal.ansiBrightRed#ffa1a0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fed794
  • terminal.ansiCyan#02ced6
  • terminal.ansiGreen#65d24b
  • terminal.ansiMagenta#d16ce8
  • terminal.ansiRed#ff5a66
  • terminal.ansiWhite#e0e0e0
  • terminal.ansiYellow#f2ae02
  • terminal.background#121212
  • terminal.foreground#e0e0e0
  • terminal.selectionBackground#264f78
  • terminalCursor.background#121212
  • 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#d16ce8
entity#65d24b
keyword#ff5a66
storage#5394ff
string#f2ae02
support#02ced6
variable#e0e0e0
invalidstrikethrough
entity.other.inherited-class#65d24bitalic
string.quoted source#f2ae02
string constant#d16ce8
string.regexp#5394ff
string variable#e0e0e0
support.function#5394ff
support.constant#65d24b
other.preprocessor.c#5394ff
other.preprocessor.c entity#65d24b
punctuation.separator.key-value.js#d16ce8
meta.object-literal.key.js#f2ae02
entity.name.tag#ff5a66
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#5394ff
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#f2ae02
meta.property-value support.constant.named-color.css, meta.property-value constant#ff5a66
meta.constructor.argument.css#ff5a66
meta.diff, meta.diff.header#e0e0e0italic
markup.deleted#ff5a66
markup.changed#f2ae02
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#f2ae02
variable.other.less#e0e0e0
entity.other.less.mixin#d16ce8
source.css.less keyword.unit.css#5394ff
entity.other.attribute-name.angular.html, source.angular.embedded.html#ff5a66
constant.character.entity.html#5394ff
variable.other.readwrite.instance.coffee#f2ae02
meta.brace.round.coffee, meta.brace.square.coffee#f2ae02
punctuation.section.embedded.coffee#02ced6
variable.assignment.coffee variable.assignment.coffee#e0e0e0
meta.delimiter.method.period.coffee#5394ff
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#5394ff
punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#f2ae02
markup.heading.markdown entity.name.section.markdown#d16ce8
markup.bold.markdownbold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough
string.other.link.title.markdown#5394ff
markup.underline.link.markdown#a0a0a0underline
comment, string.quoted.docstring#a0a0a0italic
constant#d16ce8
entity#65d24b
keyword#ff5a66
storage#5394ff
string#f2ae02
support#02ced6
variable#e0e0e0
invalidstrikethrough
entity.other.inherited-class#65d24bitalic
string.quoted source#f2ae02
string constant#d16ce8
string.regexp#5394ff
string variable#e0e0e0
support.function#5394ff
support.constant#65d24b
other.preprocessor.c#5394ff
other.preprocessor.c entity#65d24b
punctuation.separator.key-value.js#d16ce8
meta.object-literal.key.js#f2ae02
entity.name.tag#ff5a66
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#5394ff
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#f2ae02
meta.property-value support.constant.named-color.css, meta.property-value constant#ff5a66
meta.constructor.argument.css#ff5a66
meta.diff, meta.diff.header#e0e0e0italic
markup.deleted#ff5a66
markup.changed#f2ae02
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#f2ae02
variable.other.less#e0e0e0
entity.other.less.mixin#d16ce8
source.css.less keyword.unit.css#5394ff
entity.other.attribute-name.angular.html, source.angular.embedded.html#ff5a66
constant.character.entity.html#5394ff
variable.other.readwrite.instance.coffee#f2ae02
meta.brace.round.coffee, meta.brace.square.coffee#f2ae02
punctuation.section.embedded.coffee#02ced6
variable.assignment.coffee variable.assignment.coffee#e0e0e0
meta.delimiter.method.period.coffee#5394ff
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#5394ff
punctuation.definition.heading.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#f2ae02
markup.heading.markdown entity.name.section.markdown#d16ce8
markup.bold.markdownbold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough
string.other.link.title.markdown#5394ff
markup.underline.link.markdown#a0a0a0underline