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#1A1A20
  • activityBar.border#1A1A20
  • activityBar.foreground#F3F3F3
  • activityBar.inactiveForeground#7E7F88
  • activityBarBadge.background#FF8EA8
  • activityBarBadge.foreground#121216
  • badge.background#35A8E2
  • badge.foreground#121216
  • button.background#35A8E2
  • button.foreground#121216
  • button.hoverBackground#2B8EC0
  • button.secondaryBackground#22232A
  • button.secondaryForeground#F3F3F3
  • contrastBorder#22232A
  • dropdown.background#121216
  • dropdown.border#22232A
  • editor.background#121216
  • editor.findMatchBackground#FFD34D75
  • editor.findMatchHighlightBackground#FFD34D45
  • editor.foreground#F3F3F3
  • editor.inactiveSelectionBackground#35A8E238
  • editor.lineHighlightBackground#1A1A20
  • editor.selectionBackground#35A8E270
  • editor.selectionHighlightBackground#35A8E245
  • editor.wordHighlightBackground#FF8EA850
  • editorBracketMatch.background#35A8E240
  • editorBracketMatch.border#35A8E2
  • editorCursor.foreground#F3F3F3
  • editorGroup.border#22232A
  • editorGroupHeader.tabsBackground#111117
  • editorGutter.addedBackground#62B46E
  • editorGutter.deletedBackground#D06C6C
  • editorGutter.modifiedBackground#35A8E2
  • editorHoverWidget.background#1A1A20
  • editorHoverWidget.border#22232A
  • editorIndentGuide.activeBackground1#4E5058
  • editorIndentGuide.background1#22232A
  • editorLineNumber.activeForeground#B7B7B7
  • editorLineNumber.foreground#4E5058
  • editorRuler.foreground#22232A
  • editorSuggestWidget.background#1A1A20
  • editorSuggestWidget.border#22232A
  • editorSuggestWidget.selectedBackground#35A8E235
  • editorWhitespace.foreground#22232A
  • editorWidget.background#1A1A20
  • editorWidget.border#22232A
  • extensionButton.prominentBackground#35A8E2
  • extensionButton.prominentHoverBackground#2B8EC0
  • focusBorder#35A8E2
  • foreground#F3F3F3
  • input.background#121216
  • input.border#22232A
  • input.foreground#F3F3F3
  • input.placeholderForeground#7E7F88
  • list.activeSelectionBackground#22232A
  • list.activeSelectionForeground#F3F3F3
  • list.highlightForeground#35A8E2
  • list.hoverBackground#1A1A20
  • list.inactiveSelectionBackground#1A1A20
  • notificationCenterHeader.background#1A1A20
  • notifications.background#1A1A20
  • notifications.border#22232A
  • notifications.foreground#F3F3F3
  • panel.background#111117
  • panel.border#22232A
  • panelTitle.activeForeground#F3F3F3
  • panelTitle.inactiveForeground#C2C2C2
  • peekView.border#35A8E2
  • peekViewEditor.background#121216
  • peekViewResult.background#1A1A20
  • progressBar.background#35A8E2
  • scrollbarSlider.activeBackground#35A8E280
  • scrollbarSlider.background#22232A70
  • scrollbarSlider.hoverBackground#22232AA0
  • sideBar.background#111117
  • sideBar.border#22232A
  • sideBar.foreground#C2C2C2
  • sideBarSectionHeader.background#1A1A20
  • sideBarSectionHeader.foreground#F3F3F3
  • sideBarTitle.foreground#F3F3F3
  • statusBar.background#24242B
  • statusBar.debuggingBackground#D06C6C
  • statusBar.foreground#F3F3F3
  • statusBar.noFolderBackground#24242B
  • statusBarItem.hoverBackground#32323B
  • tab.activeBackground#121216
  • tab.activeBorderTop#35A8E2
  • tab.activeForeground#F3F3F3
  • tab.border#22232A
  • tab.inactiveBackground#1A1A20
  • tab.inactiveForeground#C2C2C2
  • terminal.ansiBlack#1A1A20
  • terminal.ansiBlue#35A8E2
  • terminal.ansiBrightBlack#4E5058
  • terminal.ansiBrightBlue#5BBBEA
  • terminal.ansiBrightCyan#63D5CF
  • terminal.ansiBrightGreen#81CA88
  • terminal.ansiBrightMagenta#FFAAC0
  • terminal.ansiBrightRed#E88787
  • terminal.ansiBrightWhite#F3F3F3
  • terminal.ansiBrightYellow#FFE37D
  • terminal.ansiCyan#37BFB6
  • terminal.ansiGreen#62B46E
  • terminal.ansiMagenta#FF8EA8
  • terminal.ansiRed#D06C6C
  • terminal.ansiWhite#C2C2C2
  • terminal.ansiYellow#FFD34D
  • terminal.background#121216
  • terminal.foreground#F3F3F3
  • titleBar.activeBackground#101015
  • titleBar.activeForeground#F3F3F3
  • titleBar.inactiveBackground#101015
  • titleBar.inactiveForeground#7E7F88

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F3F3F3
comment, punctuation.definition.comment#7E7F88italic
keyword, keyword.control, storage.type, storage.modifier#35A8E2bold
string, string.quoted#FF8EA8
constant.numeric, constant.language, constant.character#FFD34D
entity.name.function, support.function, meta.function-call#F3F3F3bold
variable, variable.parameter#F3F3F3
entity.name.type, entity.name.class, support.class, support.type#F3F3F3italic
entity.name.tag#FF8EA8
entity.other.attribute-name#35A8E2
keyword.operator, punctuation#B7B7B7
variable.other.property, meta.object-literal.key#37BFB6
markup.heading#F3F3F3bold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#D06C6C