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.activeBorder#7d57c1
  • activityBar.background#292d3d
  • activityBar.border#353a50
  • activityBar.foreground#ced1de
  • activityBarBadge.background#7d57c1
  • badge.background#7d57c1
  • button.background#7d57c1
  • button.hoverBackground#916bd5
  • contrastBorder#414762
  • diffEditor.insertedTextBackground#85c75e26
  • diffEditor.removedTextBackground#e6292926
  • dropdown.background#313649
  • dropdown.border#414762
  • editor.background#292d3d
  • editor.foreground#ced1de
  • editor.hoverHighlightBackground#49506e
  • editor.lineHighlightBackground#313649
  • editor.lineHighlightBorder#313649
  • editor.selectionBackground#8247eb73
  • editor.selectionHighlightBackground#753ade4d
  • editor.wordHighlightBackground#ffffff00
  • editor.wordHighlightBorder#8247ebff
  • editor.wordHighlightStrongBackground#ffffff00
  • editor.wordHighlightStrongBorder#8247ebff
  • editorCursor.foreground#e8c2ff
  • editorGroupHeader.border#313649
  • editorGroupHeader.tabsBackground#292d3d
  • editorGroupHeader.tabsBorder#353a50
  • editorIndentGuide.activeBackground#5a6287
  • editorIndentGuide.background#414762
  • editorLineNumber.activeForeground#ced1de
  • editorLineNumber.foreground#52597a
  • editorRuler.foreground#49506e
  • editorSuggestWidget.highlightForeground#a680ea
  • editorSuggestWidget.selectedBackground#393f56
  • editorWhitespace.foreground#49506e
  • editorWidget.background#313649
  • errorForeground#eb5757
  • focusBorder#7d57c1
  • foreground#ced1de
  • gitDecoration.conflictingResourceForeground#F2994A
  • gitDecoration.deletedResourceForeground#eb5757
  • gitDecoration.ignoredResourceForeground#5a6287
  • gitDecoration.modifiedResourceForeground#26B5CE
  • gitDecoration.untrackedResourceForeground#4CB782
  • icon.foreground#ced1de
  • input.background#393f56
  • input.border#49506e
  • inputOption.activeBackground#7d57c1
  • inputValidation.errorBorder#eb5757
  • list.activeSelectionBackground#393f56
  • list.activeSelectionForeground#ba94fe
  • list.focusBackground#393f56
  • list.hoverBackground#393f56
  • list.inactiveSelectionBackground#353a50
  • list.inactiveSelectionForeground#ba94fe
  • panel.border#353a50
  • panelTitle.activeBorder#7d57c1
  • peekViewEditor.background#313649
  • progressBar.background#916bd5
  • selection.background#7d57c1
  • sideBar.background#292d3d
  • sideBar.border#353a50
  • sideBarSectionHeader.background#393f56
  • statusBar.foreground#ced1de
  • tab.activeBackground#353a50
  • tab.activeBorderTop#7d57c1
  • tab.border#353a50
  • tab.inactiveBackground#292d3d
  • terminal.ansiBrightGreen#a2d484
  • terminal.ansiCyan#26B5CE
  • terminal.ansiGreen#4CB782
  • terminal.ansiMagenta#cba0ff
  • terminal.ansiRed#eb5757
  • terminal.ansiYellow#ffcc6d
  • terminalCursor.foreground#e8c2ff
  • titleBar.activeBackground#313649
  • titleBar.inactiveBackground#313649
  • tree.indentGuidesStroke#52597a
  • tree.tableColumnsBorder#52597a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#9198b6normal
variable, variable.other, variable.parameter, entity.name.variable, string constant.other.placeholder, source.vue meta.object.member.ts meta.object.member.ts#f3f4f7
variable.parameter#f3f4f7
constant.other.class, variable.other.property, variable.other.object.property#f3b7e9
invalid, invalid.illegal#eb5757
keyword, storage.type, storage.modifier, meta storage.type#7e89ecnormal
keyword.definition#8e82f8
keyword.operator.comparison, keyword.operator.logical#a89fff
keyword.operator.logical.soilunset
constant.other.color, punctuation, keyword.other.template, keyword.other.substitution, meta.brace, punctuation.support.type.property-name, expression.embbeded punctuation.definition.tag.begin.html, expression.embbeded punctuation.definition.tag.end.html#5da6b8
keyword.operator#5da6b8
punctuation.definition.binding-pattern.object.js#5da6b8
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#74829e
text.html, meta.jsx.children.js#bdc4cc
keyword.control, entity.name.type.namespace, keyword.other, meta.directive support.function#beb7ffnormal
keyword.control.flow, keyword.control.export, keyword.control.return, meta.function.closure, keyword.control.import, keyword.control.from, keyword.control.as, keyword.other.namespacenormal
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#83acf8
meta.method.declaration meta.function-call entity.name.function, meta.method-call entity.name.function, meta.function-call entity.name.function, variable.function, support.function, entity.name.function, keyword.other.special-method#1abdda
meta.function entity.name.function, meta.method entity.name.method, meta.method.declaration entity.name.function, meta.definition.method entity.name.function#61e6fd
support.other.variable, string.other.link#88e6d6
constant.numeric, constant.language, support.constant, constant.character, constant.escape, support.constant.property-value#ffbf71
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#a2d484
string punctuation.definition.string#95d581bd
entity.name, entity.name.type.class, support.type, support.class, new.expr meta.function-call entity.name.function, markup.changed.git_gutter, support.type.sys-types, support.constant, entity.name.type.namespace, meta.tag.custom entity.name.tag.html, source.vue invalid.illegal.unrecognized-tag.html#88e6d6
support.type, meta.return.type, entity.name.type, meta.use.php#88e6d6normal
meta.type.tuple meta.bracenormal
entity.other.inherited-class, support.orther.namespace.use, support.other.namespace#9ebecc
variable.language, variable.language.this, meta variable.language.this#a8f2ffnormal
entity.other.attribute-name, meta entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name, meta.directive.vue keyword.control, meta.directive entity.name.type#cba0ffnormal
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.name.tag.css#cba0ff
markup.inserted#a2d484
markup.deleted#eb5757
markup.changed#26B5CE
*url*, *link*, *uri*underline
keyword.control.at-rule#1abddanormal
entity.name.tag.reference#5fdfff
support.type.property-name.json, meta.objectliteral, source.vue meta.object.member.ts meta.object.member.ts meta.object.member.ts, 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, entity.name.tag.yaml#b1c5ca
keyword.other.unit#d3782e
source.env#a2d484
text.html.markdown, string.other.link.title.markdown#f3f4f7
markup.underline.link.markdown#88e6d6
markup.fenced_code.block.markdown#a2d484

Shiki preview

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

Loading...