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#1c0d17
  • activityBar.border#281222
  • activityBar.foreground#5e2b4e
  • activityBar.inactiveForeground#74435b
  • activityBarBadge.background#00b140
  • activityBarBadge.foreground#f5f1f2
  • badge.background#5e2b4e
  • badge.foreground#f5f1f2
  • breadcrumb.activeSelectionForeground#d9cbd1
  • breadcrumb.focusForeground#d9cbd1
  • breadcrumb.foreground#74435b
  • button.background#5e2b4e
  • button.foreground#f5f1f2
  • button.hoverBackground#6e4060
  • button.secondaryBackground#210f1b
  • button.secondaryForeground#d9cbd1
  • descriptionForeground#74435b
  • dropdown.background#1c0d17
  • dropdown.border#281222
  • dropdown.foreground#d9cbd1
  • editor.background#180b14
  • editor.findMatchBackground#1b2a6b66
  • editor.findMatchHighlightBackground#1b2a6b33
  • editor.foreground#d9cbd1
  • editor.inactiveSelectionBackground#5e2b4e26
  • editor.lineHighlightBackground#5e2b4e1a
  • editor.lineHighlightBorder#5e2b4e00
  • editor.selectionBackground#5e2b4e4d
  • editor.wordHighlightBackground#5e2b4e33
  • editorBracketMatch.background#5e2b4e40
  • editorBracketMatch.border#5e2b4e99
  • editorCursor.foreground#5e2b4e
  • editorError.foreground#dd4132
  • editorGroup.border#281222
  • editorGroupHeader.tabsBackground#1c0d17
  • editorGroupHeader.tabsBorder#281222
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d9cbd133
  • editorIndentGuide.background#d9cbd114
  • editorInfo.foreground#00b140
  • editorLineNumber.activeForeground#d9cbd1
  • editorLineNumber.foreground#74435b
  • editorRuler.foreground#d9cbd114
  • editorSuggestWidget.selectedBackground#5e2b4e40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d9cbd11a
  • editorWidget.background#1c0d17
  • editorWidget.border#281222
  • focusBorder#5e2b4e99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#74435b
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#74435b
  • input.background#1c0d17
  • input.border#281222
  • input.foreground#d9cbd1
  • input.placeholderForeground#74435b
  • inputOption.activeBorder#5e2b4e
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#00b140
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#5e2b4e4d
  • list.activeSelectionForeground#d9cbd1
  • list.focusBackground#5e2b4e33
  • list.highlightForeground#5e2b4e
  • list.hoverBackground#5e2b4e26
  • list.inactiveSelectionBackground#5e2b4e26
  • minimap.background#180b14
  • minimap.findMatchHighlight#1b2a6b99
  • minimap.selectionHighlight#5e2b4e66
  • notificationLink.foreground#5e2b4e
  • notifications.background#210f1b
  • notifications.foreground#d9cbd1
  • panel.background#1c0d17
  • panel.border#281222
  • panelTitle.activeBorder#5e2b4e
  • panelTitle.activeForeground#d9cbd1
  • panelTitle.inactiveForeground#74435b
  • peekView.border#5e2b4e
  • peekViewEditor.background#1c0d17
  • peekViewResult.background#210f1b
  • peekViewTitle.background#1c0d17
  • progressBar.background#5e2b4e
  • scrollbar.shadow#09040845
  • scrollbarSlider.activeBackground#d9cbd159
  • scrollbarSlider.background#d9cbd11f
  • scrollbarSlider.hoverBackground#d9cbd140
  • selection.background#5e2b4e4d
  • sideBar.background#210f1b
  • sideBar.border#281222
  • sideBar.foreground#d9cbd1
  • sideBarSectionHeader.background#5e2b4e26
  • sideBarSectionHeader.foreground#d9cbd1
  • sideBarTitle.foreground#d9cbd1
  • statusBar.background#381a2f
  • statusBar.border#281222
  • statusBar.debuggingBackground#00b140
  • statusBar.debuggingForeground#f5f1f2
  • statusBar.foreground#9e8095
  • statusBar.noFolderBackground#1c0d17
  • statusBarItem.hoverBackground#5e2b4e4d
  • statusBarItem.remoteBackground#5e2b4e
  • statusBarItem.remoteForeground#f5f1f2
  • tab.activeBackground#180b14
  • tab.activeBorder#5e2b4e
  • tab.activeBorderTop#5e2b4e00
  • tab.activeForeground#d9cbd1
  • tab.border#281222
  • tab.inactiveBackground#1c0d17
  • tab.inactiveForeground#74435b
  • terminal.ansiBlack#180b14
  • terminal.ansiBlue#373c68
  • terminal.ansiBrightBlack#74435b
  • 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#d9cbd1
  • terminal.ansiYellow#efc050
  • terminal.background#1c0d17
  • terminal.foreground#d9cbd1
  • terminalCursor.foreground#5e2b4e
  • textLink.activeForeground#26bd5d
  • textLink.foreground#00b140
  • titleBar.activeBackground#1c0d17
  • titleBar.activeForeground#d9cbd1
  • titleBar.border#281222
  • titleBar.inactiveBackground#1c0d17
  • titleBar.inactiveForeground#74435b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#74435bitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#95738abold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#95738abold
storage.type, storage.modifier#95738abold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#00b140
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#95738a
string.regexp#00b140
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#747da5
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#9c68b9bold
variable.other.constant, variable.other.enummember#9c68b9bold
constant.character.escape#94728a
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#ac6d87italic
entity.name.type.parameter#ac6d87italic
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#d9cbd1
variable.parameter#d9cbd1italic
variable.language, variable.language.this, variable.language.self, variable.language.super#95738aitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#d9cbd1
entity.name.class, entity.name.type.class, support.class#c5ac7dbold italic
entity.other.inherited-class#c5ac7ditalic
entity.name.tag, punctuation.definition.tag#95738abold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#94728a
punctuation, punctuation.separator, punctuation.terminator, meta.brace#74435b
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#ac6d87italic
support.type.property-name.css, support.type.vendored.property-name.css#ac6d87
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#c5ac7dbold
support.constant.property-value.css, support.constant.color.css#9c68b9
keyword.other.unit.css#747da5
support.type.property-name.json#ac6d87
markup.heading, markup.heading entity.name, entity.name.section.markdown#95738abold
markup.bold#9c68b9bold
markup.italic#ac6d87italic
markup.inline.raw, markup.raw#00b140
markup.underline.link#f7cac9
markup.quote#74435bitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050