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.activeBorder#a73b44
  • activityBar.background#151320
  • activityBar.border#2a2c33
  • activityBar.foreground#d6d7d9
  • activityBar.inactiveForeground#777B80
  • activityBarBadge.background#a73b44
  • activityBarBadge.foreground#d6d7d9
  • badge.background#a73b44
  • badge.foreground#d6d7d9
  • breadcrumb.activeSelectionForeground#b9414b
  • breadcrumb.background#1e1f24
  • breadcrumb.focusForeground#d6d7d9
  • breadcrumb.foreground#B16B6B
  • breadcrumbPicker.background#2a2c33
  • button.background#a73b44
  • button.foreground#d6d7d9
  • button.hoverBackground#b9414b
  • button.secondaryBackground#2a2c33
  • button.secondaryForeground#d6d7d9
  • button.secondaryHoverBackground#454158
  • checkbox.background#151320
  • checkbox.border#2a2c33
  • checkbox.foreground#a73b44
  • debugIcon.breakpointForeground#CF5C72
  • debugIcon.startForeground#3A7460
  • debugIcon.stopForeground#BC4512
  • debugToolBar.background#2a2c33
  • descriptionForeground#85898E
  • diffEditor.diagonalFill#2a2c33
  • diffEditor.insertedTextBackground#3A746030
  • diffEditor.removedTextBackground#BC451230
  • dropdown.background#1e1f24
  • dropdown.border#2a2c33
  • dropdown.foreground#d6d7d9
  • editor.background#1e1f24
  • editor.foreground#d6d7d9
  • editor.inactiveSelectionBackground#2a2c33
  • editor.lineHighlightBackground#323040
  • editor.selectionBackground#4A2730
  • editor.selectionHighlightBackground#4A273080
  • editor.wordHighlightBackground#4A273058
  • editor.wordHighlightStrongBackground#4A2730A0
  • editorBracketHighlight.foreground1#BA091E
  • editorBracketHighlight.foreground2#D4AF37
  • editorBracketHighlight.foreground3#3A7460
  • editorBracketHighlight.foreground4#2E708A
  • editorBracketHighlight.foreground5#9A84B1
  • editorBracketHighlight.foreground6#D16579
  • editorBracketMatch.background#4A273080
  • editorBracketMatch.border#b9414b
  • editorCodeLens.foreground#85898E
  • editorCursor.foreground#B9414B
  • editorError.foreground#BC4512
  • editorGroup.border#2a2c33
  • editorGroup.dropBackground#4A273060
  • editorGroupHeader.noTabsBackground#1e1f24
  • editorGroupHeader.tabsBackground#1e1f24
  • editorGutter.addedBackground#3A7460
  • editorGutter.background#1e1f24
  • editorGutter.deletedBackground#BC4512
  • editorGutter.modifiedBackground#C1A875
  • editorHint.foreground#85898E
  • editorHoverWidget.background#2a2c33
  • editorHoverWidget.border#454158
  • editorHoverWidget.foreground#d6d7d9
  • editorIndentGuide.activeBackground1#b9414b
  • editorIndentGuide.background1#383A41
  • editorInfo.foreground#327696
  • editorLineNumber.activeForeground#777B80
  • editorLineNumber.foreground#6F7378
  • editorRuler.foreground#323040
  • editorSuggestWidget.background#2a2c33
  • editorSuggestWidget.border#2a2c33
  • editorSuggestWidget.foreground#d6d7d9
  • editorSuggestWidget.highlightForeground#b9414b
  • editorSuggestWidget.selectedBackground#4a2730
  • editorWarning.foreground#e0c080
  • editorWhitespace.foreground#777B80
  • editorWidget.background#1e1f24
  • editorWidget.border#2a2c33
  • editorWidget.foreground#d6d7d9
  • errorForeground#BC4512
  • focusBorder#a73b44
  • foreground#d6d7d9
  • gitDecoration.addedResourceForeground#366A5C
  • gitDecoration.conflictingResourceForeground#FF80BF
  • gitDecoration.deletedResourceForeground#BC4512
  • gitDecoration.ignoredResourceForeground#FFCA80
  • gitDecoration.modifiedResourceForeground#7970A9
  • gitDecoration.untrackedResourceForeground#85898E
  • icon.foreground#d6d7d9
  • input.background#1e1f24
  • input.border#2a2c33
  • input.foreground#d6d7d9
  • input.placeholderForeground#777B80
  • inputOption.activeBorder#a73b44
  • inputValidation.errorBackground#43171B
  • inputValidation.errorBorder#801F2D
  • inputValidation.infoBackground#2a2c33
  • inputValidation.infoBorder#29617C
  • inputValidation.warningBackground#433210
  • inputValidation.warningBorder#e0c080
  • list.activeSelectionBackground#3D232B
  • list.activeSelectionForeground#d6d7d9
  • list.errorForeground#BC4512
  • list.focusBackground#4a2730
  • list.focusForeground#d6d7d9
  • list.highlightForeground#b9414b
  • list.hoverBackground#2a2c33
  • list.hoverForeground#d6d7d9
  • list.inactiveSelectionBackground#2a2c33
  • list.inactiveSelectionForeground#d6d7d9
  • list.warningForeground#e0c080
  • menu.background#1e1f24
  • menu.border#2a2c33
  • menu.foreground#d6d7d9
  • menu.selectionBackground#4a2730
  • menu.selectionForeground#d6d7d9
  • menubar.selectionBackground#2a2c33
  • menubar.selectionForeground#d6d7d9
  • minimap.errorHighlight#BC451280
  • minimap.findMatchHighlight#B9414B80
  • minimap.selectionHighlight#4A2730E0
  • minimap.warningHighlight#E0C08080
  • minimapGutter.addedBackground#3A7460A0
  • minimapGutter.deletedBackground#BC4512A0
  • minimapGutter.modifiedBackground#C1A875A0
  • notificationCenter.border#2a2c33
  • notificationCenterHeader.background#2a2c33
  • notificationLink.foreground#b9414b
  • notifications.background#1e1f24
  • notifications.border#2a2c33
  • notifications.foreground#d6d7d9
  • panel.background#1e1f24
  • panel.border#2a2c33
  • panelTitle.activeBorder#a73b44
  • panelTitle.activeForeground#d6d7d9
  • panelTitle.inactiveForeground#85898E
  • peekView.border#a73b44
  • peekViewEditor.background#151320
  • peekViewEditor.matchHighlightBackground#6B553180
  • peekViewResult.background#1e1f24
  • peekViewResult.fileForeground#d6d7d9
  • peekViewResult.lineForeground#85898E
  • peekViewResult.selectionBackground#4a2730
  • peekViewResult.selectionForeground#d6d7d9
  • peekViewTitle.background#2a2c33
  • peekViewTitleDescription.foreground#d6d7d9
  • peekViewTitleLabel.foreground#b9414b
  • problemsErrorIcon.foreground#BC4512
  • problemsInfoIcon.foreground#327696
  • problemsWarningIcon.foreground#e0c080
  • progressBar.background#a73b44
  • scrollbar.shadow#00000070
  • scrollbarSlider.activeBackground#777B80
  • scrollbarSlider.background#45415880
  • scrollbarSlider.hoverBackground#454158C0
  • selection.background#4a2730
  • sideBar.background#1e1f24
  • sideBar.foreground#d6d7d9
  • sideBarSectionHeader.background#2a2c33
  • sideBarSectionHeader.border#2a2c33
  • sideBarSectionHeader.foreground#d6d7d9
  • sideBarTitle.foreground#d6d7d9
  • statusBar.background#151320
  • statusBar.border#2a2c33
  • statusBar.debuggingBackground#a73b44
  • statusBar.debuggingForeground#d6d7d9
  • statusBar.foreground#d6d7d9
  • statusBar.noFolderBackground#151320
  • tab.activeBackground#1e1f24
  • tab.activeBorder#a73b44
  • tab.activeForeground#d6d7d9
  • tab.border#2a2c33
  • tab.hoverBackground#2a2c33
  • tab.hoverForeground#d6d7d9
  • tab.inactiveBackground#151320
  • tab.inactiveForeground#85898E
  • tab.unfocusedActiveBorder#454158
  • tab.unfocusedActiveForeground#B16B6B
  • tab.unfocusedInactiveForeground#6F7378
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#29617C
  • terminal.ansiBrightBlack#63666B
  • terminal.ansiBrightBlue#4FA3C4
  • terminal.ansiBrightCyan#94C7DB
  • terminal.ansiBrightGreen#55A791
  • terminal.ansiBrightMagenta#A895BC
  • terminal.ansiBrightRed#D16579
  • terminal.ansiBrightWhite#F8F8F2
  • terminal.ansiBrightYellow#F8D674
  • terminal.ansiCyan#2E708A
  • terminal.ansiGreen#366A5C
  • terminal.ansiMagenta#A68FBC
  • terminal.ansiRed#BA091E
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#D4AF37
  • terminal.background#1e1f24
  • terminal.foreground#85898E
  • terminalCursor.foreground#b9414b
  • textBlockQuote.background#151320
  • textBlockQuote.border#2a2c33
  • textCodeBlock.background#151320
  • textLink.activeForeground#a73b44
  • textLink.foreground#b9414b
  • textPreformat.foreground#FFCA80
  • titleBar.activeBackground#151320
  • titleBar.activeForeground#d6d7d9
  • titleBar.border#2a2c33
  • titleBar.inactiveBackground#151320
  • titleBar.inactiveForeground#85898E
  • toolbar.hoverBackground#2a2c33
  • tree.indentGuidesStroke#383A41
  • widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6F7378
comment.block#434349
comment.block.documentation, comment.line.documentation#85898Eitalic
keyword, storage.type, storage.modifier#B9414B
keyword.operator, punctuation.accessor#BA091E
string, string.quoted, string.template#685D5D
constant.character.escape, constant.character#71262F
invalid.illegal, invalid.deprecated#BC4512
constant.numeric#FFCA80bold
constant.language, constant.other#B16B6B
entity.name.function, support.function#2E708A
meta.function-call entity.name.function, variable.function#2E708A
entity.name.type.class, support.class#961D2B
entity.name.type.interface#85898e
entity.name.type, support.type, support.type.primitive#85898e
variable.other.readwrite, variable.other.local#A9A9A9
variable.other.property, variable.other.member, meta.object-literal.key#961D2B
variable.parameter#B16B6B
variable.other.constant, variable.other.enummember#71262F
storage.type.annotation, entity.name.type.annotation, punctuation.definition.annotation#4D3860
entity.name.tag, punctuation.definition.tag#B9414B
entity.other.attribute-name#961D2B
string.quoted.double.html, string.quoted.double.xml#961D2Bitalic
support.type.property-name.json, string.json support.type.property-name#961D2B
string.regexp#685D5D
markup.heading, entity.name.section#B9414Bbold
markup.bold#d6d7d9bold
markup.italic#d6d7d9italic
markup.underline.link, string.other.link#BA091Eunderline
markup.inserted#3A7460
markup.deleted#BC4512
markup.changed#C1A875