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.activeBackground#262626
  • activityBar.activeBorder#FFA500
  • activityBar.activeFocusBorder#FFA500
  • activityBar.background#1A1A1A
  • activityBar.border#262626
  • activityBar.dropBorder#FFA500
  • activityBar.foreground#FFA500
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#E74C3C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF8C00
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background#1A1A1A
  • breadcrumb.focusForeground#FFA500
  • breadcrumb.foreground#808080
  • breadcrumbPicker.background#1A1A1A
  • button.background#FF8C00
  • button.foreground#FFFFFF
  • button.hoverBackground#FFA500
  • button.secondaryBackground#5DADE2
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#00A8E8
  • checkbox.background#262626
  • checkbox.border#4A4A4A
  • checkbox.foreground#FFFFFF
  • debugIcon.breakpointCurrentStackframeForeground#FFD700
  • debugIcon.breakpointDisabledForeground#808080
  • debugIcon.breakpointForeground#E74C3C
  • debugIcon.breakpointStackframeForeground#5DADE2
  • debugIcon.breakpointUnverifiedForeground#808080
  • debugIcon.continueForeground#27AE60
  • debugIcon.disconnectForeground#E74C3C
  • debugIcon.pauseForeground#F39C12
  • debugIcon.restartForeground#5DADE2
  • debugIcon.startForeground#27AE60
  • debugIcon.stepBackForeground#5DADE2
  • debugIcon.stepIntoForeground#5DADE2
  • debugIcon.stepOutForeground#5DADE2
  • debugIcon.stepOverForeground#5DADE2
  • debugIcon.stopForeground#E74C3C
  • debugToolBar.background#1A1A1A
  • debugToolBar.border#262626
  • descriptionForeground#808080
  • diffEditor.border#262626
  • diffEditor.diagonalFill#4A4A4A28
  • diffEditor.insertedLineBackground#27AE6015
  • diffEditor.insertedTextBackground#27AE6020
  • diffEditor.removedLineBackground#E74C3C15
  • diffEditor.removedTextBackground#E74C3C20
  • dropdown.background#262626
  • dropdown.border#4A4A4A
  • dropdown.foreground#FFFFFF
  • dropdown.listBackground#1A1A1A
  • editor.background#1A1A1A
  • editor.findMatchBackground#FFD70050
  • editor.findMatchHighlightBackground#FFD70028
  • editor.findRangeHighlightBackground#FFA50018
  • editor.foreground#FFFAF0
  • editor.hoverHighlightBackground#FFA50018
  • editor.inactiveSelectionBackground#FFA50018
  • editor.lineHighlightBackground#262626
  • editor.lineHighlightBorder#26262600
  • editor.rangeHighlightBackground#262626
  • editor.selectionBackground#FFA50030
  • editor.selectionHighlightBackground#FFA50025
  • editor.wordHighlightBackground#5DADE228
  • editor.wordHighlightStrongBackground#5DADE238
  • editorBracketMatch.background#FFA50028
  • editorBracketMatch.border#FFA500
  • editorCodeLens.foreground#808080
  • editorCursor.background#1A1A1A
  • editorCursor.foreground#FFA500
  • editorError.foreground#E74C3C
  • editorGroup.border#262626
  • editorGroup.dropBackground#FFA50018
  • editorGroupHeader.border#262626
  • editorGroupHeader.noTabsBackground#1A1A1A
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#262626
  • editorGutter.addedBackground#27AE60
  • editorGutter.background#1A1A1A
  • editorGutter.deletedBackground#E74C3C
  • editorGutter.modifiedBackground#5DADE2
  • editorHint.foreground#17A2B8
  • editorHoverWidget.background#1A1A1A
  • editorHoverWidget.border#262626
  • editorHoverWidget.foreground#E8E8E8
  • editorHoverWidget.statusBarBackground#262626
  • editorIndentGuide.activeBackground1#FFA50048
  • editorIndentGuide.background1#4A4A4A28
  • editorInfo.foreground#5DADE2
  • editorLineNumber.activeForeground#FFA500
  • editorLineNumber.foreground#808080
  • editorLink.activeForeground#5DADE2
  • editorOverviewRuler.border#262626
  • editorRuler.foreground#4A4A4A48
  • editorSuggestWidget.background#1A1A1A
  • editorSuggestWidget.border#262626
  • editorSuggestWidget.focusHighlightForeground#FFB84D
  • editorSuggestWidget.foreground#E8E8E8
  • editorSuggestWidget.highlightForeground#FFA500
  • editorSuggestWidget.selectedBackground#FFA50028
  • editorWarning.foreground#F39C12
  • editorWhitespace.foreground#4A4A4A38
  • editorWidget.background#1A1A1A
  • editorWidget.border#262626
  • editorWidget.foreground#E8E8E8
  • errorForeground#E74C3C
  • focusBorder#FFA500
  • foreground#E8E8E8
  • gitDecoration.conflictingResourceForeground#8E44AD
  • gitDecoration.deletedResourceForeground#E74C3C
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#5DADE2
  • gitDecoration.stageDeletedResourceForeground#E74C3C
  • gitDecoration.stageModifiedResourceForeground#5DADE2
  • gitDecoration.submoduleResourceForeground#17A2B8
  • gitDecoration.untrackedResourceForeground#27AE60
  • icon.foreground#FFA500
  • input.background#262626
  • input.border#4A4A4A
  • input.foreground#FFFFFF
  • input.placeholderForeground#808080
  • inputOption.activeBackground#FFA50028
  • inputOption.activeBorder#FFA500
  • inputOption.activeForeground#FFFFFF
  • inputValidation.errorBackground#E74C3C30
  • inputValidation.errorBorder#E74C3C
  • inputValidation.errorForeground#FFFFFF
  • inputValidation.infoBackground#5DADE230
  • inputValidation.infoBorder#5DADE2
  • inputValidation.infoForeground#FFFFFF
  • inputValidation.warningBackground#F39C1230
  • inputValidation.warningBorder#F39C12
  • inputValidation.warningForeground#FFFFFF
  • keybindingLabel.background#262626
  • keybindingLabel.border#4A4A4A
  • keybindingLabel.bottomBorder#4A4A4A
  • keybindingLabel.foreground#FFA500
  • list.activeSelectionBackground#FFA50028
  • list.activeSelectionForeground#FFFFFF
  • list.deemphasizedForeground#808080
  • list.dropBackground#FFA50018
  • list.errorForeground#E74C3C
  • list.filterMatchBackground#FFD70050
  • list.filterMatchBorder#FFD700
  • list.focusBackground#FFA50038
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FFA500
  • list.hoverBackground#262626
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#262626
  • list.inactiveSelectionForeground#E8E8E8
  • list.warningForeground#F39C12
  • menu.background#1A1A1A
  • menu.border#262626
  • menu.foreground#E8E8E8
  • menu.selectionBackground#FFA50028
  • menu.selectionBorder#FFA500
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#262626
  • menubar.selectionBackground#262626
  • menubar.selectionForeground#FFA500
  • merge.border#262626
  • merge.commonContentBackground#80808020
  • merge.commonHeaderBackground#80808040
  • merge.currentContentBackground#5DADE220
  • merge.currentHeaderBackground#5DADE240
  • merge.incomingContentBackground#27AE6020
  • merge.incomingHeaderBackground#27AE6040
  • minimap.errorHighlight#E74C3C
  • minimap.findMatchHighlight#FFD70050
  • minimap.selectionHighlight#FFA50038
  • minimap.warningHighlight#F39C12
  • minimapGutter.addedBackground#27AE60
  • minimapGutter.deletedBackground#E74C3C
  • minimapGutter.modifiedBackground#5DADE2
  • notificationCenter.border#262626
  • notificationCenterHeader.background#262626
  • notificationCenterHeader.foreground#FFA500
  • notificationLink.foreground#5DADE2
  • notifications.background#1A1A1A
  • notifications.border#262626
  • notifications.foreground#E8E8E8
  • notificationsErrorIcon.foreground#E74C3C
  • notificationsInfoIcon.foreground#5DADE2
  • notificationsWarningIcon.foreground#F39C12
  • notificationToast.border#262626
  • panel.background#1A1A1A
  • panel.border#262626
  • panel.dropBorder#FFA500
  • panelInput.border#4A4A4A
  • panelSection.border#262626
  • panelSection.dropBackground#FFA50018
  • panelSectionHeader.background#262626
  • panelSectionHeader.border#4A4A4A
  • panelSectionHeader.foreground#FFB84D
  • panelTitle.activeBorder#FFA500
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#808080
  • peekView.border#FFA500
  • peekViewEditor.background#1A1A1A
  • peekViewEditor.matchHighlightBackground#FFD70050
  • peekViewEditor.matchHighlightBorder#FFD700
  • peekViewResult.background#1A1A1A
  • peekViewResult.fileForeground#E8E8E8
  • peekViewResult.lineForeground#808080
  • peekViewResult.matchHighlightBackground#FFD70050
  • peekViewResult.selectionBackground#FFA50028
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#262626
  • peekViewTitleDescription.foreground#808080
  • peekViewTitleLabel.foreground#FFA500
  • progressBar.background#FF8C00
  • quickInput.background#1A1A1A
  • quickInput.foreground#E8E8E8
  • quickInputList.focusBackground#FFA50028
  • quickInputList.focusForeground#FFFFFF
  • quickInputList.focusIconForeground#FFA500
  • scrollbar.shadow#00000048
  • scrollbarSlider.activeBackground#FFA50068
  • scrollbarSlider.background#FFA50028
  • scrollbarSlider.hoverBackground#FFA50048
  • settings.checkboxBackground#262626
  • settings.checkboxBorder#4A4A4A
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownBackground#262626
  • settings.dropdownBorder#4A4A4A
  • settings.dropdownForeground#FFFFFF
  • settings.dropdownListBorder#4A4A4A
  • settings.headerForeground#FFA500
  • settings.modifiedItemIndicator#5DADE2
  • settings.numberInputBackground#262626
  • settings.numberInputBorder#4A4A4A
  • settings.numberInputForeground#FFFFFF
  • settings.textInputBackground#262626
  • settings.textInputBorder#4A4A4A
  • settings.textInputForeground#FFFFFF
  • sideBar.background#1A1A1A
  • sideBar.border#262626
  • sideBar.foreground#E8E8E8
  • sideBarSectionHeader.background#262626
  • sideBarSectionHeader.border#4A4A4A
  • sideBarSectionHeader.foreground#FFB84D
  • sideBarTitle.foreground#FFA500
  • statusBar.background#FF8C00
  • statusBar.border#FF8C00
  • statusBar.debuggingBackground#E74C3C
  • statusBar.debuggingBorder#E74C3C
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#5DADE2
  • statusBar.noFolderBorder#5DADE2
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.activeBackground#FFA50080
  • statusBarItem.errorBackground#E74C3C
  • statusBarItem.errorForeground#FFFFFF
  • statusBarItem.hoverBackground#FFA50050
  • statusBarItem.prominentBackground#5DADE2
  • statusBarItem.prominentHoverBackground#00A8E8
  • statusBarItem.remoteBackground#5DADE2
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.warningBackground#F39C12
  • statusBarItem.warningForeground#1A1A1A
  • symbolIcon.arrayForeground#17A2B8
  • symbolIcon.booleanForeground#E67E22
  • symbolIcon.classForeground#17A2B8
  • symbolIcon.colorForeground#FFD700
  • symbolIcon.constantForeground#FFD700
  • symbolIcon.constructorForeground#8E44AD
  • symbolIcon.enumeratorForeground#FFD700
  • symbolIcon.enumeratorMemberForeground#F39C12
  • symbolIcon.eventForeground#FFB84D
  • symbolIcon.fieldForeground#5DADE2
  • symbolIcon.fileForeground#E8E8E8
  • symbolIcon.folderForeground#FFA500
  • symbolIcon.functionForeground#8E44AD
  • symbolIcon.interfaceForeground#00CED1
  • symbolIcon.keyForeground#5DADE2
  • symbolIcon.keywordForeground#FFA500
  • symbolIcon.methodForeground#8E44AD
  • symbolIcon.moduleForeground#17A2B8
  • symbolIcon.namespaceForeground#17A2B8
  • symbolIcon.nullForeground#E67E22
  • symbolIcon.numberForeground#F39C12
  • symbolIcon.objectForeground#00A8E8
  • symbolIcon.operatorForeground#FFB84D
  • symbolIcon.packageForeground#17A2B8
  • symbolIcon.propertyForeground#5DADE2
  • symbolIcon.referenceForeground#00A8E8
  • symbolIcon.snippetForeground#27AE60
  • symbolIcon.stringForeground#27AE60
  • symbolIcon.structForeground#17A2B8
  • symbolIcon.textForeground#E8E8E8
  • symbolIcon.typeParameterForeground#00A8E8
  • symbolIcon.unitForeground#F39C12
  • symbolIcon.variableForeground#00A8E8
  • tab.activeBackground#262626
  • tab.activeBorder#00000000
  • tab.activeBorderTop#FFA500
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#5DADE2
  • tab.border#262626
  • tab.hoverBackground#262626
  • tab.hoverBorder#FFB84D
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#808080
  • tab.inactiveModifiedBorder#5DADE280
  • tab.unfocusedActiveBackground#262626
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#808080
  • tab.unfocusedActiveForeground#E8E8E8
  • tab.unfocusedHoverBackground#262626
  • tab.unfocusedHoverForeground#E8E8E8
  • tab.unfocusedInactiveBackground#1A1A1A
  • tab.unfocusedInactiveForeground#808080
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#5DADE2
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#00A8E8
  • terminal.ansiBrightCyan#00CED1
  • terminal.ansiBrightGreen#4CAF50
  • terminal.ansiBrightMagenta#9C27B0
  • terminal.ansiBrightRed#E67E22
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#17A2B8
  • terminal.ansiGreen#27AE60
  • terminal.ansiMagenta#8E44AD
  • terminal.ansiRed#E74C3C
  • terminal.ansiWhite#E8E8E8
  • terminal.ansiYellow#F39C12
  • terminal.background#1A1A1A
  • terminal.border#262626
  • terminal.foreground#E8E8E8
  • terminal.selectionBackground#FFA50038
  • terminalCursor.background#1A1A1A
  • terminalCursor.foreground#FFA500
  • textBlockQuote.background#262626
  • textBlockQuote.border#FFA500
  • textCodeBlock.background#1A1A1A
  • textLink.activeForeground#00A8E8
  • textLink.foreground#5DADE2
  • textPreformat.foreground#27AE60
  • textSeparator.foreground#4A4A4A
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#FFA500
  • titleBar.border#262626
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#808080
  • walkThrough.embeddedEditorBackground#1A1A1A
  • welcomePage.buttonBackground#262626
  • welcomePage.buttonHoverBackground#4A4A4A
  • welcomePage.tileBackground#1A1A1A
  • welcomePage.tileBorder#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080italic
comment.block.documentation, comment.line.documentation#95A5A6italic
keyword, storage.type, storage.modifier#FFA500bold
keyword.control, keyword.control.flow#FFB84Dbold
keyword.control.import, keyword.control.export, keyword.control.from#FFA500
string, string.quoted, string.quoted.double, string.quoted.single, string.quoted.triple#27AE60
string.template, string.quoted.template#27AE60
constant.character.escape, constant.other.placeholder#4CAF50bold
string.regexp#4CAF50
entity.name.function, support.function, meta.function-call.generic#8E44AD
meta.function-call#9C27B0
variable.parameter, meta.parameters#00A8E8
variable, support.variable#00A8E8
variable.other.declaration, meta.definition.variable#5DADE2
variable.object.property, variable.other.property, meta.object-literal.key#5DADE2
variable.language.this, variable.language.self, variable.language.super#FFB84Ditalic bold
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#17A2B8bold
entity.name.type.interface#00CED1bold
meta.type.annotation, support.type#17A2B8
constant, variable.other.constant, support.constant#FFD700
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#F39C12
constant.language.boolean, constant.language.true, constant.language.false#E67E22bold
constant.language.null, constant.language.undefined, constant.language.none#E67E22bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#FFB84D
keyword.operator.new, keyword.operator.expression.typeof, keyword.operator.expression.instanceof#FFA500
punctuation#E8E8E8
punctuation.separator, punctuation.terminator#E8E8E8
meta.decorator, punctuation.decorator, entity.name.function.decorator#FFD700italic
entity.name.tag, meta.tag.sgml.doctype, meta.tag.metadata#FFA500
entity.other.attribute-name#5DADE2
entity.other.attribute-name.class, meta.selector.css#FFD700
entity.other.attribute-name.id#17A2B8
support.type.property-name.css, meta.property-name#8E44AD
support.constant.property-value.css, meta.property-value#00A8E8
keyword.other.unit#F39C12
support.type.property-name.json, meta.structure.dictionary.key.json#5DADE2
meta.structure.dictionary.value.json string#27AE60
markup.heading, markup.heading.markdown, entity.name.section.markdown#FFA500bold
markup.bold#F39C12bold
markup.italic#00A8E8italic
markup.underline.link, string.other.link.title.markdown#17A2B8underline
markup.inline.raw, markup.fenced_code, markup.raw.block#27AE60
markup.list.unnumbered, markup.list.numbered#FFA500
markup.quote#808080italic
variable.parameter.function.language.special.self.python#FFB84Ditalic
support.function.magic.python#8E44ADitalic
keyword.operator.new#FFA500bold
support.class.component, entity.name.tag.tsx, entity.name.tag.jsx#17A2B8
invalid, invalid.illegal#E74C3Cbold underline
invalid.deprecated#E67E22strikethrough
markup.inserted, meta.diff.header.to-file#27AE60
markup.deleted, meta.diff.header.from-file#E74C3C
markup.changed#F39C12