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.

  • actionBar.toggledBackground#dddddd
  • activityBar.activeBorder#005fb8
  • activityBar.background#f8f8f8
  • activityBar.foreground#005fb8
  • activityBar.inactiveForeground#616161
  • activityBarBadge.background#005fb8
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBorder#ffffff00
  • activityBarTop.foreground#005fb8
  • activityBarTop.inactiveForeground#616161
  • badge.background#cccccc
  • badge.foreground#2b2b2b
  • button.background#005fb8
  • button.border#0000001a
  • button.foreground#ffffff
  • button.hoverBackground#0258a8
  • button.secondaryBackground#e5e5e5
  • button.secondaryForeground#2b2b2b
  • button.secondaryHoverBackground#cccccc
  • chat.editedFileForeground#895503
  • chat.slashCommandBackground#d2ecff
  • chat.slashCommandForeground#306ca2
  • checkbox.background#f8f8f8
  • checkbox.border#cecece
  • commandCenter.border#ffffff00
  • commandCenter.inactiveBorder#ffffff00
  • descriptionForeground#2b2b2b
  • diffEditor.unchangedRegionBackground#f8f8f8
  • dropdown.background#ffffff
  • dropdown.border#cecece
  • dropdown.foreground#2b2b2b
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.foreground#2b2b2b
  • editor.inactiveSelectionBackground#e5ebf180
  • editor.lineHighlightBackground#edf5fe
  • editor.lineHighlightBorder#edf5fe
  • editor.selectionHighlightBackground#add6ff80
  • editorGroup.border#e5e5e5
  • editorGroupHeader.tabsBackground#ffffff
  • editorGroupHeader.tabsBorder#e5e5e5
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#005fb8
  • editorIndentGuide.activeBackground1#939393
  • editorIndentGuide.background1#d3d3d3
  • editorLineNumber.activeForeground#171184
  • editorLineNumber.foreground#9098a4
  • editorOverviewRuler.border#e5e5e5
  • editorStickyScroll.border#e5e5e5
  • editorStickyScroll.shadow#00000000
  • editorSuggestWidget.background#f8f8f8
  • editorWidget.background#f8f8f8
  • errorForeground#f85149
  • focusBorder#238bec
  • foreground#2b2b2b
  • icon.foreground#2b2b2b
  • input.background#ffffff
  • input.border#cecece
  • input.foreground#2b2b2b
  • input.placeholderForeground#767676
  • inputOption.activeBackground#bed6ed
  • inputOption.activeBorder#005fb8
  • inputOption.activeForeground#000000
  • keybindingLabel.foreground#2b2b2b
  • list.activeSelectionBackground#e8e8e8
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.focusAndSelectionOutline#005fb8
  • list.hoverBackground#f2f2f2
  • menu.border#cecece
  • menu.selectionBackground#005fb8
  • menu.selectionForeground#ffffff
  • notebook.cellBorderColor#e5e5e5
  • notebook.selectedCellBackground#c8ddf150
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#2b2b2b
  • notifications.background#ffffff
  • notifications.border#e5e5e5
  • notifications.foreground#2b2b2b
  • panel.background#ffffff
  • panel.border#e5e5e5
  • panelInput.border#e5e5e5
  • panelTitle.activeBorder#00000000
  • panelTitle.activeForeground#005fb8
  • panelTitle.inactiveForeground#2b2b2b
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#e5e5e5
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#005fb8
  • quickInput.background#f8f8f8
  • quickInput.foreground#2b2b2b
  • scrollbar.shadow#00000000
  • searchEditor.textInputBorder#cecece
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#cecece
  • settings.headerForeground#1f1f1f
  • settings.modifiedItemIndicator#bb800966
  • settings.numberInputBorder#cecece
  • settings.textInputBorder#cecece
  • sideBar.background#f8f8f8
  • sideBar.border#e5e5e5
  • sideBar.foreground#2b2b2b
  • sideBarSectionHeader.background#f8f8f8
  • sideBarSectionHeader.border#e5e5e5
  • sideBarSectionHeader.foreground#2b2b2b
  • sideBarTitle.foreground#2b2b2b
  • statusBar.background#f8f8f8
  • statusBar.border#e5e5e5
  • statusBar.debuggingBackground#fd716c
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#005fb8
  • statusBar.foreground#2b2b2b
  • statusBar.noFolderBackground#f8f8f8
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.focusBorder#005fb8
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#f8f8f8
  • statusBarItem.remoteForeground#005fb8
  • tab.activeBackground#d9ebff
  • tab.activeBorder#f8f8f8
  • tab.activeBorderTop#d9ebff
  • tab.activeForeground#005fb8
  • tab.border#e5e5e5
  • tab.hoverBackground#d9ebff
  • tab.hoverForeground#238bec
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#868686
  • tab.lastPinnedBorder#d4d4d4
  • tab.selectedBackground#f8f8f8
  • tab.selectedBorderTop#d9ebff
  • tab.selectedForeground#333333b3
  • tab.unfocusedActiveBorder#f8f8f8
  • tab.unfocusedActiveBorderTop#ffffff00
  • tab.unfocusedHoverBackground#d9ebff
  • terminal.foreground#2b2b2b
  • terminal.inactiveSelectionBackground#e5ebf1
  • terminal.tab.activeBorder#005fb8
  • terminalCursor.foreground#005fb8
  • textBlockQuote.background#f8f8f8
  • textBlockQuote.border#e5e5e5
  • textCodeBlock.background#f8f8f8
  • textLink.activeForeground#005fb8
  • textLink.foreground#005fb8
  • textPreformat.background#0000001f
  • textPreformat.foreground#2b2b2b
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#f8f8f8
  • titleBar.activeForeground#5b5b5b
  • titleBar.border#e5e5e5
  • titleBar.inactiveBackground#f8f8f8
  • titleBar.inactiveForeground#8b949e
  • welcomePage.tileBackground#f3f3f3
  • widget.border#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f7c8f
string, punctuation.definition.string#d0402d
constant.numeric#272AD8
constant.other.placeholder, constant.character.escape#000000
keyword, keyword.operator.new, keyword.operator.wordlike, keyword.operator.logical.and, storage, variable.language, constant.language#AD3DA4bold
keyword.control.directive, punctuation.definition.directive#78492A
variable.parameter#057CB0
entity.name.type, entity.other.inherited-class, storage.type.haskell#23575C
keyword.type.cs, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go#4B21B0
entity.name.function, support.function#3E8087
support.function.builtin#804FB8
variable.other.property, variable.other.object.property, entity.name.variable.field#3E8087
entity.name.function.preprocessor#78492A
entity.name.tag#4B21B0
entity.other.attribute-name, support.type.property-name.css, support.type.property-name.media.css#804FB8
constant.other.color, support.constant.color, punctuation.definition.constant.css, keyword.other.unit#272AD8
support.constant.property-value, support.constant.font-name#AD3DA4bold
support.constant.media.css#3E8087
punctuation.definition.heading.markdown, meta.separator.markdown, punctuation.definition.markdown, punctuation.definition.list.begin.markdown, punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.raw.markdown, fenced_code.block.language.markdown, markup.heading.marker.asciidoc, markup.heading.block-attribute.asciidoc, punctuation.separator.asciidoc, constant.asciidoc, punctuation.definition.asciidoc#3E8087
markup.headingbold
markup.boldbold
markup.italicitalic
magit.header#4B21B0
magit.subheader#804FB8
magit.entity#272AD8
meta.diff.range.unified, punctuation.definition.range.diff#707F8C
markup.inserted, punctuation.definition.inserted#3E8087
markup.deleted, punctuation.definition.deleted#D12F1B
keyword.operator, punctuation, storage.modifier.pointer#000000
support.type.primitive, meta.type.annotation, meta.var-single-variable.expr, meta.var.expr, meta.block, meta.method.declaration#6C36A9
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#0451A5