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.

  • activityBarBadge.background#1290BA
  • breadcrumb.background#16181D
  • button.background#0F7799
  • button.hoverBackground#1290BA
  • editor.background#16181D
  • editor.findMatchHighlightBackground#15a5d555
  • editor.foreground#FFFFFF
  • editorGutter.background#16181D
  • editorLink.activeForeground#33BDEB
  • editorSuggestWidget.highlightForeground#16B0E3
  • editorSuggestWidget.selectedBackground#073A4A
  • focusBorder#1397C3
  • inputOption.activeBackground#1397C366
  • list.activeSelectionBackground#0B566F
  • list.focusBackground#073A4A
  • list.highlightForeground#16B0E3
  • menu.selectionBackground#0B566F
  • peekView.border#1290BA
  • peekViewEditor.background#05242E
  • peekViewEditorGutter.background#05242E
  • pickerGroup.foreground#4AC4ED
  • progressBar.background#1290BA
  • selection.background#1290BA
  • statusBar.background#252526
  • statusBar.debuggingBackground#252526
  • statusBar.noFolderBackground#252526
  • statusBarItem.remoteBackground#149ECA
  • tab.activeBackground#16181D
  • textLink.foreground#4AC4ED

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#757575
constant.numeric, constant.numeric.integer, constant.numeric.integer.binary, constant.numeric.integer.octal, constant.numeric.integer.decimal, constant.numeric.integer.hexadecimal, constant.numeric.integer.other, constant.numeric.float, constant.numeric.float.binary, constant.numeric.float.octal, constant.numeric.float.decimal, constant.numeric.float.hexadecimal, constant.numeric.float.other, constant.numeric.complex, constant.numeric.complex.real, constant.numeric.complex.imaginary, constant.language, constant.character.escape, constant.other.placeholder, constant.other#C64640
entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, entity.name.impl, entity.name.type, entity.name.class.forward-decl, entity.other.inherited-class, entity.name.namespace, entity.name.constant, entity.name.label, entity.name.tag, entity.other.attribute-name#FFFFFF
entity.name.function, entity.name.function.constructor, entity.name.function.destructor#86D9CA
entity.name.tag.html#86D9CA
entity.name.tag.js, entity.name.tag.tsx#DFAB5C
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.tsx#77B7D7
entity.name.tag.css, entity.name.tag.less#86D9CA
invalid.illegal, invalid.deprecated#EF4444
keyword.control, keyword.control.conditional, keyword.control.import, punctuation.definition.keyword, keyword.other, keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical, keyword.operator.word#77B7D7
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.logical, keyword.operator.word#FFFFFF
markup.bold, markup.italic, markup.underline, markup.inserted, markup.deleted, markup.underline.link, markup.raw.inline, markup.raw.block, markup.other#77B7D7
markup.heading#77B7D7bold
markup.list.unnumbered, markup.list.numbered, markup.quote#FFFFFF
markup.inline#DFAB5C
punctuation.definition.annotation, punctuation.section.block.begin, punctuation.section.block.end, punctuation.section.braces.begin, punctuation.section.braces.end, punctuation.section.group.begin, punctuation.section.group.end, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.section.brackets.begin, punctuation.section.brackets.end, punctuation.definition.generic.begin, punctuation.definition.generic.end#FFFFFF
punctuation.separator, punctuation.terminator, punctuation.separator.continuation, punctuation.accessor#FFFFFF
storage.type, storage.modifier, storage.type.function, keyword.declaration.function, storage.type.class, keyword.declaration.class, storage.type.struct, keyword.declaration.struct, storage.type.enum, keyword.declaration.enum, storage.type.union, keyword.declaration.union, storage.type.trait, keyword.declaration.trait, storage.type.interface, keyword.declaration.interface, storage.type.impl, keyword.declaration.impl, storage.type, keyword.declaration.type#77B7D7
storage.type.function.arrow#FFFFFF
string.quoted.single, string.quoted.double, string.quoted.triple, string.quoted.other, punctuation.definition.string.begin, punctuation.definition.string.end, string.unquoted, string.regexp, punctuation.section.interpolation.begin, punctuation.section.interpolation.end, source.*language-suffix*.embedded#977CDC
string.quoted.single.json, string.quoted.double.json, string.quoted.triple.json, string.quoted.other.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string.unquoted.json, string.regexp.json, punctuation.section.interpolation.begin.json, punctuation.section.interpolation.end.json#FFFFFF
support.function, support.module, support.class#86D9CA
support.constant#C64640
support.type#FFFFFF
support.type.property-name#77B7D7
text.html, text.xml#FFFFFF
variable.other, punctuation.definition.variable, variable.other, variable.other.member, variable.function, variable.annotation, punctuation.definition.annotation, variable.object#77B7D7
variable.other.readwrite, variable.other.constant, variable.other.object, variable.language, variable.parameter#FFFFFF