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.activeBorder#c2487a
  • activityBar.background#f5f2f7
  • activityBar.border#e0daeb
  • activityBar.foreground#2a1040
  • activityBar.inactiveForeground#7a6b95
  • activityBarBadge.background#b83d5f
  • activityBarBadge.foreground#f5f2f7
  • badge.background#b83d5f
  • badge.foreground#f5f2f7
  • button.background#b83d5f
  • button.foreground#f5f2f7
  • button.hoverBackground#c73d52
  • button.secondaryBackground#8a6ba5
  • button.secondaryForeground#f5f2f7
  • button.secondaryHoverBackground#8a5a90
  • descriptionForeground#7a6b95
  • dropdown.background#ebe7f0
  • dropdown.border#c9c3e8
  • dropdown.foreground#2a1040
  • dropdown.listBackground#f5f2f7
  • editor.background#f5f2f7
  • editor.findMatchBackground#d64570c0
  • editor.findMatchHighlightBackground#d6457030
  • editor.foreground#2a1040
  • editor.inactiveSelectionBackground#c9c3e840
  • editor.lineHighlightBackground#e8e4eb
  • editor.selectionBackground#a565a060
  • editor.selectionHighlightBackground#6b52a030
  • editor.wordHighlightBackground#a565a030
  • editor.wordHighlightStrongBackground#e299bb40
  • editorCursor.foreground#c2487a
  • editorGroup.border#e0daeb
  • editorGroupHeader.tabsBackground#f5f2f7
  • editorGroupHeader.tabsBorder#e0daeb
  • editorGutter.addedBackground#5a88c7
  • editorGutter.background#f5f2f7
  • editorGutter.deletedBackground#c73d52
  • editorGutter.modifiedBackground#cc5f62
  • editorHoverWidget.background#ebe7f0
  • editorHoverWidget.border#e0daeb
  • editorIndentGuide.activeBackground#c9c3e8
  • editorIndentGuide.background#e0daeb
  • editorLineNumber.activeForeground#5d4575
  • editorLineNumber.foreground#9b8aaa
  • editorRuler.foreground#e0daeb
  • editorSuggestWidget.background#ebe7f0
  • editorSuggestWidget.border#e0daeb
  • editorSuggestWidget.foreground#2a1040
  • editorSuggestWidget.highlightForeground#c2487a
  • editorSuggestWidget.selectedBackground#8a5a90
  • editorWhitespace.foreground#c9c3e860
  • editorWidget.background#ebe7f0
  • editorWidget.border#e0daeb
  • editorWidget.foreground#2a1040
  • errorForeground#c73d52
  • focusBorder#c2487a
  • foreground#2a1040
  • gitDecoration.addedResourceForeground#5a88c7
  • gitDecoration.conflictingResourceForeground#b83d5f
  • gitDecoration.deletedResourceForeground#c73d52
  • gitDecoration.ignoredResourceForeground#9b8aaa
  • gitDecoration.modifiedResourceForeground#cc5f62
  • gitDecoration.submoduleResourceForeground#8a5a90
  • gitDecoration.untrackedResourceForeground#7a6b95
  • icon.foreground#5d4575
  • input.background#ebe7f0
  • input.border#c9c3e8
  • input.foreground#2a1040
  • input.placeholderForeground#7a6b9580
  • inputOption.activeBorder#c2487a
  • inputValidation.errorBackground#c73d5220
  • inputValidation.errorBorder#c73d52
  • inputValidation.warningBackground#cc5f6220
  • inputValidation.warningBorder#cc5f62
  • list.activeSelectionBackground#8a5a90
  • list.activeSelectionForeground#f5f2f7
  • list.dropBackground#b83d5f40
  • list.focusBackground#8a5a90
  • list.focusForeground#f5f2f7
  • list.highlightForeground#c2487a
  • list.hoverBackground#8a6ba560
  • list.hoverForeground#2a1040
  • list.inactiveSelectionBackground#c9c3e880
  • list.inactiveSelectionForeground#2a1040
  • menu.background#ebe7f0
  • menu.border#e0daeb
  • menu.foreground#2a1040
  • menu.selectionBackground#8a5a90
  • menu.selectionBorder#c2487a
  • menu.selectionForeground#f5f2f7
  • menu.separatorBackground#c9c3e8
  • menubar.selectionBackground#e0daeb60
  • menubar.selectionBorder#c2487a
  • menubar.selectionForeground#2a1040
  • notificationCenter.border#e0daeb
  • notificationCenterHeader.background#ebe7f0
  • notificationLink.foreground#c2487a
  • notifications.background#ebe7f0
  • notifications.border#e0daeb
  • notifications.foreground#2a1040
  • notificationToast.border#e0daeb
  • panel.background#f5f2f7
  • panel.border#e0daeb
  • panelTitle.activeBorder#c2487a
  • panelTitle.activeForeground#c2487a
  • panelTitle.inactiveForeground#7a6b95
  • peekView.border#c2487a
  • peekViewEditor.background#ebe7f0
  • peekViewEditor.matchHighlightBackground#b83d5f40
  • peekViewResult.background#f5f2f7
  • peekViewResult.fileForeground#2a1040
  • peekViewResult.lineForeground#7a6b95
  • peekViewResult.matchHighlightBackground#b83d5f40
  • peekViewResult.selectionBackground#8a5a90
  • peekViewResult.selectionForeground#f5f2f7
  • peekViewTitle.background#e0daeb
  • peekViewTitleDescription.foreground#7a6b95
  • peekViewTitleLabel.foreground#2a1040
  • progressBar.background#5a88c7
  • scrollbar.shadow#f5f2f760
  • scrollbarSlider.activeBackground#8a6ba5
  • scrollbarSlider.background#c9c3e860
  • scrollbarSlider.hoverBackground#8a5a9080
  • selection.background#8a5a9060
  • sideBar.background#ebe7f0
  • sideBar.border#e0daeb
  • sideBar.foreground#2a1040
  • sideBarSectionHeader.background#e0daeb60
  • sideBarSectionHeader.border#c9c3e840
  • sideBarSectionHeader.foreground#5d4575
  • sideBarTitle.foreground#c2487a
  • statusBar.background#f5f2f7
  • statusBar.border#e0daeb
  • statusBar.debuggingBackground#b83d5f
  • statusBar.debuggingForeground#f5f2f7
  • statusBar.foreground#5d4575
  • statusBar.noFolderBackground#8a6ba5
  • statusBarItem.activeBackground#c9c3e850
  • statusBarItem.hoverBackground#e0daeb60
  • tab.activeBackground#f5f2f7
  • tab.activeBorder#c2487a
  • tab.activeForeground#2a1040
  • tab.border#e0daeb
  • tab.inactiveBackground#ebe7f0
  • tab.inactiveForeground#7a6b95
  • tab.unfocusedActiveBackground#ebe7f080
  • tab.unfocusedActiveForeground#5d4575
  • tab.unfocusedInactiveForeground#9b8aaa
  • terminal.ansiBlack#2a1040
  • terminal.ansiBlue#7a6b95
  • terminal.ansiBrightBlack#9b8aaa
  • terminal.ansiBrightBlue#5d4575
  • terminal.ansiBrightCyan#8a5a90
  • terminal.ansiBrightGreen#5a88c7
  • terminal.ansiBrightMagenta#c2487a
  • terminal.ansiBrightRed#b83d5f
  • terminal.ansiBrightWhite#f5f2f7
  • terminal.ansiBrightYellow#cc5f62
  • terminal.ansiCyan#c2487a
  • terminal.ansiGreen#5a88c7
  • terminal.ansiMagenta#8a5a90
  • terminal.ansiRed#c73d52
  • terminal.ansiWhite#f5f2f7
  • terminal.ansiYellow#cc5f62
  • terminal.background#f5f2f7
  • terminal.foreground#2a1040
  • textBlockQuote.background#e0daeb40
  • textBlockQuote.border#c9c3e8
  • textCodeBlock.background#e0daeb60
  • textLink.activeForeground#b83d5f
  • textLink.foreground#c2487a
  • textPreformat.foreground#5a88c7
  • textSeparator.foreground#c9c3e8
  • titleBar.activeBackground#f5f2f7
  • titleBar.activeForeground#2a1040
  • titleBar.border#e0daeb
  • titleBar.inactiveBackground#f5f2f7
  • titleBar.inactiveForeground#7a6b95
  • widget.shadow#2a104020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a6b95italic
comment.block.documentation, comment.line.documentation#5d4575italic
variable, variable.other, variable.language.this, variable.parameter, meta.object-literal.key, support.variable#2a1040
variable.other.property, variable.other.object.property, variable.object.property#5d4575
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#c2487abold
keyword.control.flow, keyword.control.conditional, keyword.control.loop#b83d5fbold
entity.name.function, meta.function-call entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#4278bfbold
entity.name.function.constructor#7a4785bold
entity.name.class, entity.name.type.class, entity.name.type, support.type, support.class, support.other.namespace, entity.other.inherited-class#7a4785bold
string, string.quoted, string.template#6a5d85
string.regexp, string.other.link#5a3f8a
string.template punctuation.definition.string.begin, string.template punctuation.definition.string.end, punctuation.definition.string#a5567b
constant.numeric, constant.language, constant.character, constant.other.color#cc5f62
constant.language.boolean, constant.language.null, constant.language.undefined#b83d5fbold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison#c2487a
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor#5d4575
punctuation.definition.block, punctuation.definition.group, punctuation.definition.parameters, punctuation.definition.array#a5567b
entity.name.tag, meta.tag.sgml#b83d5fbold
entity.other.attribute-name, entity.other.attribute-name.html#c2487a
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#a5567b
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7a4785
support.type.property-name.css, meta.property-name.css#4278bf
support.constant.property-value.css, meta.property-value.css#cc5f62
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#c2487a
variable.other.constant.js, variable.other.constant.ts#cc5f62bold
meta.import variable.other.readwrite, meta.export variable.other.readwrite#7a4785
keyword.control.import, keyword.control.export, keyword.control.from#b83d5fbold
punctuation.definition.template-expression, keyword.other.template#c2487a
markup.heading, entity.name.section.markdown#c2487abold
markup.bold#b83d5fbold
markup.italic#7a4785italic
markup.inline.raw, markup.fenced_code#4278bf
markup.underline.link#c2487aunderline
markup.inserted.git_gutter#4278bf
markup.deleted.git_gutter#c73d52
markup.changed.git_gutter#cc5f62
invalid, invalid.illegal, invalid.deprecated#c73d52bold
constant.character.escape, constant.other.character-class.escape#5a3f8abold
*url*, *link*, *uri*#c2487aunderline
meta.decorator, punctuation.decorator#cc5f62bold