Skip to main content
Coding Theme

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#00E59D
  • activityBar.background#000000
  • activityBar.foreground#00E59D
  • activityBar.inactiveForeground#E9EBEB
  • activityBarBadge.background#00E59D
  • activityBarBadge.foreground#000000
  • badge.background#00E59D
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#E9EBEB
  • breadcrumb.background#1D1F1F
  • breadcrumb.focusForeground#E9EBEB
  • breadcrumb.foreground#E9EBEB
  • breadcrumbPicker.background#000000
  • button.background#3A3E3E
  • button.foreground#E9EBEB
  • button.secondaryBackground#1D1F1F
  • button.secondaryForeground#E9EBEB
  • button.secondaryHoverBackground#000000
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#80d39420
  • diffEditor.removedTextBackground#FF6E6E50
  • dropdown.background#1D1F1F
  • dropdown.border#3A3E3E
  • dropdown.foreground#E9EBEB
  • editor.background#1D1F1F
  • editor.findMatchBackground#eeb37580
  • editor.findMatchHighlightBackground#E9EBEB40
  • editor.findRangeHighlightBackground#3A3E3E
  • editor.foldBackground#0E0F0F80
  • editor.foreground#E9EBEB
  • editor.GREYBorder#3A3E3E
  • editor.hoverHighlightBackground#78bae050
  • editor.rangeHighlightBackground#be9af015
  • editor.selectionBackground#3A3E3E90
  • editor.selectionHighlightBackground#00E59D40
  • editor.snippetFinalTabstopHighlightBackground#1D1F1F
  • editor.snippetFinalTabstopHighlightBorder#80d394
  • editor.snippetTabstopHighlightBackground#1D1F1F
  • editor.snippetTabstopHighlightBorder#3A3E3E
  • editor.wordHighlightBackground#78bae050
  • editor.wordHighlightStrongBackground#80d39450
  • editorBracketHighlight.unexpectedBracket.foreground#FF7352
  • editorCodeLens.foreground#E9EBEB
  • editorCursor.foreground#00E59D
  • editorError.foreground#FF7352
  • editorGroup.border#3A3E3E
  • editorGroup.dropBackground#909B9B30
  • editorGroupHeader.tabsBackground#0E0F0F
  • editorGutter.addedBackground#80d39480
  • editorGutter.deletedBackground#FF6E6E80
  • editorGutter.modifiedBackground#78bae080
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#3A3E3E
  • editorIndentGuide.activeBackground#E9EBEB45
  • editorIndentGuide.background#3A3E3E
  • editorLineNumber.activeForeground#00E59D
  • editorLineNumber.foreground#909B9B
  • editorLink.activeForeground#78bae0
  • editorMarkerNavigation.background#0E0F0F
  • editorOverviewRuler.addedForeground#80d39480
  • editorOverviewRuler.border#0E0F0F
  • editorOverviewRuler.currentContentForeground#80d394
  • editorOverviewRuler.deletedForeground#FF6E6E80
  • editorOverviewRuler.errorForeground#FF735280
  • editorOverviewRuler.incomingContentForeground#be9af0
  • editorOverviewRuler.infoForeground#4DD3F280
  • editorOverviewRuler.modifiedForeground#78bae080
  • editorOverviewRuler.selectionHighlightForeground#eeb375
  • editorOverviewRuler.warningForeground#FFE34D80
  • editorOverviewRuler.wordHighlightForeground#78bae0
  • editorOverviewRuler.wordHighlightStrongForeground#80d394
  • editorRuler.foreground#3A3E3E
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.foreground#909B9B
  • editorSuggestWidget.highlightForeground#E9EBEB
  • editorSuggestWidget.selectedBackground#3A3E3E
  • editorWarning.foreground#FFE34D
  • editorWhitespace.foreground#3A3E3E
  • editorWidget.background#000000
  • editorWidget.resizeBorder#00E59D
  • errorForeground#FF7352
  • extensionButton.prominentBackground#80d39490
  • extensionButton.prominentForeground#E9EBEB
  • extensionButton.prominentHoverBackground#80d39460
  • focusBorder#00E59D
  • foreground#E9EBEB
  • gitDecoration.conflictingResourceForeground#eeb375
  • gitDecoration.deletedResourceForeground#FF6E6E
  • gitDecoration.ignoredResourceForeground#E9EBEB80
  • gitDecoration.modifiedResourceForeground#78bae0
  • gitDecoration.untrackedResourceForeground#80d394
  • input.background#00000000
  • input.border#3A3E3E
  • input.foreground#E9EBEB
  • input.placeholderForeground#909B9B
  • inputOption.activeBorder#00E59D
  • inputValidation.errorBorder#FF7352
  • inputValidation.infoBorder#4DD3F2
  • inputValidation.warningBorder#FFE34D
  • list.activeSelectionBackground#3A3E3E
  • list.activeSelectionForeground#E9EBEB
  • list.dropBackground#3A3E3E
  • list.errorForeground#FF7352
  • list.focusBackground#3A3E3E
  • list.highlightForeground#78bae0
  • list.hoverBackground#1D1F1F
  • list.inactiveSelectionBackground#3A3E3E
  • list.inactiveSelectionForeground#E9EBEB
  • list.warningForeground#FFE34D
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#FF6E6E
  • listFilterWidget.outline#00E59D
  • menu.background#000000
  • menu.foreground#E9EBEB
  • menu.selectionBackground#3A3E3E
  • menubar.selectionBackground#3A3E3E
  • merge.currentHeaderBackground#80d39490
  • merge.incomingHeaderBackground#be9af090
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#E9EBEB
  • notifications.background#1D1F1F
  • notifications.border#3A3E3E
  • notifications.buttonBackground#3A3E3E
  • notifications.buttonForeground#E9EBEB
  • notifications.foreground#909B9B
  • notificationsErrorIcon.foreground#FF7352
  • notificationsInfoIcon.foreground#4DD3F2
  • notificationsWarningIcon.foreground#FFE34D
  • notificationToast.border#3A3E3E
  • panel.background#1D1F1F
  • panel.border#3A3E3E
  • panelTitle.activeBorder#00E59D
  • panelTitle.activeForeground#E9EBEB
  • panelTitle.inactiveForeground#909B9B
  • peekView.border#3A3E3E
  • peekViewEditor.background#1D1F1F
  • peekViewEditor.matchHighlightBackground#e2eb8680
  • peekViewResult.background#0E0F0F
  • peekViewResult.fileForeground#E9EBEB
  • peekViewResult.lineForeground#E9EBEB
  • peekViewResult.matchHighlightBackground#e2eb8680
  • peekViewResult.selectionBackground#3A3E3E
  • peekViewResult.selectionForeground#E9EBEB
  • peekViewTitle.background#0E0F0F
  • peekViewTitleDescription.foreground#909B9B
  • peekViewTitleLabel.foreground#E9EBEB
  • pickerGroup.border#00E59D
  • pickerGroup.foreground#00E59D
  • progressBar.background#00E59D
  • scrollbar.shadow#0E0F0F
  • selection.background#909B9B90
  • settings.checkboxBackground#1D1F1F
  • settings.checkboxBorder#3A3E3E
  • settings.checkboxForeground#E9EBEB
  • settings.dropdownBackground#1D1F1F
  • settings.dropdownBorder#3A3E3E
  • settings.dropdownForeground#E9EBEB
  • settings.headerForeground#E9EBEB
  • settings.modifiedItemIndicator#eeb375
  • settings.numberInputBackground#1D1F1F
  • settings.numberInputBorder#3A3E3E
  • settings.numberInputForeground#E9EBEB
  • settings.textInputBackground#1D1F1F
  • settings.textInputBorder#3A3E3E
  • settings.textInputForeground#E9EBEB
  • sideBar.background#0E0F0F
  • sideBar.foreground#909B9B
  • sideBarSectionHeader.background#1D1F1F
  • sideBarSectionHeader.border#3A3E3E
  • sideBarSectionHeader.foreground#E9EBEB
  • sideBarTitle.foreground#E9EBEB
  • statusBar.background#0E0F0F
  • statusBar.debuggingBackground#FF6E6E
  • statusBar.debuggingForeground#0E0F0F
  • statusBar.foreground#E9EBEB
  • statusBar.noFolderBackground#0E0F0F
  • statusBar.noFolderBorder#00E59D
  • statusBar.noFolderForeground#E9EBEB
  • statusBarItem.prominentBackground#FF6E6E
  • statusBarItem.prominentHoverBackground#eeb375
  • statusBarItem.remoteBackground#be9af0
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#1D1F1F
  • tab.activeBorderTop#00E59D80
  • tab.activeForeground#E9EBEB
  • tab.border#0E0F0F
  • tab.inactiveBackground#0E0F0F
  • tab.inactiveForeground#909B9B
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#be9af0
  • terminal.ansiBrightBlack#0E0F0F
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#00E59D
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightWhite#E9EBEB
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#78bae0
  • terminal.ansiGreen#80d394
  • terminal.ansiMagenta#e289bc
  • terminal.ansiRed#FF6E6E
  • terminal.ansiWhite#909B9B
  • terminal.ansiYellow#e2eb86
  • terminal.background#000000
  • terminal.border#0E0F0F
  • terminal.foreground#E9EBEB
  • textLink.activeForeground#00E59D
  • textLink.foreground#00E59D
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#E9EBEB
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#909B9B
  • walkThrough.embeddedEditorBackground#0E0F0F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d6d6d6
comment#6272a4
string#eeb375
constant.numeric#be9af0
constant.language#be9af0
constant.character, constant.other#be9af0
variable
variable.other.readwrite.instance#e2eb86
constant.character.escaped, constant.character.escape, string source, string source.ruby#e289bc
keyword#e289bc
storage#e289bc
storage.type#78bae0italic
entity.name.class#80d394underline
entity.other.inherited-class#80d394italic underline
entity.name.function#80d394
variable.parameter#e2eb86italic
entity.name.tag#e289bc
entity.other.attribute-name#80d394
support.function#78bae0
support.constant#6be5fd
support.type, support.class#66d9ef italic
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#6272a4
markup.deleted#e289bc
markup.inserted#80d394
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#be9af0
entity.name.filename#E6DB74
message.error#F83333
punctuation.definition.string.begin.json - meta.structure.dictionary.value.json, punctuation.definition.string.end.json - meta.structure.dictionary.value.json#EEEEEE
meta.structure.dictionary.json string.quoted.double.json#78bae0
meta.structure.dictionary.value.json string.quoted.double.json#eeb375
meta meta meta meta meta meta meta.structure.dictionary.value string#80d394
meta meta meta meta meta meta.structure.dictionary.value string#e2eb86
meta meta meta meta meta.structure.dictionary.value string#e289bc
meta meta meta meta.structure.dictionary.value string#be9af0
meta meta meta.structure.dictionary.value string#80d394
meta meta.structure.dictionary.value string#e2eb86
Mitchell's Midnight by commitchell - VS Code Theme