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#171c28
  • activityBar.border#ffffff0e
  • activityBar.foreground#abb2bf
  • activityBar.inactiveForeground#3a4558
  • activityBarBadge.background#e06c8a
  • activityBarBadge.foreground#ffffff
  • badge.background#e06c8a
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#c678dd
  • breadcrumb.focusForeground#abb2bf
  • breadcrumb.foreground#3a4558
  • breadcrumbPicker.background#171c28
  • button.background#9b46b0
  • button.foreground#ffffff
  • button.hoverBackground#c678dd
  • button.secondaryBackground#2a3040
  • button.secondaryForeground#abb2bf
  • charts.blue#61afef
  • charts.green#4ec994
  • charts.orange#e06c8a
  • charts.purple#c678dd
  • charts.red#f47067
  • charts.yellow#e5c07b
  • checkbox.background#171c28
  • checkbox.border#2a3040
  • checkbox.foreground#c678dd
  • debugExceptionWidget.background#171c28
  • debugExceptionWidget.border#f47067
  • debugIcon.breakpointCurrentStackframeForeground#e5c07b
  • debugIcon.breakpointForeground#f47067
  • debugIcon.pauseForeground#e5c07b
  • debugIcon.startForeground#4ec994
  • debugIcon.stopForeground#f47067
  • debugToolBar.background#171c28
  • descriptionForeground#6b7a90
  • diffEditor.insertedTextBackground#4ec99418
  • diffEditor.removedTextBackground#f4706718
  • dropdown.background#171c28
  • dropdown.border#2a3040
  • dropdown.foreground#abb2bf
  • editor.background#1e2433
  • editor.findMatchBackground#e5c07b40
  • editor.findMatchHighlightBackground#e5c07b25
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#232c3c
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#c678dd15
  • editor.selectionBackground#2a3850
  • editor.selectionHighlightBackground#2a385088
  • editor.wordHighlightBackground#2e3a4e
  • editor.wordHighlightStrongBackground#3a4860
  • editorBracketMatch.background#c678dd22
  • editorBracketMatch.border#c678dd88
  • editorCodeLens.foreground#4b5a6a
  • editorCursor.background#1e2433
  • editorCursor.foreground#c678dd
  • editorError.foreground#f47067
  • editorGroupHeader.tabsBackground#171c28
  • editorGroupHeader.tabsBorder#ffffff0e
  • editorGutter.addedBackground#4ec994
  • editorGutter.background#1e2433
  • editorGutter.deletedBackground#f47067
  • editorGutter.modifiedBackground#e5c07b
  • editorHint.foreground#56b6c2
  • editorHoverWidget.background#171c28
  • editorHoverWidget.border#2a3040
  • editorIndentGuide.activeBackground#3a4558
  • editorIndentGuide.background#252e40
  • editorInfo.foreground#61afef
  • editorLineNumber.activeForeground#6b7a90
  • editorLineNumber.foreground#2e3d4a
  • editorOverviewRuler.addedForeground#4ec994
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#f47067
  • editorOverviewRuler.errorForeground#f47067
  • editorOverviewRuler.findMatchForeground#e5c07b
  • editorOverviewRuler.modifiedForeground#e5c07b
  • editorOverviewRuler.warningForeground#e5c07b
  • editorSuggestWidget.background#171c28
  • editorSuggestWidget.border#2a3040
  • editorSuggestWidget.foreground#abb2bf
  • editorSuggestWidget.highlightForeground#c678dd
  • editorSuggestWidget.selectedBackground#2a3850
  • editorWarning.foreground#e5c07b
  • editorWhitespace.foreground#2e3d4a
  • editorWidget.background#171c28
  • editorWidget.border#2a3040
  • errorForeground#f47067
  • focusBorder#c678dd88
  • foreground#abb2bf
  • gitDecoration.addedResourceForeground#4ec994
  • gitDecoration.conflictingResourceForeground#e06c8a
  • gitDecoration.deletedResourceForeground#f47067
  • gitDecoration.ignoredResourceForeground#3a4558
  • gitDecoration.modifiedResourceForeground#e5c07b
  • gitDecoration.untrackedResourceForeground#98c379
  • icon.foreground#6b7a90
  • input.background#111520
  • input.border#2a3040
  • input.foreground#abb2bf
  • input.placeholderForeground#3a4558
  • inputOption.activeBackground#c678dd33
  • inputOption.activeBorder#c678dd88
  • inputOption.activeForeground#c678dd
  • inputValidation.errorBackground#f4706720
  • inputValidation.errorBorder#f47067
  • inputValidation.warningBackground#e5c07b20
  • inputValidation.warningBorder#e5c07b
  • list.activeSelectionBackground#2a3850
  • list.activeSelectionForeground#ced4df
  • list.errorForeground#f47067
  • list.focusBackground#2a3850
  • list.highlightForeground#c678dd
  • list.hoverBackground#232b3a
  • list.hoverForeground#abb2bf
  • list.inactiveSelectionBackground#232b3a
  • list.inactiveSelectionForeground#abb2bf
  • list.warningForeground#e5c07b
  • menu.background#171c28
  • menu.foreground#abb2bf
  • menu.selectionBackground#2a3850
  • menu.separatorBackground#2a3040
  • menubar.selectionBackground#232b3a
  • menubar.selectionForeground#ced4df
  • notifications.background#171c28
  • notifications.border#2a3040
  • notifications.foreground#abb2bf
  • notificationsErrorIcon.foreground#f47067
  • notificationsInfoIcon.foreground#61afef
  • notificationsWarningIcon.foreground#e5c07b
  • notificationToast.border#c678dd44
  • panel.background#111520
  • panel.border#ffffff0e
  • panelTitle.activeBorder#c678dd
  • panelTitle.activeForeground#ced4df
  • panelTitle.inactiveForeground#3a4558
  • peekView.border#c678dd
  • peekViewEditor.background#1e2433
  • peekViewEditor.matchHighlightBackground#c678dd30
  • peekViewResult.background#171c28
  • peekViewResult.matchHighlightBackground#c678dd30
  • peekViewResult.selectionBackground#2a3850
  • peekViewTitle.background#171c28
  • peekViewTitleDescription.foreground#6b7a90
  • peekViewTitleLabel.foreground#ced4df
  • progressBar.background#c678dd
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#c678dd55
  • scrollbarSlider.background#2e3d4a88
  • scrollbarSlider.hoverBackground#3a4f60aa
  • selection.background#c678dd44
  • settings.checkboxBackground#171c28
  • settings.checkboxBorder#2a3040
  • settings.dropdownBackground#171c28
  • settings.dropdownBorder#2a3040
  • settings.headerForeground#ced4df
  • settings.modifiedItemIndicator#c678dd
  • settings.numberInputBackground#111520
  • settings.numberInputBorder#2a3040
  • settings.textInputBackground#111520
  • settings.textInputBorder#2a3040
  • sideBar.background#171c28
  • sideBar.border#ffffff0e
  • sideBar.foreground#6b7a90
  • sideBarSectionHeader.background#171c28
  • sideBarSectionHeader.border#ffffff0e
  • sideBarSectionHeader.foreground#3a4558
  • sideBarTitle.foreground#3a4558
  • statusBar.background#4a2060
  • statusBar.border#00000000
  • statusBar.debuggingBackground#7a2e30
  • statusBar.foreground#ffffffcc
  • statusBar.noFolderBackground#171c28
  • statusBarItem.activeBackground#ffffff30
  • statusBarItem.errorBackground#f47067cc
  • statusBarItem.hoverBackground#ffffff22
  • statusBarItem.warningBackground#e5c07bcc
  • tab.activeBackground#1e2433
  • tab.activeBorder#00000000
  • tab.activeBorderTop#c678dd
  • tab.activeForeground#ced4df
  • tab.border#ffffff0e
  • tab.hoverBackground#232b3a
  • tab.inactiveBackground#171c28
  • tab.inactiveForeground#3a4558
  • tab.unfocusedActiveForeground#6b7a90
  • tab.unfocusedInactiveForeground#3a4558
  • terminal.ansiBlack#1e2433
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#4b5a6a
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#e06c8a
  • terminal.ansiBrightRed#f47067
  • terminal.ansiBrightWhite#ced4df
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#4ec994
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#f47067
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#e5c07b
  • terminal.background#111520
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#2a3850
  • terminalCursor.foreground#c678dd
  • textBlockQuote.background#171c28
  • textBlockQuote.border#c678dd
  • textCodeBlock.background#171c28
  • textLink.activeForeground#c678dd
  • textLink.foreground#61afef
  • textPreformat.foreground#98c379
  • titleBar.activeBackground#111520
  • titleBar.activeForeground#6b7a90
  • titleBar.border#ffffff0e
  • titleBar.inactiveBackground#111520
  • titleBar.inactiveForeground#3a4558

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4b5a6aitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.other.using, storage.type, storage.modifier#c678dditalic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#c678dditalic
string, string.quoted, string.template, string.regexp#98c379
constant.character.escape, constant.other.placeholder#56b6c2
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#f47067
constant.language.boolean, constant.language.null, constant.language.undefined, constant.language#f47067
entity.name.function, meta.function-call entity.name.function, support.function#61afef
meta.function-call#61afef
entity.name.class, entity.name.type, entity.name.interface, entity.name.enum, entity.name.namespace, support.class, support.type#e5c07b
meta.type.annotation, meta.type.parameters, entity.name.type.alias#e5c07b
variable, variable.other, variable.other.readwrite#abb2bf
variable.other.constant, constant.other#f47067
variable.other.property, meta.object-literal.key, support.type.property-name#abb2bf
variable.parameter#abb2bf
keyword.operator, punctuation.separator, punctuation.accessor#56b6c2
punctuation, meta.brace, punctuation.definition#56b6c2
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e06c8a
entity.other.attribute-name, meta.tag.attributes#e5c07bitalic
punctuation.section.embedded, meta.embedded.expression#56b6c2
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e06c8a
support.type.property-name.css, meta.property-name.css#61afef
support.constant.property-value.css, meta.property-value.css#98c379
constant.numeric.css, keyword.other.unit.css#f47067
constant.other.color.rgb-value.css, constant.other.color.css#f47067
support.type.property-name.json#e06c8a
string.quoted.double.json#98c379
markup.heading, entity.name.section.markdown#c678ddbold
markup.bold#e5c07bbold
markup.italic#abb2bfitalic
markup.inline.raw, markup.fenced_code#98c379
markup.underline.link, string.other.link.title.markdown#61afef
invalid, invalid.deprecated#f47067strikethrough
meta.decorator, punctuation.decorator#e06c8aitalic
variable.language.this, variable.language.self#e06c8aitalic
variable.language.super#c678dditalic
MonoNight Pro by Abhishek Sankpal - VS Code Theme