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#e7dee3
  • activityBar.border#c2a9bc
  • activityBar.foreground#5c068c
  • activityBar.inactiveForeground#703172
  • activityBarBadge.background#468b2a
  • activityBarBadge.foreground#f5f1f2
  • badge.background#5c068c
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#14011f
  • breadcrumb.focusForeground#14011f
  • breadcrumb.foreground#703172
  • button.background#5c068c
  • button.foreground#f5f1f2
  • button.hoverBackground#53057e
  • button.secondaryBackground#e7dee3
  • button.secondaryForeground#14011f
  • descriptionForeground#703172
  • dropdown.background#f7f4f6
  • dropdown.border#c2a9bc
  • dropdown.foreground#14011f
  • editor.background#f7f4f6
  • editor.findMatchBackground#2e6f6b59
  • editor.findMatchHighlightBackground#2e6f6b26
  • editor.foreground#14011f
  • editor.inactiveSelectionBackground#5c068c1a
  • editor.lineHighlightBackground#5c068c14
  • editor.lineHighlightBorder#5c068c00
  • editor.selectionBackground#5c068c33
  • editor.wordHighlightBackground#5c068c26
  • editorBracketMatch.background#5c068c33
  • editorBracketMatch.border#5c068c80
  • editorCursor.foreground#5c068c
  • editorError.foreground#bf1932
  • editorGroup.border#c2a9bc
  • editorGroupHeader.tabsBackground#efe9ed
  • editorGroupHeader.tabsBorder#c2a9bc
  • editorGutter.addedBackground#4e9a2f
  • editorGutter.deletedBackground#bf1932
  • editorGutter.modifiedBackground#d4a017
  • editorIndentGuide.activeBackground#14011f2e
  • editorIndentGuide.background#14011f14
  • editorInfo.foreground#468b2a
  • editorLineNumber.activeForeground#14011f
  • editorLineNumber.foreground#703172
  • editorRuler.foreground#14011f14
  • editorSuggestWidget.selectedBackground#5c068c26
  • editorWarning.foreground#d4a017
  • editorWhitespace.foreground#14011f1a
  • editorWidget.background#f7f4f6
  • editorWidget.border#c2a9bc
  • focusBorder#5c068c80
  • gitDecoration.addedResourceForeground#4e9a2f
  • gitDecoration.conflictingResourceForeground#dd4132
  • gitDecoration.deletedResourceForeground#bf1932
  • gitDecoration.ignoredResourceForeground#703172
  • gitDecoration.modifiedResourceForeground#d4a017
  • gitDecoration.untrackedResourceForeground#4e9a2f
  • icon.foreground#703172
  • input.background#f7f4f6
  • input.border#c2a9bc
  • input.foreground#14011f
  • input.placeholderForeground#703172
  • inputOption.activeBorder#5c068c
  • inputValidation.errorBorder#bf1932
  • inputValidation.infoBorder#468b2a
  • inputValidation.warningBorder#d4a017
  • list.activeSelectionBackground#5c068c33
  • list.activeSelectionForeground#14011f
  • list.focusBackground#5c068c26
  • list.highlightForeground#5c068c
  • list.hoverBackground#5c068c1a
  • list.inactiveSelectionBackground#5c068c1a
  • minimap.background#f7f4f6
  • minimap.findMatchHighlight#2e6f6b80
  • minimap.selectionHighlight#5c068c4d
  • notificationLink.foreground#5c068c
  • notifications.background#f7f4f6
  • notifications.foreground#14011f
  • panel.background#efe9ed
  • panel.border#c2a9bc
  • panelTitle.activeBorder#5c068c
  • panelTitle.activeForeground#14011f
  • panelTitle.inactiveForeground#703172
  • peekView.border#5c068c
  • peekViewEditor.background#efe9ed
  • peekViewResult.background#e7dee3
  • peekViewTitle.background#efe9ed
  • progressBar.background#5c068c
  • scrollbar.shadow#09010e14
  • scrollbarSlider.activeBackground#14011f4d
  • scrollbarSlider.background#14011f1a
  • scrollbarSlider.hoverBackground#14011f33
  • selection.background#5c068c33
  • sideBar.background#efe9ed
  • sideBar.border#c2a9bc
  • sideBar.foreground#14011f
  • sideBarSectionHeader.background#5c068c1a
  • sideBarSectionHeader.foreground#14011f
  • sideBarTitle.foreground#14011f
  • statusBar.background#5c068c
  • statusBar.border#c2a9bc
  • statusBar.debuggingBackground#468b2a
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#f5f1f2
  • statusBar.noFolderBackground#e7dee3
  • statusBarItem.hoverBackground#f5f1f233
  • statusBarItem.remoteBackground#4e0577
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#f7f4f6
  • tab.activeBorder#5c068c
  • tab.activeBorderTop#5c068c00
  • tab.activeForeground#14011f
  • tab.border#c2a9bc
  • tab.inactiveBackground#efe9ed
  • tab.inactiveForeground#703172
  • terminal.ansiBlack#14011f
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#703172
  • terminal.ansiBrightBlue#2c9fd9
  • terminal.ansiBrightCyan#45b5aa
  • terminal.ansiBrightGreen#88b04b
  • terminal.ansiBrightMagenta#b163a3
  • terminal.ansiBrightRed#dd4132
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#efc050
  • terminal.ansiCyan#006e7f
  • terminal.ansiGreen#4e9a2f
  • terminal.ansiMagenta#8c3359
  • terminal.ansiRed#bf1932
  • terminal.ansiWhite#f7f4f6
  • terminal.ansiYellow#d4a017
  • terminal.background#efe9ed
  • terminal.foreground#14011f
  • terminalCursor.foreground#5c068c
  • textLink.activeForeground#3e7b26
  • textLink.foreground#468b2a
  • titleBar.activeBackground#efe9ed
  • titleBar.activeForeground#14011f
  • titleBar.border#c2a9bc
  • titleBar.inactiveBackground#efe9ed
  • titleBar.inactiveForeground#703172

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#703172italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#5c068cbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#5c068cbold
storage.type, storage.modifier#5c068cbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#3d7925
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#5c068c
string.regexp#3d7925
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#2e6f6b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#5e2b4ebold
variable.other.constant, variable.other.enummember#5e2b4ebold
constant.character.escape#742b9d
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#9e4fa5italic
entity.name.type.parameter#9e4fa5italic
entity.name.function, meta.function entity.name.function#7f6666bold
meta.function-call entity.name.function, support.function#7f6666
meta.method-call entity.name.function, entity.name.function.member#7f6666
variable, variable.other, variable.other.readwrite#14011f
variable.parameter#14011fitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#5c068citalic
variable.other.property, variable.other.object.property, meta.object-literal.key#14011f
entity.name.class, entity.name.type.class, support.class#456e7ebold italic
entity.other.inherited-class#456e7eitalic
entity.name.tag, punctuation.definition.tag#5c068cbold
entity.other.attribute-name#7f6666italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#742b9d
punctuation, punctuation.separator, punctuation.terminator, meta.brace#703172
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9e4fa5italic
support.type.property-name.css, support.type.vendored.property-name.css#9e4fa5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#456e7ebold
support.constant.property-value.css, support.constant.color.css#5e2b4e
keyword.other.unit.css#2e6f6b
support.type.property-name.json#9e4fa5
markup.heading, markup.heading entity.name, entity.name.section.markdown#5c068cbold
markup.bold#5e2b4ebold
markup.italic#9e4fa5italic
markup.inline.raw, markup.raw#3d7925
markup.underline.link#7f6666
markup.quote#703172italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050