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#1a1821
  • activityBar.foreground#e8c547
  • activityBarBadge.background#e8c547
  • activityBarBadge.foreground#1a1821
  • badge.background#2a2636
  • badge.foreground#e8c547
  • breadcrumb.background#1a1821
  • breadcrumb.foreground#9ca3af
  • button.background#e8c547
  • button.foreground#1a1821
  • button.hoverBackground#d4b23f
  • checkbox.background#2a2636
  • checkbox.border#4a4556
  • checkbox.foreground#e8c547
  • debugConsole.errorForeground#f28b82
  • debugConsole.infoForeground#8ab4f8
  • debugConsole.sourceForeground#9ca3af
  • debugConsole.warningForeground#e8c547
  • debugIcon.breakpointCurrentStackframeForeground#e8c547
  • debugIcon.breakpointForeground#f28b82
  • debugIcon.breakpointStackframeForeground#8ab4f8
  • debugIcon.continueForeground#8ab4f8
  • debugIcon.disconnectForeground#9ca3af
  • debugIcon.pauseForeground#e8c547
  • debugIcon.restartForeground#81c995
  • debugIcon.stepBackForeground#8ab4f8
  • debugIcon.stepIntoForeground#8ab4f8
  • debugIcon.stepOutForeground#8ab4f8
  • debugIcon.stepOverForeground#8ab4f8
  • debugIcon.stopForeground#f28b82
  • debugToolBar.background#252331
  • diffEditor.border#4a4556
  • diffEditor.insertedLineBackground#2ea04322
  • diffEditor.insertedTextBackground#2ea04333
  • diffEditor.removedLineBackground#da363322
  • diffEditor.removedTextBackground#da363333
  • dropdown.background#2a2636
  • dropdown.border#4a4556
  • dropdown.foreground#e5e7eb
  • dropdown.listBackground#252331
  • editor.background#1a1821
  • editor.findMatchBackground#e8c54733
  • editor.findMatchHighlightBackground#e8c54722
  • editor.foreground#e5e7eb
  • editor.inactiveSelectionBackground#e8c54722
  • editor.lineHighlightBackground#2a2636
  • editor.selectionBackground#e8c54744
  • editor.selectionHighlightBackground#e8c54722
  • editor.wordHighlightBackground#e8c54722
  • editor.wordHighlightStrongBackground#e8c54733
  • editorBracketMatch.background#e8c54733
  • editorBracketMatch.border#e8c547
  • editorCursor.foreground#e8c547
  • editorGutter.addedBackground#81c995
  • editorGutter.background#1a1821
  • editorGutter.deletedBackground#f28b82
  • editorGutter.modifiedBackground#8ab4f8
  • editorIndentGuide.activeBackground#4a4556
  • editorIndentGuide.background#2d2a3a
  • editorLineNumber.activeForeground#e8c547
  • editorLineNumber.foreground#6b7280
  • editorOverviewRuler.border#1a1821
  • editorRuler.foreground#2d2a3a
  • editorSuggestWidget.background#252331
  • editorSuggestWidget.border#4a4556
  • editorSuggestWidget.foreground#e5e7eb
  • editorSuggestWidget.highlightForeground#e8c547
  • editorSuggestWidget.selectedBackground#2a2636
  • editorWidget.background#252331
  • editorWidget.border#4a4556
  • extensionButton.prominentBackground#e8c547
  • extensionButton.prominentForeground#1a1821
  • extensionButton.prominentHoverBackground#d4b23f
  • focusBorder#e8c547
  • foreground#e5e7eb
  • gitDecoration.addedResourceForeground#81c995
  • gitDecoration.conflictingResourceForeground#f28b82
  • gitDecoration.deletedResourceForeground#f28b82
  • gitDecoration.ignoredResourceForeground#6b7280
  • gitDecoration.modifiedResourceForeground#8ab4f8
  • gitDecoration.renamedResourceForeground#8ab4f8
  • gitDecoration.untrackedResourceForeground#81c995
  • icon.foreground#e5e7eb
  • input.background#2a2636
  • input.border#4a4556
  • input.foreground#e5e7eb
  • input.placeholderForeground#6b7280
  • inputValidation.errorBackground#da363333
  • inputValidation.errorBorder#f28b82
  • inputValidation.infoBackground#8ab4f822
  • inputValidation.infoBorder#8ab4f8
  • inputValidation.warningBackground#e8c54722
  • inputValidation.warningBorder#e8c547
  • list.activeSelectionBackground#2a2636
  • list.activeSelectionForeground#e8c547
  • list.errorForeground#f28b82
  • list.focusBackground#2a2636
  • list.focusForeground#e5e7eb
  • list.hoverBackground#2d2a3a
  • list.hoverForeground#e5e7eb
  • list.inactiveSelectionBackground#252331
  • list.inactiveSelectionForeground#e5e7eb
  • list.warningForeground#e8c547
  • menu.background#252331
  • menu.foreground#e5e7eb
  • menu.selectionBackground#2a2636
  • menu.selectionForeground#e8c547
  • menubar.selectionBackground#2a2636
  • menubar.selectionForeground#e8c547
  • minimap.background#1a1821
  • minimap.selectionHighlight#e8c54744
  • minimapSlider.activeBackground#e8c54733
  • minimapSlider.background#e8c54711
  • minimapSlider.hoverBackground#e8c54722
  • notebook.cellBorderColor#4a4556
  • notebook.cellEditorBackground#1a1821
  • notebook.cellInsertionIndicator#e8c547
  • notebook.cellSelectionBackground#e8c54722
  • notebook.focusedCellBorder#e8c547
  • notebook.inactiveFocusedCellBorder#4a4556
  • notebook.outputContainerBackgroundColor#1a1821
  • notebook.outputContainerBorderColor#4a4556
  • notificationCenter.border#4a4556
  • notificationCenterHeader.background#252331
  • notificationCenterHeader.foreground#e5e7eb
  • notifications.background#252331
  • notifications.foreground#e5e7eb
  • notificationsErrorIcon.foreground#f28b82
  • notificationsInfoIcon.foreground#8ab4f8
  • notificationsWarningIcon.foreground#e8c547
  • notificationToast.border#4a4556
  • panel.background#1a1821
  • panel.border#4a4556
  • panelTitle.activeBorder#e8c547
  • panelTitle.activeForeground#e8c547
  • panelTitle.inactiveForeground#9ca3af
  • peekView.border#e8c547
  • peekViewEditor.background#1a1821
  • peekViewEditor.matchHighlightBackground#e8c54733
  • peekViewResult.background#1a1821
  • peekViewResult.matchHighlightBackground#e8c547
  • peekViewResult.selectionBackground#2a2636
  • peekViewTitle.background#252331
  • peekViewTitleDescription.foreground#9ca3af
  • peekViewTitleLabel.foreground#e5e7eb
  • pickerGroup.border#4a4556
  • pickerGroup.foreground#e8c547
  • progressBar.background#e8c547
  • quickInput.background#252331
  • quickInput.foreground#e5e7eb
  • quickInputList.focusBackground#2a2636
  • quickInputList.focusForeground#e8c547
  • scm.background#1a1821
  • scm.providerHeaderBorder#4a4556
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#4a455677
  • scrollbarSlider.background#4a455633
  • scrollbarSlider.hoverBackground#4a455655
  • searchEditor.findMatchBackground#e8c54733
  • sideBar.background#1a1821
  • sideBar.foreground#e5e7eb
  • sideBarSectionHeader.background#1a1821
  • sideBarSectionHeader.foreground#e5e7eb
  • sideBarTitle.foreground#e5e7eb
  • statusBar.background#252331
  • statusBar.debuggingBackground#e8c547
  • statusBar.debuggingForeground#1a1821
  • statusBar.foreground#9ca3af
  • statusBar.noFolderBackground#252331
  • statusBar.noFolderForeground#9ca3af
  • statusBarItem.activeBackground#4a4556
  • statusBarItem.hoverBackground#2d2a3a
  • statusBarItem.prominentBackground#252331
  • statusBarItem.prominentHoverBackground#2d2a3a
  • symbolIcon.classForeground#81c995
  • symbolIcon.colorForeground#8ab4f8
  • symbolIcon.constantForeground#8ab4f8
  • symbolIcon.enumeratorForeground#e8c547
  • symbolIcon.eventForeground#f28b82
  • symbolIcon.fieldForeground#e5e7eb
  • symbolIcon.fileForeground#e5e7eb
  • symbolIcon.functionForeground#c9b1ff
  • symbolIcon.interfaceForeground#8ab4f8
  • symbolIcon.keywordForeground#f28b82
  • symbolIcon.methodForeground#c9b1ff
  • symbolIcon.moduleForeground#e5e7eb
  • symbolIcon.namespaceForeground#e5e7eb
  • symbolIcon.nullForeground#f28b82
  • symbolIcon.numberForeground#8ab4f8
  • symbolIcon.objectForeground#f0b866
  • symbolIcon.operatorForeground#e5e7eb
  • symbolIcon.packageForeground#e5e7eb
  • symbolIcon.propertyForeground#e5e7eb
  • symbolIcon.referenceForeground#e5e7eb
  • symbolIcon.snippetForeground#e5e7eb
  • symbolIcon.stringForeground#81c995
  • symbolIcon.structForeground#f0b866
  • symbolIcon.textForeground#e5e7eb
  • symbolIcon.typeParameterForeground#f0b866
  • symbolIcon.unitForeground#8ab4f8
  • symbolIcon.variableForeground#e5e7eb
  • tab.activeBackground#1a1821
  • tab.activeBackgroundCenter#1a1821
  • tab.activeForeground#e8c547
  • tab.border#1a1821
  • tab.hoverBackground#2a2636
  • tab.hoverForeground#e5e7eb
  • tab.inactiveBackground#1a1821
  • tab.inactiveForeground#9ca3af
  • tab.lastPinnedBorder#4a4556
  • tab.unfocusedActiveBackground#1a1821
  • tab.unfocusedActiveForeground#9ca3af
  • tab.unfocusedHoverBackground#2a2636
  • tab.unfocusedHoverForeground#e5e7eb
  • terminal.ansiBlack#1a1821
  • terminal.ansiBlue#8ab4f8
  • terminal.ansiBrightBlack#6b7280
  • terminal.ansiBrightBlue#a6c8ff
  • terminal.ansiBrightCyan#a5d6e8
  • terminal.ansiBrightGreen#a5d6a7
  • terminal.ansiBrightMagenta#d4c1f8
  • terminal.ansiBrightOrange#f0b866
  • terminal.ansiBrightRed#ff9b9b
  • terminal.ansiBrightWhite#f5f5f5
  • terminal.ansiBrightYellow#e8c547
  • terminal.ansiCyan#8ab4f8
  • terminal.ansiGreen#81c995
  • terminal.ansiMagenta#c9b1ff
  • terminal.ansiRed#f28b82
  • terminal.ansiWhite#e5e7eb
  • terminal.ansiYellow#e8c547
  • terminal.background#1a1821
  • terminal.foreground#e5e7eb
  • terminalCursor.background#1a1821
  • terminalCursor.foreground#e8c547
  • textBlockQuote.background#2a2636
  • textBlockQuote.border#e8c547
  • textCodeBlock.background#2a2636
  • textLink.activeForeground#e8c547
  • textLink.foreground#8ab4f8
  • textPreformat.foreground#e5e7eb
  • textSeparator.foreground#4a4556
  • titleBar.activeBackground#1a1821
  • titleBar.activeForeground#e5e7eb
  • titleBar.border#4a4556
  • titleBar.inactiveBackground#1a1821
  • titleBar.inactiveForeground#6b7280
  • tree.indentGuidesStroke#2d2a3a
  • tree.tableColumnsBorder#4a4556
  • tree.tableOddRowsBackground#1a1821
  • widget.background#252331
  • widget.border#4a4556
  • window.activeBorder#4a4556
  • window.inactiveBorder#1a1821

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6b7280italic
constant, constant.character, constant.language, constant.numeric, constant.other#8ab4f8
entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.namespace, entity.name.tag, entity.name.type#e8c547
invalid, invalid.illegal, invalid.deprecated#f28b82
keyword, keyword.control, keyword.operator, keyword.other#f28b82
markup, markup.bold, markup.heading, markup.italic, markup.list, markup.quote, markup.raw, markup.underline#e5e7eb
meta, meta.block, meta.function, meta.function-call, meta.property-name, meta.return-type, meta.selector#e5e7eb
storage, storage.type#f28b82
string, string.html, string.markdown, string.quoted, string.unquoted#81c995
support, support.class, support.constant, support.function, support.type#8ab4f8
variable#e5e7eb
variable.other#e5e7eb
variable.parameter#f0b866
entity.name.function, entity.name.type#e8c547
constant.numeric, constant.language#8ab4f8
string#81c995
keyword, storage.type, punctuation#f28b82
entity.name.decorator#c9b1ff
entity.name.tag#e8c547
entity.other.attribute-name#8ab4f8