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#1c022a
  • activityBar.border#28033c
  • activityBar.foreground#5c068c
  • activityBar.inactiveForeground#74386e
  • activityBarBadge.background#4e9a2f
  • activityBarBadge.foreground#f5f1f2
  • badge.background#5c068c
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#d9c8d6
  • breadcrumb.focusForeground#d9c8d6
  • breadcrumb.foreground#74386e
  • button.background#5c068c
  • button.foreground#f5f1f2
  • button.hoverBackground#6c1f98
  • button.secondaryBackground#200231
  • button.secondaryForeground#d9c8d6
  • descriptionForeground#74386e
  • dropdown.background#1c022a
  • dropdown.border#28033c
  • dropdown.foreground#d9c8d6
  • editor.background#170223
  • editor.findMatchBackground#2e6f6b66
  • editor.findMatchHighlightBackground#2e6f6b33
  • editor.foreground#d9c8d6
  • editor.inactiveSelectionBackground#5c068c26
  • editor.lineHighlightBackground#5c068c1a
  • editor.lineHighlightBorder#5c068c00
  • editor.selectionBackground#5c068c4d
  • editor.wordHighlightBackground#5c068c33
  • editorBracketMatch.background#5c068c40
  • editorBracketMatch.border#5c068c99
  • editorCursor.foreground#5c068c
  • editorError.foreground#dd4132
  • editorGroup.border#28033c
  • editorGroupHeader.tabsBackground#1c022a
  • editorGroupHeader.tabsBorder#28033c
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d9c8d633
  • editorIndentGuide.background#d9c8d614
  • editorInfo.foreground#4e9a2f
  • editorLineNumber.activeForeground#d9c8d6
  • editorLineNumber.foreground#74386e
  • editorRuler.foreground#d9c8d614
  • editorSuggestWidget.selectedBackground#5c068c40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d9c8d61a
  • editorWidget.background#1c022a
  • editorWidget.border#28033c
  • focusBorder#5c068c99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#74386e
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#74386e
  • input.background#1c022a
  • input.border#28033c
  • input.foreground#d9c8d6
  • input.placeholderForeground#74386e
  • inputOption.activeBorder#5c068c
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#4e9a2f
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#5c068c4d
  • list.activeSelectionForeground#d9c8d6
  • list.focusBackground#5c068c33
  • list.highlightForeground#5c068c
  • list.hoverBackground#5c068c26
  • list.inactiveSelectionBackground#5c068c26
  • minimap.background#170223
  • minimap.findMatchHighlight#2e6f6b99
  • minimap.selectionHighlight#5c068c66
  • notificationLink.foreground#5c068c
  • notifications.background#200231
  • notifications.foreground#d9c8d6
  • panel.background#1c022a
  • panel.border#28033c
  • panelTitle.activeBorder#5c068c
  • panelTitle.activeForeground#d9c8d6
  • panelTitle.inactiveForeground#74386e
  • peekView.border#5c068c
  • peekViewEditor.background#1c022a
  • peekViewResult.background#200231
  • peekViewTitle.background#1c022a
  • progressBar.background#5c068c
  • scrollbar.shadow#09010e45
  • scrollbarSlider.activeBackground#d9c8d659
  • scrollbarSlider.background#d9c8d61f
  • scrollbarSlider.hoverBackground#d9c8d640
  • selection.background#5c068c4d
  • sideBar.background#200231
  • sideBar.border#28033c
  • sideBar.foreground#d9c8d6
  • sideBarSectionHeader.background#5c068c26
  • sideBarSectionHeader.foreground#d9c8d6
  • sideBarTitle.foreground#d9c8d6
  • statusBar.background#370454
  • statusBar.border#28033c
  • statusBar.debuggingBackground#4e9a2f
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#9d6aba
  • statusBar.noFolderBackground#1c022a
  • statusBarItem.hoverBackground#5c068c4d
  • statusBarItem.remoteBackground#5c068c
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#170223
  • tab.activeBorder#5c068c
  • tab.activeBorderTop#5c068c00
  • tab.activeForeground#d9c8d6
  • tab.border#28033c
  • tab.inactiveBackground#1c022a
  • tab.inactiveForeground#74386e
  • terminal.ansiBlack#170223
  • terminal.ansiBlue#362987
  • terminal.ansiBrightBlack#74386e
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f5f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#d9c8d6
  • terminal.ansiYellow#efc050
  • terminal.background#1c022a
  • terminal.foreground#d9c8d6
  • terminalCursor.foreground#5c068c
  • textLink.activeForeground#69a94e
  • textLink.foreground#4e9a2f
  • titleBar.activeBackground#1c022a
  • titleBar.activeForeground#d9c8d6
  • titleBar.border#28033c
  • titleBar.inactiveBackground#1c022a
  • titleBar.inactiveForeground#74386e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#74386eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#9c68b9bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#9c68b9bold
storage.type, storage.modifier#9c68b9bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#4e9a2f
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#9c68b9
string.regexp#4e9a2f
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4e8682
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#95738abold
variable.other.constant, variable.other.enummember#95738abold
constant.character.escape#9b67b9
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#ad6ab3italic
entity.name.type.parameter#ad6ab3italic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#d9c8d6
variable.parameter#d9c8d6italic
variable.language, variable.language.this, variable.language.self, variable.language.super#9c68b9italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d9c8d6
entity.name.class, entity.name.type.class, support.class#7bc4e2bold italic
entity.other.inherited-class#7bc4e2italic
entity.name.tag, punctuation.definition.tag#9c68b9bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#9b67b9
punctuation, punctuation.separator, punctuation.terminator, meta.brace#74386e
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ad6ab3italic
support.type.property-name.css, support.type.vendored.property-name.css#ad6ab3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7bc4e2bold
support.constant.property-value.css, support.constant.color.css#95738a
keyword.other.unit.css#4e8682
support.type.property-name.json#ad6ab3
markup.heading, markup.heading entity.name, entity.name.section.markdown#9c68b9bold
markup.bold#95738abold
markup.italic#ad6ab3italic
markup.inline.raw, markup.raw#4e9a2f
markup.underline.link#f7cac9
markup.quote#74386eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050