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#FF6700
  • activityBar.activeFocusBorder#FF6700
  • activityBar.background#AEB5B9
  • activityBar.border#E2E2DE
  • activityBar.foreground#2B2F33
  • activityBar.inactiveForeground#5B6167
  • activityBarBadge.background#FF6700
  • activityBarBadge.foreground#2B2F33
  • badge.background#6B7280
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#8C3600
  • breadcrumb.background#C4C9CC
  • breadcrumb.focusForeground#2B2F33
  • breadcrumb.foreground#5B6268
  • breadcrumbPicker.background#FFFFFF
  • button.background#FF6700
  • button.border#FF67001A
  • button.foreground#2B2F33
  • button.hoverBackground#D95400
  • button.secondaryBackground#E2E2DE
  • button.secondaryForeground#2B2F33
  • button.secondaryHoverBackground#D8D8D3
  • diffEditor.border#E2E2DE
  • diffEditor.diagonalFill#E2E2DE
  • diffEditor.insertedLineBackground#3D8A4814
  • diffEditor.insertedTextBackground#3D8A481F
  • diffEditor.removedLineBackground#C4302B14
  • diffEditor.removedTextBackground#C4302B1F
  • dropdown.background#FFFFFF
  • dropdown.border#D8D8D3
  • dropdown.foreground#2B2F33
  • editor.background#C4C9CC
  • editor.findMatchBackground#FFCC80
  • editor.findMatchBorder#D97706
  • editor.findMatchHighlightBackground#FFE1B380
  • editor.findRangeHighlightBackground#FFE1B355
  • editor.foreground#25282B
  • editor.inactiveSelectionBackground#E1EEF3
  • editor.lineHighlightBackground#00000010
  • editor.rangeHighlightBackground#FFE1B355
  • editor.selectionBackground#CFE8F2
  • editor.selectionHighlightBackground#CFE8F280
  • editor.wordHighlightBackground#007C9E1F
  • editor.wordHighlightStrongBackground#007C9E33
  • editorBracketHighlight.foreground1#D97706
  • editorBracketHighlight.foreground2#007C9E
  • editorBracketHighlight.foreground3#B42364
  • editorBracketHighlight.foreground4#3D8A48
  • editorBracketHighlight.foreground5#7A4FB3
  • editorBracketHighlight.foreground6#2E7D72
  • editorBracketMatch.background#007C9E1A
  • editorBracketMatch.border#007C9E80
  • editorBracketPairGuide.activeBackground1#FF6700
  • editorBracketPairGuide.activeBackground2#007C9E
  • editorBracketPairGuide.activeBackground3#B42364
  • editorBracketPairGuide.activeBackground4#3D8A48
  • editorBracketPairGuide.activeBackground5#7A4FB3
  • editorBracketPairGuide.activeBackground6#2E7D72
  • editorBracketPairGuide.background1#D9770633
  • editorBracketPairGuide.background2#007C9E33
  • editorBracketPairGuide.background3#B4236433
  • editorBracketPairGuide.background4#3D8A4833
  • editorBracketPairGuide.background5#7A4FB333
  • editorBracketPairGuide.background6#2E7D7233
  • editorCodeLens.foreground#61676F
  • editorCursor.foreground#007C9E
  • editorError.foreground#9F2723
  • editorGroup.border#E2E2DE
  • editorGroupHeader.noTabsBackground#C4C9CC
  • editorGroupHeader.tabsBackground#AEB5B9
  • editorGroupHeader.tabsBorder#E2E2DE
  • editorGutter.addedBackground#3D8A48
  • editorGutter.deletedBackground#C4302B
  • editorGutter.modifiedBackground#1B6FB0
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#E2E2DE
  • editorIndentGuide.activeBackground1#FF6700
  • editorIndentGuide.activeBackground2#007C9E
  • editorIndentGuide.activeBackground3#B42364
  • editorIndentGuide.activeBackground4#3D8A48
  • editorIndentGuide.activeBackground5#7A4FB3
  • editorIndentGuide.activeBackground6#2E7D72
  • editorIndentGuide.background1#D9770633
  • editorIndentGuide.background2#007C9E33
  • editorIndentGuide.background3#B4236433
  • editorIndentGuide.background4#3D8A4833
  • editorIndentGuide.background5#7A4FB333
  • editorIndentGuide.background6#2E7D7233
  • editorInfo.foreground#005C75
  • editorInlayHint.background#00000010
  • editorInlayHint.foreground#61676F
  • editorLineNumber.activeForeground#923800
  • editorLineNumber.foreground#FF6700
  • editorLink.activeForeground#005F7A
  • editorOverviewRuler.addedForeground#3D8A48
  • editorOverviewRuler.border#E2E2DE
  • editorOverviewRuler.bracketMatchForeground#8A919980
  • editorOverviewRuler.deletedForeground#C4302B
  • editorOverviewRuler.errorForeground#C4302B
  • editorOverviewRuler.infoForeground#007C9E
  • editorOverviewRuler.modifiedForeground#1B6FB0
  • editorOverviewRuler.warningForeground#A67C00
  • editorRuler.foreground#E2E2DE
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#E2E2DE
  • editorSuggestWidget.foreground#2B2F33
  • editorSuggestWidget.highlightForeground#D95400
  • editorSuggestWidget.selectedBackground#D7EDF6
  • editorSuggestWidget.selectedForeground#1B2A2F
  • editorWarning.foreground#6B5000
  • editorWhitespace.foreground#858D96
  • editorWidget.background#FFFFFF
  • editorWidget.border#E2E2DE
  • editorWidget.resizeBorder#D8D8D3
  • extensionButton.prominentBackground#FF6700
  • extensionButton.prominentForeground#2B2F33
  • extensionButton.prominentHoverBackground#D95400
  • focusBorder#FF6700
  • gitDecoration.addedResourceForeground#3D8A48
  • gitDecoration.conflictingResourceForeground#9F2723
  • gitDecoration.deletedResourceForeground#9F2723
  • gitDecoration.ignoredResourceForeground#A7ADB3
  • gitDecoration.modifiedResourceForeground#825F08
  • gitDecoration.renamedResourceForeground#7A4FB3
  • gitDecoration.untrackedResourceForeground#005C75
  • input.background#FFFFFF
  • input.border#D8D8D3
  • input.foreground#2B2F33
  • input.placeholderForeground#7B838A80
  • inputOption.activeBackground#FF67001A
  • inputOption.activeBorder#FF670033
  • inputOption.activeForeground#D95400
  • inputValidation.errorBackground#FBEAE9
  • inputValidation.errorBorder#C4302B
  • inputValidation.infoBackground#EAF5F8
  • inputValidation.infoBorder#007C9E
  • inputValidation.warningBackground#FBF3E1
  • inputValidation.warningBorder#A67C00
  • keybindingLabel.background#00000010
  • keybindingLabel.border#00000018
  • keybindingLabel.bottomBorder#00000024
  • keybindingLabel.foreground#2B2F33
  • list.activeSelectionBackground#D7EDF6
  • list.activeSelectionForeground#1B2A2F
  • list.deemphasizedForeground#61676F
  • list.errorForeground#9F2723
  • list.filterMatchBackground#FFE1B380
  • list.filterMatchBorder#D9770680
  • list.focusBackground#D7EDF6
  • list.focusForeground#1B2A2F
  • list.focusOutline#FF670066
  • list.highlightForeground#8C3600
  • list.hoverBackground#00000010
  • list.inactiveSelectionBackground#E1EEF3
  • list.inactiveSelectionForeground#2B2F33
  • list.warningForeground#6B5000
  • listFilterWidget.background#FFFFFF
  • listFilterWidget.noMatchesOutline#C4302B
  • listFilterWidget.outline#FF6700
  • menu.background#FFFFFF
  • menu.border#E2E2DE
  • menu.foreground#2B2F33
  • menu.selectionBackground#D7EDF6
  • menu.selectionBorder#CFE8F2
  • menu.selectionForeground#1B2A2F
  • menu.separatorBackground#E2E2DE
  • minimap.background#C4C9CC
  • minimap.errorHighlight#C4302B66
  • minimap.findMatchHighlight#FFCC80
  • minimap.selectionHighlight#CFE8F2
  • minimapGutter.addedBackground#3D8A48
  • minimapGutter.deletedBackground#C4302B
  • minimapGutter.modifiedBackground#1B6FB0
  • minimapSlider.activeBackground#8A919977
  • minimapSlider.background#8A919933
  • minimapSlider.hoverBackground#8A919955
  • notificationCenter.border#E2E2DE
  • notifications.background#FFFFFF
  • notifications.border#E2E2DE
  • notifications.foreground#2B2F33
  • notificationsErrorIcon.foreground#9F2723
  • notificationsInfoIcon.foreground#005C75
  • notificationsWarningIcon.foreground#6B5000
  • notificationToast.border#E2E2DE
  • panel.background#BEC4C7
  • panel.border#E2E2DE
  • panelSection.border#E2E2DE
  • panelTitle.activeBorder#FF6700
  • panelTitle.activeForeground#8C3600
  • panelTitle.inactiveForeground#816745
  • panelTitleBadge.background#6B7280
  • panelTitleBadge.foreground#FFFFFF
  • peekView.border#007C9E4D
  • peekViewEditor.background#FBFBFA
  • peekViewEditor.matchHighlightBackground#FFCC8080
  • peekViewResult.background#C4C9CC
  • peekViewResult.fileForeground#2B2F33
  • peekViewResult.lineForeground#5B6268
  • peekViewResult.matchHighlightBackground#FFCC8080
  • peekViewResult.selectionBackground#D7EDF6
  • peekViewTitle.background#E4F3F7
  • peekViewTitleDescription.foreground#5B6268
  • peekViewTitleLabel.foreground#2B2F33
  • pickerGroup.border#E2E2DE
  • pickerGroup.foreground#D95400
  • problemsErrorIcon.foreground#9F2723
  • problemsInfoIcon.foreground#005C75
  • problemsWarningIcon.foreground#6B5000
  • progressBar.background#FF6700
  • quickInput.background#FFFFFF
  • quickInput.foreground#2B2F33
  • quickInputList.focusBackground#D7EDF6
  • quickInputList.focusForeground#1B2A2F
  • scrollbar.shadow#00000012
  • scrollbarSlider.activeBackground#8A919977
  • scrollbarSlider.background#8A919933
  • scrollbarSlider.hoverBackground#8A919955
  • settings.headerForeground#2B2F33
  • settings.modifiedItemIndicator#FF6700
  • sideBar.background#BAC0C3
  • sideBar.border#E2E2DE
  • sideBar.foreground#3A3F44
  • sideBarSectionHeader.background#BAC0C3
  • sideBarSectionHeader.border#E2E2DE
  • sideBarSectionHeader.foreground#3A3F44
  • sideBarTitle.foreground#FF6700
  • statusBar.background#AEB5B9
  • statusBar.border#E2E2DE
  • statusBar.debuggingBackground#FF6700
  • statusBar.debuggingForeground#2B2F33
  • statusBar.foreground#7A2F00
  • statusBar.noFolderBackground#B7BDC0
  • statusBarItem.activeBackground#00000018
  • statusBarItem.hoverBackground#00000010
  • statusBarItem.prominentForeground#7A2F00
  • statusBarItem.remoteForeground#7A2F00
  • tab.activeBackground#C4C9CC
  • tab.activeBorder#C4C9CC
  • tab.activeBorderTop#FF6700
  • tab.activeForeground#2B2F33
  • tab.border#E2E2DE
  • tab.inactiveBackground#B6BBBE
  • tab.inactiveForeground#60666C
  • tab.unfocusedActiveBorderTop#B9BFC4
  • tab.unfocusedActiveForeground#5B6268
  • tab.unfocusedInactiveForeground#61676F
  • terminal.ansiBlack#2B2F33
  • terminal.ansiBlue#15588B
  • terminal.ansiBrightBlack#61676F
  • terminal.ansiBrightBlue#246A98
  • terminal.ansiBrightCyan#2C6F67
  • terminal.ansiBrightGreen#37713F
  • terminal.ansiBrightMagenta#AC3A6D
  • terminal.ansiBrightRed#BD2E25
  • terminal.ansiBrightWhite#2B2F33
  • terminal.ansiBrightYellow#825F08
  • terminal.ansiCyan#225E55
  • terminal.ansiGreen#2A5F32
  • terminal.ansiMagenta#9E1F58
  • terminal.ansiRed#9F2723
  • terminal.ansiWhite#4F555F
  • terminal.ansiYellow#6B5000
  • terminal.background#C4C9CC
  • terminal.foreground#2B2F33
  • terminal.tab.activeBorder#FF6700
  • terminalCommandDecoration.defaultBackground#8A9199
  • terminalCommandDecoration.errorBackground#C4302B
  • terminalCommandDecoration.successBackground#3D8A48
  • textBlockQuote.background#00000010
  • textBlockQuote.border#D9770680
  • textLink.activeForeground#004E65
  • textLink.foreground#005C75
  • textPreformat.foreground#B42364
  • titleBar.activeBackground#AEB5B9
  • titleBar.activeForeground#2B2F33
  • titleBar.border#E2E2DE
  • titleBar.inactiveBackground#B7BDC0
  • titleBar.inactiveForeground#61676F
  • tree.indentGuidesStroke#C9C9C3
  • welcomePage.progress.background#ECEFED
  • welcomePage.progress.foreground#FF6700
  • welcomePage.tileBackground#AEB5B9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#50555Aitalic
keyword, storage.type, storage.modifier, keyword.control#005C75
entity.name.function, support.function, meta.function-call#2B2F33
variable, variable.other, meta.object-literal.key#2B2F33
string, string.quoted#2A5F32
constant.numeric, constant.language#674298
constant, variable.language#7D3982
entity.name.type, entity.name.class, support.type#225E55
punctuation, punctuation.definition, punctuation.section#9E1F58
invalid, invalid.illegal#9F2723
Elite by Elite Konsulting - VS Code Theme