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.activeBackground#20212b
  • activityBar.activeBorder#7F13DE
  • activityBar.background#282a36
  • activityBar.dropBorder#3e3e3e
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#7F13DE
  • activityBarBadge.background#42be61
  • activityBarBadge.foreground#ffffff
  • badge.background#42be61
  • badge.foreground#ffffff
  • button.background#b443ff56
  • button.hoverBackground#b443ff56
  • diffEditor.insertedTextBackground#50FA7B22
  • diffEditor.removedTextBackground#FF555522
  • dropdown.background#282A36
  • editor.background#282A36
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#7109b752
  • editor.selectionBackground#393c4e
  • editor.wordHighlightStrongBackground#393c4ecb
  • editorBracketMatch.border#42be61
  • editorCursor.foreground#42be61
  • editorGroup.border#333649
  • editorGroup.dropBackground#42be6181
  • editorGroup.dropIntoPromptBackground#ffffff71
  • editorGroup.emptyBackground#282A36
  • editorGroup.focusedEmptyBorder#ffffff
  • editorGroupHeader.tabsBackground#20212b
  • editorLightBulb.foreground#42be61
  • editorLightBulbAutoFix.foreground#42be61
  • editorLineNumber.activeForeground#42be61
  • editorLineNumber.dimmedForeground#42be61
  • editorLineNumber.foreground#7209B7
  • editorOverviewRuler.background#333649
  • focusBorder#42be6133
  • gitDecoration.addedResourceForeground#50FA7B
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.modifiedResourceForeground#FFB86C
  • list.activeSelectionBackground#393c4e
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#7109b793
  • list.errorForeground#FB5607
  • list.focusAndSelectionOutline#7c42be81
  • list.focusBackground#42be6133
  • list.focusForeground#ffffff
  • list.focusHighlightForeground#ffffff
  • list.focusOutline#7c42be81
  • list.hoverBackground#282A36
  • list.inactiveSelectionBackground#282A36
  • menubar.selectionBackground#42be61
  • minimap.background#282A36
  • minimap.errorHighlight#FB5607
  • minimap.foregroundOpacity#000000c0
  • minimap.warningHighlight#3A86FF
  • minimapSlider.activeBackground#42be6181
  • minimapSlider.background#42be6181
  • minimapSlider.hoverBackground#7109b794
  • search.resultsInfoForeground#ffffff
  • sideBar.background#20212b
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#20212b
  • sideBarSectionHeader.border#282A36
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • sideBySideEditor.verticalBorder#333649
  • statusBar.background#20212b
  • tab.activeBackground#282A36
  • tab.activeForeground#ffffff
  • tab.border#333649
  • tab.hoverBackground#333649
  • tab.inactiveBackground#333649
  • tab.inactiveForeground#bababa
  • tab.lastPinnedBorder#282A3641
  • tab.unfocusedActiveBackground#282A36
  • tab.unfocusedActiveBorder#282A36
  • tab.unfocusedActiveBorderTop#282A36
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedHoverBackground#333649
  • tab.unfocusedInactiveBackground#282A36
  • tab.unfocusedInactiveForeground#ffffff
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#8BE9FD
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#BD93F9
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#FFB86C
  • terminal.background#282A36
  • terminal.foreground#F8F8F2
  • terminalCursor.foreground#42be61
  • titleBar.activeBackground#282A36
  • titleBar.activeForeground#FFFFFF
  • titleBar.border#B23EFF33
  • toolbar.activeBackground#42be61
  • toolbar.hoverBackground#ffffff00
  • welcomePage.progress.background#42be61
  • welcomePage.progress.foreground#7F13DE
  • welcomePage.tileBackground#282A36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6272a4italic
variable, string constant.other.placeholder#ffffff
constant.other.color#ffffff
invalid, invalid.illegal#610b74
storage.type, storage.modifier#b443ff
keyword#ff79c6
keyword.other.template, keyword.other.substitution, keyword.control, constant.other.color#b443ff
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#FFFFFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#b443ff
meta.function-call.tsx entity.name.function.tsxitalic
meta.decorator.ts, meta.decorator.ts entity.name.function.ts, entity.name.function.decorator.ts#BD93F9
meta.function-call.ts entity.name.function.ts, meta.function-call.ts support.function, entity.name.function.ts#8BE9FD
meta.function.ts entity.name.function.ts, meta.definition.method.ts entity.name.function.ts, meta.method.declaration.ts entity.name.function.ts, meta.function.declaration.ts entity.name.function.ts#50FA7B
entity.name.type.class.ts, entity.name.type.interface.ts, entity.name.type.ts, support.type#8BE9FD
support.type.primitive.ts, keyword.type.ts#8BE9FD
variable.parameter.ts, meta.parameters.ts variable.parameter.ts#FFB86C
variable.other.property.ts, meta.member.expression.ts variable.other.property.ts#FFFFFF
variable.other.constant.ts, support.constant#BD93F9italic
meta.block variable.other#ffffff
support.other.variable, string.other.link#8be9fd
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#bd93f9
variable.parameter.tsx#ffb86c
string#f1fa8c
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#8be9fd
entity.name.type, support.class, entity.name.type, entity.name.type.module.ts, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8be9fd
support.type#8be9fd
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#ff79c6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#ffffffitalic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#50fa7b
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#00fbffitalic
entity.other.attribute-name.class#07E6FA
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#00b7ff
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json support.type.property-name.json#BD93F9
source.json string.quoted.double.json, source.json string.quoted.single.json#50FA7B
source.json constant.numeric.json#FFB86C
source.json punctuation.separator.dictionary.key-value.json, source.json punctuation.definition.dictionary.begin.json, source.json punctuation.definition.dictionary.end.json, source.json punctuation.definition.array.begin.json, source.json punctuation.definition.array.end.json#6272A4
source.json constant.language.json#8BE9FD
punctuation.definition.fenced.markdown#6272A4
markup.heading.markdown, entity.name.section.markdown#8BE9FDbold
markup.bold.markdown, punctuation.definition.bold.markdown#50FA7Bbold
markup.italic.markdown, punctuation.definition.italic.markdown#BD93F9italic
markup.inline.raw.markdown, punctuation.definition.raw.markdown#FFB86C
markup.fenced_code.block.markdown, markup.raw.block.fenced.markdown#F8F8F2
string.other.link.title.markdown#8BE9FDunderline
markup.underline.link.markdown, string.other.link.description.markdown, markup.link.markdown#6272A4
markup.quote.markdown, punctuation.definition.blockquote.markdown#6272A4italic
punctuation.definition.list.begin.markdown#50FA7B