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#21252b
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • diffEditor.insertedTextBackground#007e9733
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#21252b
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#F8F8F2
  • editor.lineHighlightBackground#383E4A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.background#181A1F
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3B4048
  • gitDecoration.modifiedResourceForeground#3dbbff
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notification.background#21252b
  • scrollbar.shadow#0c0d0f
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#2c3038
  • sideBarSectionHeader.background#21252b
  • statusBar.background#2f5691
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#f8f8f2
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#21252b
  • tab.border#181A1F
  • tab.inactiveBackground#2c3038
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F8F8F2
comment, string.comment#777777italic
comment.block.documentation storage.type.class, punctuation.definition.block.tag, entity.name.type.instance#d8d8d8italic
string, string.template#E6DB74
constant.numeric#AE81FF
string.embedded.begin, string.embedded.end#A6E22E
string.embedded#A6E22E
constant.character, constant.other#AE81FF
variable.language#F92672
variable.readwrite, variable.readwrite.other.block#66D9EF
keyword, keyword.operator.logical, keyword.operator.constructor#F92672
keyword.operator#F92672
storage#F92672
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#66D9EFunderline
meta.objectliteral#f8f8f2
variable.other.property, variable.other.block#F8F8F2
entity.other.inherited-class#A6E22E
entity.name.function, support.function#A6E22E
entity.name.function-call#F8F8F2
function.support.builtin, function.support.core#A6E22E
entity.other.attribute-name#A6E22E
support.type, support.variable, support.constant#66D9EF
storage.type#F92672
constant.language#F92672
meta.template.expression.js, keyword.operator.spread#F8F8F2
variable.parameter#FD971Fitalic
meta.object-literal.key#F8F8F2
punctuation.accessor, punctuation.separator.comma, meta.brace.round, punctuation.definition.block#F8F8F2
entity.name.tag.js, entity.name.tag.inline.any.html, entity.name.tag.block.any.html, entity.name.tag.structure.any.html, entity.name.tag.jade#d9d9fa
meta.tag.attributes keyword.operator.assignment.js#e6db74
entity.name.tag.css#F92672
meta.attribute-selector.scss#E6DB74
variable.css, variable.scss, variable.less, variable.sass#FD971F
punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss#F8F8F2
support.constant.media#a6e22e
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.function.url#66D9EFitalic
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.hex.css#A6E22E
support.constant.property-value, meta.property-value.css#6fee4c
punctuation.separator.list.comma.css, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css#fff
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#A6E22E
unit.css, unit.scss, unit.less, unit.sass#A6E22E
function.css, function.scss, function.less, function.sass#66D9EF
support.dictionary.json#66D9EF
invalid#F8F8F0
invalid.deprecated#F8F8F0
structure.dictionary.property-name.json#CFCFC2
string.detected-link#66D9EF
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#696969
markup.underline.link.markdown#66D9EF
markup.bold.markdownbold
punctuation.definition.bold.markdown#696969
markup.heading.markdown#F92672bold
punctuation.definition.heading.markdown#696969
markup.quote.markdown#A6E22E
meta.separator.markdown#A6E22Ebold
markup.raw.inline.markdown, markup.raw.block.markdown#66D9EF
punctuation.definition.list_item.markdown#ffffffbold