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#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#181A1F
  • editorGroup.emptyBackground#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#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
  • notifications.background#21252b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#191B20
  • sideBarSectionHeader.background#282c34
  • statusBar.background#16171D
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#fff
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2c313a
  • 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
comment, string.comment#5c6370italic
string#FFD945
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#FF3F4F
string.template.js#E5A422
meta.template.expression.js#f8f8f0
constant.numeric#E373CE
string.embedded.begin, string.embedded.end#E373CE
string.embedded#98c379
constant.language#19D1E5
constant.character, constant.other#19D1E5
variable.language#FF3F4Fitalic
variable.readwrite, variable.readwrite.other.block#61afef
keyword, keyword.operator.logical, keyword.operator.constructor#FF3F4Fitalic
keyword.operator#FF3F4Fitalic
storage#FF3F4Fitalic
storage.type#19D1E5
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object#61afef
variable.other.property, variable.other.block#f8f8f0
entity.other.inherited-class#81F900
entity.name.function, support.function#81F900
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#61afef
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#61afef
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
source.julia meta.bracket#FF8F3F
source.julia entity.name.function, source.julia keyword.operator.boolean#AE81FF
source.julia keyword.operator#FF3F4F
source.julia keyword.operator.isa, source.julia keyword.operator.relation.in#FF3F4Fitalic
source.julia variable.interpolation#F8F8F0FF
source.julia constant.language, source.julia constant.other, source.julia constant.numeric, source.julia constant.character, source.julia support.function.macro, source.julia support.type#00AAFF
source.julia constant.other.symbol#FD5FF0
source.julia keyword.control.using, source.julia keyword.control.import#81F900
source.python storage.type, source.python constant.language, source.python constant.numeric, source.python constant.character#00AAFF
source.python entity.name.function, source.python meta.function support.function#AE81FF
source.python entity.name.type#AE81FFunderline
source.python meta.function-call.generic, source.python meta.function-call support.type, source.python keyword.control.import#81F900
source.python punctuation#5C6370
source.python punctuation.separator.period, source.python punctuation.section, source.python punctuation.separator.colon, source.python punctuation.separator.dict, source.python punctuation.definition.decorator, source.python meta.function.decorator support.type, source.python meta.function.decorator entity.name.function#FF3F4F
source.python punctuation.definition.string, source.python support.type, source.python meta.function-call meta.function-call.arguments support.type#FFD945
source.python keyword.operator.arithmetic
source.python variable.parameter.function.language.special.self, source.python variable.language, source.python constant.other.caps#FF00FF
source.python variable.parameter, source.python variable.parameter.function-call#FF8F3F
source.python support.variable#F8F8F0

Shiki preview

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

Loading...

Julia Color Themes - Coding Theme