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#161A26
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#72869F
  • activityBarBadge.background#D65D8A
  • activityBarBadge.foreground#ffffff
  • badge.background#D65D8A
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#D65D8A
  • breadcrumb.background#1C2130
  • breadcrumb.focusForeground#E4D8DC
  • breadcrumb.foreground#72869F
  • breadcrumbPicker.background#1C2130
  • button.background#973D6A
  • button.foreground#ffffff
  • button.hoverBackground#D65D8A
  • button.secondaryBackground#3C4359
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4A556A
  • descriptionForeground#72869F
  • dropdown.background#1C2130
  • dropdown.border#3C4359
  • dropdown.foreground#E4D8DC
  • dropdown.listBackground#1C2130
  • editor.background#1C2130
  • editor.findMatchBackground#D65D8A40
  • editor.findMatchHighlightBackground#D65D8A20
  • editor.foreground#E4D8DC
  • editor.inactiveSelectionBackground#3C435950
  • editor.lineHighlightBackground#282E3A
  • editor.lineHighlightBorder#3C4359
  • editor.selectionBackground#D65D8A40
  • editor.wordHighlightBackground#72869F30
  • editor.wordHighlightStrongBackground#72869F50
  • editorBracketMatch.background#72869F30
  • editorBracketMatch.border#72869F
  • editorCursor.foreground#D65D8A
  • editorGroupHeader.tabsBackground#161A26
  • editorGutter.addedBackground#609070
  • editorGutter.deletedBackground#D65D8A
  • editorGutter.modifiedBackground#72869F
  • editorHoverWidget.background#1C2130
  • editorHoverWidget.border#3C4359
  • editorIndentGuide.activeBackground1#72869F
  • editorIndentGuide.background1#3C4359
  • editorLineNumber.activeForeground#D65D8A
  • editorLineNumber.foreground#506080
  • editorRuler.foreground#3C4359
  • editorSuggestWidget.background#1C2130
  • editorSuggestWidget.foreground#E4D8DC
  • editorSuggestWidget.highlightForeground#D65D8A
  • editorSuggestWidget.selectedBackground#3C4359
  • editorWidget.background#282E3A
  • editorWidget.border#3C4359
  • editorWidget.foreground#E4D8DC
  • errorForeground#D65D8A
  • focusBorder#D65D8A80
  • gitDecoration.addedResourceForeground#609070
  • gitDecoration.conflictingResourceForeground#E070A0
  • gitDecoration.deletedResourceForeground#D65D8A
  • gitDecoration.ignoredResourceForeground#5A6578
  • gitDecoration.modifiedResourceForeground#C09050
  • gitDecoration.untrackedResourceForeground#B06090
  • icon.foreground#E4D8DC
  • input.background#161A26
  • input.border#3C4359
  • input.foreground#E4D8DC
  • input.placeholderForeground#72869F
  • inputOption.activeBackground#973D6A
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#973D6A
  • inputValidation.errorBorder#973D6A
  • inputValidation.warningBackground#B08040
  • inputValidation.warningBorder#B08040
  • list.activeSelectionBackground#973D6A
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusBackground#3C4359
  • list.hoverBackground#282E3A
  • list.inactiveSelectionBackground#3C4359
  • list.inactiveSelectionForeground#B0A8A8
  • minimap.background#1C2130
  • minimap.findMatchHighlight#D65D8A80
  • minimap.selectionHighlight#D65D8A50
  • minimapGutter.addedBackground#609070
  • minimapGutter.deletedBackground#D65D8A
  • minimapGutter.modifiedBackground#C09050
  • notificationCenter.border#3C4359
  • notifications.background#282E3A
  • notifications.border#3C4359
  • notifications.foreground#E4D8DC
  • notificationsErrorIcon.foreground#D65D8A
  • notificationsInfoIcon.foreground#72869F
  • notificationsWarningIcon.foreground#C09050
  • panel.background#161A26
  • panel.border#3C4359
  • panelTitle.activeBorder#D65D8A
  • panelTitle.activeForeground#E4D8DC
  • panelTitle.inactiveForeground#72869F
  • peekView.border#D65D8A
  • peekViewEditor.background#1C2130
  • peekViewEditorGutter.background#282E3A
  • peekViewResult.background#282E3A
  • peekViewResult.fileForeground#E4D8DC
  • peekViewResult.lineForeground#E4D8DC
  • peekViewResult.matchHighlightBackground#D65D8A50
  • peekViewResult.selectionBackground#D65D8A30
  • peekViewResult.selectionForeground#E4D8DC
  • peekViewTitle.background#161A26
  • peekViewTitleDescription.foreground#72869F
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#D65D8A
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#973D6A
  • scrollbarSlider.background#72869F40
  • scrollbarSlider.hoverBackground#72869F60
  • selection.background#D65D8A40
  • sideBar.background#161A26
  • sideBar.foreground#B0A8A8
  • sideBarSectionHeader.background#282E3A
  • sideBarSectionHeader.foreground#E4D8DC
  • sideBarTitle.foreground#D65D8A
  • statusBar.background#973D6A
  • statusBar.debuggingBackground#B04070
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#161A26
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#1C2130
  • tab.activeBorder#D65D8A
  • tab.activeForeground#D65D8A
  • tab.border#282E3A
  • tab.hoverBackground#1C2130
  • tab.hoverForeground#D65D8A
  • tab.inactiveBackground#161A26
  • tab.inactiveForeground#72869F
  • terminal.ansiBlack#1C2130
  • terminal.ansiBlue#72869F
  • terminal.ansiBrightBlack#5A6578
  • terminal.ansiBrightBlue#8FA0C0
  • terminal.ansiBrightCyan#A0B0D0
  • terminal.ansiBrightGreen#70B080
  • terminal.ansiBrightMagenta#D070A0
  • terminal.ansiBrightRed#E070A0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#E0A060
  • terminal.ansiCyan#889AB0
  • terminal.ansiGreen#609070
  • terminal.ansiMagenta#B06090
  • terminal.ansiRed#D65D8A
  • terminal.ansiWhite#E4D8DC
  • terminal.ansiYellow#C09050
  • terminal.background#1C2130
  • terminal.foreground#E4D8DC
  • textLink.activeForeground#E070A0
  • textLink.foreground#D65D8A
  • titleBar.activeBackground#161A26
  • titleBar.activeForeground#E4D8DC
  • titleBar.inactiveBackground#1C2130
  • titleBar.inactiveForeground#72869F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6578italic
comment.block.preprocessor#5A6578
comment.documentation, comment.block.documentation#72869F—
invalid.illegal#ffffff—
keyword.operator#889AB0—
keyword, storage#D65D8A—
storage.type, support.type#8FA0C0—
constant.language, support.constant, variable.language#C06080—
variable, support.variable#E4D8DC—
entity.name.function, support.function#D65D8Abold
entity.name.type, entity.other.inherited-class, support.class#8FA0C0bold
entity.name.exception#D65D8A—
entity.name.section#E4D8DCbold
constant.numeric, constant.character, constant#B09070—
string#80A090—
constant.character.escape#D65D8A—
string.regexp#C06080—
constant.other.symbol#B09070—
punctuation#72869F—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#5A6578—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#72869F—
entity.name.tag#D65D8A—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8FA0C0italic
constant.character.entity, punctuation.definition.entity#B09070—
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#8FA0C0—
meta.property-name, support.type.property-name#D65D8A—
meta.property-value, meta.property-value constant.other, support.constant.property-value#80A090—
keyword.other.important#D65D8Abold
markup.changed#C09050—
markup.deleted#D65D8A—
markup.italic#E4D8DCitalic
markup.error#D65D8A—
markup.inserted#609070—
meta.link#D65D8A—
markup.output, markup.raw#72869F—
markup.prompt#72869F—
markup.heading#D65D8Abold
markup.bold#E4D8DCbold
markup.traceback#D65D8A—
markup.underline—underline
markup.quote#72869Fitalic
markup.list#D65D8A—
markup.bold, markup.italic#E4D8DC—
markup.inline.raw#B09070
meta.diff.range, meta.diff.index, meta.separator#8FA0C0—
meta.diff.header.from-file#D65D8A—
meta.diff.header.to-file#609070—