Skip to main content
CodingTheme

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#16171D
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A11
  • editor.background#16171D
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#f8f8f0
  • editor.lineHighlightBackground#1F2328
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#3B3C40
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorHoverWidget.highlightForeground#ffffff
  • editorIndentGuide.background#3B4048
  • editorInlayHint.background#262831
  • editorInlayHint.foreground#838594
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#191B20
  • sideBarSectionHeader.background#282c34
  • statusBar.background#1b1c23
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2c313a
  • tab.activeBorderTop#007DD8
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F6F6F6
comment, string.comment#5c6370italic
string#FFD945
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#FF3F4F
meta.string.template#E5A422
meta#f8f8f0
constant.numeric#E373CE
string.embedded.begin, string.embedded.end#E373CE
string.embedded#98c379
constant.language#E373CE
constant.character, constant.other#E373CE
variable.language#FF3F4Fitalic
variable.readwrite, variable.readwrite.other.block#00a0e4
keyword, keyword.operator.logical, keyword.operator.constructor#FF3F4F
keyword.operator#FF3F4F
storage#FF3F4Fitalic
storage.type#19D1E5
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#00a0e4
meta.block.switch.c, variable.other.object#00a0e4
variable.other.property, variable.other.block#f8f8f0
entity.other.inherited-class#81F900
entity.name.function, support.function#81F900
support.function#19D1E5
variable.parameter#FF9700italic
entity.name.function-call#f8f8f0
function.support.builtin, function.support.core#81F900
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#FF3F4F
entity.name.tag.class, entity.name.tag.id#19D1E5
entity.other.attribute-name#81F900
support.constant#19D1E5
support.type, support.variable#19D1E5
support.dictionary.json#19D1E5
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#6AEBF7
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#c678dd
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#E373CE
function.css, function.scss, function.less, function.sass#56b6c2
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
structure.dictionary.property-name.json#56b6c2
string.detected-link#00a0e4
meta.diff, meta.diff.header#75715E
markup.deleted#E542FF
markup.inserted#e5c07b
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#696969
markup.underline.link.markdown#00a0e4
markup.bold.markdownbold
punctuation.definition.bold.markdown#919191
markup.heading.markdown#FF3F4Fbold
punctuation.definition.heading.markdown#919191
markup.quote.markdown#6FD80D
meta.separator.markdown#E542FFbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold
variable.other.jsdoc#9496a5

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...