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#33353B
  • activityBar.activeBorder#3574F0
  • activityBar.background#26282C
  • activityBar.border#26282C
  • activityBar.foreground#D1D3D9
  • activityBar.inactiveForeground#858A94
  • activityBarBadge.background#3574F0
  • activityBarBadge.foreground#FFFFFF
  • badge.background#393B40
  • badge.foreground#D1D3D9
  • button.background#3574F0
  • button.foreground#FFFFFF
  • button.hoverBackground#456EC0
  • button.secondaryBackground#393B40
  • button.secondaryForeground#D1D3D9
  • button.secondaryHoverBackground#4A4B4C
  • checkbox.background#2B2D30
  • checkbox.border#6F737A
  • checkbox.foreground#548AF7
  • debugExceptionWidget.background#2B2D30
  • debugExceptionWidget.border#F75464
  • debugToolBar.background#2B2D30
  • descriptionForeground#858A94
  • disabledForeground#6F737A
  • dropdown.background#2B2D30
  • dropdown.border#393B40
  • dropdown.foreground#BCBEC4
  • editor.background#191A1C
  • editor.findMatchBackground#AF7D4455
  • editor.findMatchBorder#AF7D44
  • editor.findMatchHighlightBackground#684C2F66
  • editor.foreground#BCBEC4
  • editor.inactiveSelectionBackground#2E436E99
  • editor.lineHighlightBackground#1F2024
  • editor.lineHighlightBorder#1F2024
  • editor.selectionBackground#214283
  • editor.selectionHighlightBackground#2E436E66
  • editor.wordHighlightBackground#2E436E55
  • editor.wordHighlightStrongBackground#31528E66
  • editorBracketHighlight.foreground1#BCBEC4
  • editorBracketHighlight.foreground2#6FAFBD
  • editorBracketHighlight.foreground3#AFBF7E
  • editorBracketHighlight.foreground4#C77DBB
  • editorBracketHighlight.foreground5#CF8E6D
  • editorBracketHighlight.foreground6#56A8F5
  • editorBracketMatch.background#2A2C30
  • editorBracketMatch.border#6F737A
  • editorCodeLens.foreground#6F737A
  • editorCursor.foreground#FFFFFF
  • editorGroup.border#26282C
  • editorGroupHeader.tabsBackground#191A1C
  • editorGroupHeader.tabsBorder#26282C
  • editorGutter.addedBackground#6AAB73
  • editorGutter.background#191A1C
  • editorGutter.deletedBackground#F75464
  • editorGutter.modifiedBackground#548AF7
  • editorHoverWidget.background#2B2D30
  • editorHoverWidget.border#393B40
  • editorHoverWidget.foreground#BCBEC4
  • editorIndentGuide.activeBackground1#4A4B4C
  • editorIndentGuide.background1#323438
  • editorInlayHint.background#2A2C30
  • editorInlayHint.foreground#858A94
  • editorInlayHint.parameterBackground#2A2C30
  • editorInlayHint.parameterForeground#858A94
  • editorInlayHint.typeBackground#2A2C30
  • editorInlayHint.typeForeground#858A94
  • editorLightBulb.foreground#F0C36A
  • editorLightBulbAutoFix.foreground#F0C36A
  • editorLineNumber.activeForeground#858A94
  • editorLineNumber.foreground#4B5059
  • editorSuggestWidget.background#2B2D30
  • editorSuggestWidget.border#393B40
  • editorSuggestWidget.foreground#BCBEC4
  • editorSuggestWidget.highlightForeground#71A1FE
  • editorSuggestWidget.selectedBackground#2E436E
  • editorWhitespace.foreground#323438
  • editorWidget.background#2B2D30
  • editorWidget.border#393B40
  • editorWidget.foreground#BCBEC4
  • errorForeground#F75464
  • errorLens.errorForeground#F75464
  • errorLens.errorMessageBackground#F7546419
  • errorLens.errorRangeBackground#F7546419
  • errorLens.hintForeground#6AAB73
  • errorLens.hintMessageBackground#6AAB7319
  • errorLens.hintRangeBackground#6AAB7319
  • errorLens.infoForeground#548AF7
  • errorLens.infoMessageBackground#548AF719
  • errorLens.infoRangeBackground#548AF719
  • errorLens.warningForeground#E3B341
  • errorLens.warningMessageBackground#E3B34119
  • errorLens.warningRangeBackground#E3B34119
  • focusBorder#3574F0
  • foreground#BCBEC4
  • gitDecoration.addedResourceForeground#6AAB73
  • gitDecoration.conflictingResourceForeground#C9A26D
  • gitDecoration.deletedResourceForeground#F75464
  • gitDecoration.ignoredResourceForeground#5A5D63
  • gitDecoration.modifiedResourceForeground#548AF7
  • gitDecoration.renamedResourceForeground#6FAFBD
  • gitDecoration.untrackedResourceForeground#85C46C
  • icon.foreground#AFB1B6
  • input.background#2B2D30
  • input.border#393B40
  • input.foreground#BCBEC4
  • input.placeholderForeground#6F737A
  • inputOption.activeBackground#2E436E
  • inputOption.activeBorder#3574F0
  • list.activeSelectionBackground#33353B
  • list.activeSelectionForeground#D1D3D9
  • list.dropBackground#2E436E
  • list.focusBackground#33353B
  • list.focusForeground#D1D3D9
  • list.highlightForeground#548AF7
  • list.hoverBackground#27282B
  • list.hoverForeground#D1D3D9
  • list.inactiveSelectionBackground#33353B
  • list.inactiveSelectionForeground#D1D3D9
  • listFilterWidget.background#2B2D30
  • listFilterWidget.noMatchesOutline#F75464
  • listFilterWidget.outline#3574F0
  • menu.background#2B2D30
  • menu.foreground#BCBEC4
  • menu.selectionBackground#2E436E
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#393B40
  • notificationCenterHeader.background#26282C
  • notifications.background#2B2D30
  • notifications.border#393B40
  • notifications.foreground#BCBEC4
  • panel.background#191A1C
  • panel.border#26282C
  • panelTitle.activeBorder#3574F0
  • panelTitle.activeForeground#D1D3D9
  • panelTitle.inactiveForeground#858A94
  • peekView.border#3574F0
  • peekViewEditor.background#191A1C
  • peekViewEditor.matchHighlightBackground#684C2F88
  • peekViewResult.background#202124
  • peekViewResult.selectionBackground#33353B
  • peekViewTitle.background#26282C
  • progressBar.background#3574F0
  • quickInput.background#2B2D30
  • quickInput.foreground#BCBEC4
  • quickInputList.focusBackground#2E436E
  • quickInputList.focusForeground#FFFFFF
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#858A9499
  • scrollbarSlider.background#5A5D6355
  • scrollbarSlider.hoverBackground#6F737A77
  • selection.background#2E436E
  • settings.headerForeground#D1D3D9
  • settings.modifiedItemIndicator#3574F0
  • sideBar.background#191A1C
  • sideBar.border#26282C
  • sideBar.foreground#D1D3D9
  • sideBarSectionHeader.background#191A1C
  • sideBarSectionHeader.border#26282C
  • sideBarSectionHeader.foreground#D1D3D9
  • sideBarTitle.foreground#D1D3D9
  • statusBar.background#26282C
  • statusBar.border#26282C
  • statusBar.debuggingBackground#9A5D26
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#C3C5CB
  • statusBarItem.hoverBackground#33353B
  • statusBarItem.remoteBackground#3574F0
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#233558
  • tab.activeBorder#233558
  • tab.activeBorderTop#456EC0
  • tab.activeForeground#D1D3D9
  • tab.border#191A1C
  • tab.hoverBackground#27282B
  • tab.hoverForeground#D1D3D9
  • tab.inactiveBackground#191A1C
  • tab.inactiveForeground#AFB1B6
  • tab.unfocusedActiveBackground#233558
  • tab.unfocusedActiveForeground#AFB1B6
  • tab.unfocusedInactiveForeground#6F737A
  • terminal.ansiBlack#191A1C
  • terminal.ansiBlue#548AF7
  • terminal.ansiBrightBlack#6F737A
  • terminal.ansiBrightBlue#71A1FE
  • terminal.ansiBrightCyan#98D2D8
  • terminal.ansiBrightGreen#85C46C
  • terminal.ansiBrightMagenta#D88CC7
  • terminal.ansiBrightRed#FF6B78
  • terminal.ansiBrightWhite#D1D3D9
  • terminal.ansiBrightYellow#E3C07B
  • terminal.ansiCyan#6FAFBD
  • terminal.ansiGreen#6AAB73
  • terminal.ansiMagenta#C77DBB
  • terminal.ansiRed#F75464
  • terminal.ansiWhite#BCBEC4
  • terminal.ansiYellow#C9A26D
  • terminal.background#191A1C
  • terminal.foreground#BCBEC4
  • terminalCursor.foreground#FFFFFF
  • testing.iconErrored#F75464
  • testing.iconFailed#F75464
  • testing.iconPassed#6AAB73
  • testing.iconQueued#858A94
  • testing.iconUnset#6F737A
  • titleBar.activeBackground#26282C
  • titleBar.activeForeground#C3C5CB
  • titleBar.border#26282C
  • titleBar.inactiveBackground#26282C
  • titleBar.inactiveForeground#858A94
  • tree.inactiveIndentGuidesStroke#323438
  • tree.indentGuidesStroke#3D3E3F
  • widget.shadow#00000066
  • window.activeBorder#26282C
  • window.inactiveBorder#26282C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7E85italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new#CF8E6D
string, string.quoted, string.template, punctuation.definition.string#6AAB73
constant.numeric, constant.language.boolean, constant.language.nil#2AACB8
entity.name.function, meta.function.declaration entity.name.function#56A8F5
support.function, variable.function#B09D79
entity.name.type, entity.name.class, entity.name.struct, entity.name.interface, support.type#6FAFBD
entity.name.namespace, entity.name.package, support.class#AFBF7E
constant.other, variable.other.constant, entity.name.tag#C77DBB
invalid, invalid.illegal#F75464
markup.heading, markup.bold#56A8F5bold
markup.italic#BCBEC4italic
markup.inserted#6AAB73
markup.deleted#F75464