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#1C1E26
  • activityBar.dropBackground#6C6F9366
  • activityBar.foreground#D5D8DACC
  • activityBarBadge.background#E95378
  • activityBarBadge.foreground#16161C
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#232530
  • dropdown.listBackground#2E303E
  • editor.background#1A1D24
  • editor.findMatchBackground#6C6F9399
  • editor.findMatchHighlightBackground#6C6F9333
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.foreground#FEE6C0
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E33
  • editor.rangeHighlightBackground#2E303E99
  • editor.selectionBackground#2E303EB3
  • editor.selectionHighlightBackground#6C6F9359
  • editor.wordHighlightBackground#6C6F9373
  • editor.wordHighlightStrongBackground#6C6F9373
  • editorBracketMatch.background#6C6F9366
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9399
  • editorCursor.background#1C1E26
  • editorCursor.foreground#E95378
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#1C1E26
  • editorGutter.addedBackground#09F7A0A6
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E99
  • editorLineNumber.activeForeground#D5D8DA73
  • editorLineNumber.foreground#D5D8DA1F
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA66
  • editorOverviewRuler.deletedForeground#F43E5C99
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC299
  • editorOverviewRuler.warningForeground#27D79773
  • editorRuler.foreground#6C6F9333
  • editorSuggestWidget.highlightForeground#E95378
  • editorWarning.foreground#27D797CC
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E95378
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#1A1C23
  • foreground#FEE6C0
  • gitDecoration.addedResourceForeground#27D797CC
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#FAC39A
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#2E303E
  • inputOption.activeBorder#E9436D99
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#6C6F9366
  • list.errorForeground#F43E5CE6
  • list.focusBackground#2E303E99
  • list.focusForeground#D5D8DA
  • list.highlightForeground#E95378
  • list.hoverBackground#2E303E99
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E99
  • list.inactiveSelectionBackground#2E303E33
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#27D797BF
  • panelTitle.activeBorder#E95378
  • peekView.border#1A1C23
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9399
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9399
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • pickerGroup.foreground#E95378E6
  • progressBar.background#E95378
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9373
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • sideBar.background#1C1E26
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA99
  • sideBarSectionHeader.background#1C1E26
  • sideBarSectionHeader.foreground#D5D8DACC
  • statusBar.background#1C1E26
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#1C1E26
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBorder#E95378
  • tab.border#1C1E2600
  • tab.inactiveBackground#1C1E26
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9399
  • textLink.activeForeground#E9436D
  • textLink.foreground#E95378
  • titleBar.activeBackground#1C1E26
  • titleBar.inactiveBackground#1C1E26
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#81899Bitalic
comment.block.preprocessor#81899B
comment.documentation, comment.block.documentation#606B84
invalid.illegal#660000
keyword.operator#E84279
keyword, storage#E84279
storage.type, support.type#E84279
constant.language, support.constant, variable.language#E84279
variable, support.variable#FEE6C0
variable.parameter#EFBB35
entity.name.function, support.function#FEE6C0bold
entity.name.type, entity.other.inherited-class, support.class, source.go#EFBB35bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#EFBB35
string#F59BAC
constant.character.escape#F59BAC
string.regexp#F59BAC
constant.other.symbol#F59BAC
punctuation#F59BAC
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#81899B
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#F59BAC
entity.name.tag#F59BAC
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#F59BACitalic
constant.character.entity, punctuation.definition.entity#FEE6C0
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector.css#E84279
meta.property-name, support.type.property-name#FEE6C0
meta.property-value, meta.property-value constant.other, support.constant.property-value#EFBB35
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
Alligator by alligator-vscode-color-theme - VS Code Theme