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#2a5070
  • activityBar.border#1e4060
  • activityBar.foreground#e8f0f8
  • activityBar.inactiveForeground#8ab0d0
  • activityBarBadge.background#e05050
  • activityBarBadge.foreground#ffffff
  • badge.background#e05050
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1c2e3e
  • breadcrumb.focusForeground#1870a0
  • breadcrumb.foreground#7090a8
  • button.background#1870a0
  • button.foreground#ffffff
  • button.hoverBackground#106088
  • debugIcon.breakpointForeground#e05050
  • debugIcon.startForeground#2a7848
  • debugIcon.stopForeground#e05050
  • descriptionForeground#607080
  • diffEditor.insertedTextBackground#2a784815
  • diffEditor.removedTextBackground#c0303015
  • dropdown.background#ffffff
  • dropdown.border#c0d0e0
  • dropdown.foreground#1c2e3e
  • editor.background#f0f4f8
  • editor.findMatchBackground#f0d06080
  • editor.findMatchHighlightBackground#f0d06040
  • editor.foreground#1c2e3e
  • editor.lineHighlightBackground#e4ecf4
  • editor.lineHighlightBorder#d0dce8
  • editor.selectionBackground#1870a030
  • editor.selectionHighlightBackground#1870a018
  • editorBracketHighlight.foreground1#1870a0
  • editorBracketHighlight.foreground2#8a6800
  • editorBracketHighlight.foreground3#c03030
  • editorBracketHighlight.foreground4#2a7848
  • editorBracketMatch.background#1870a020
  • editorBracketMatch.border#1870a0
  • editorCursor.foreground#1870a0
  • editorError.foreground#c03030
  • editorGroupHeader.tabsBackground#e0e8f0
  • editorGutter.addedBackground#2a784899
  • editorGutter.deletedBackground#c0303099
  • editorGutter.modifiedBackground#8a680099
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#c0d0e0
  • editorIndentGuide.activeBackground#1870a055
  • editorIndentGuide.background#d0dce8
  • editorInfo.foreground#1870a0
  • editorLineNumber.activeForeground#1870a0
  • editorLineNumber.foreground#b0c0d0
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#c0d0e0
  • editorSuggestWidget.highlightForeground#1870a0
  • editorSuggestWidget.selectedBackground#1870a018
  • editorWarning.foreground#a08000
  • editorWidget.background#ffffff
  • editorWidget.border#c0d0e0
  • errorForeground#c03030
  • focusBorder#1870a0
  • foreground#1c2e3e
  • gitDecoration.addedResourceForeground#2a7848
  • gitDecoration.conflictingResourceForeground#a08000
  • gitDecoration.deletedResourceForeground#c03030
  • gitDecoration.ignoredResourceForeground#a0b0c0
  • gitDecoration.modifiedResourceForeground#8a6800
  • gitDecoration.untrackedResourceForeground#1870a0
  • icon.foreground#607080
  • input.background#ffffff
  • input.border#c0d0e0
  • input.foreground#1c2e3e
  • inputValidation.errorBorder#e05050
  • inputValidation.infoBorder#1870a0
  • inputValidation.warningBorder#a08000
  • list.activeSelectionBackground#1870a020
  • list.activeSelectionForeground#1c2e3e
  • list.errorForeground#c03030
  • list.highlightForeground#1870a0
  • list.hoverBackground#e4ecf4
  • list.inactiveSelectionBackground#dce6f0
  • list.warningForeground#8a6800
  • menu.background#ffffff
  • menu.border#c0d0e0
  • menu.foreground#1c2e3e
  • menu.selectionBackground#1870a020
  • menu.selectionForeground#1c2e3e
  • minimap.background#f0f4f8
  • minimap.errorHighlight#e05050
  • minimap.findMatchHighlight#f0d060
  • minimap.selectionHighlight#1870a0
  • notificationLink.foreground#1870a0
  • notifications.background#ffffff
  • notifications.foreground#1c2e3e
  • notificationsErrorIcon.foreground#e05050
  • notificationsInfoIcon.foreground#1870a0
  • notificationsWarningIcon.foreground#a08000
  • notificationToast.border#1870a0
  • panel.background#e8eef4
  • panel.border#c8d8e8
  • panelTitle.activeBorder#1870a0
  • panelTitle.activeForeground#1c2e3e
  • panelTitle.inactiveForeground#7090a8
  • peekView.border#1870a0
  • peekViewEditor.background#f5f8fc
  • peekViewResult.background#f0f4f8
  • peekViewTitle.background#e0e8f0
  • progressBar.background#1870a0
  • quickInput.background#ffffff
  • quickInput.foreground#1c2e3e
  • quickInputList.focusBackground#1870a020
  • scrollbarSlider.activeBackground#1870a060
  • scrollbarSlider.background#00000010
  • scrollbarSlider.hoverBackground#1870a030
  • selection.background#1870a040
  • settings.headerForeground#1870a0
  • settings.modifiedItemIndicator#1870a0
  • sideBar.background#e8eef4
  • sideBar.border#c8d8e8
  • sideBar.foreground#2c4058
  • sideBarSectionHeader.background#dce6f0
  • sideBarSectionHeader.border#c0d0e0
  • sideBarSectionHeader.foreground#1870a0
  • sideBarTitle.foreground#1870a0
  • statusBar.background#2a5070
  • statusBar.border#1e4060
  • statusBar.debuggingBackground#e05050
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#e8f0f8
  • statusBar.noFolderBackground#607080
  • statusBar.noFolderForeground#e8f0f8
  • statusBarItem.hoverBackground#ffffff18
  • statusBarItem.remoteBackground#1870a0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#f0f4f8
  • tab.activeBorder#1870a0
  • tab.activeBorderTop#1870a0
  • tab.activeForeground#1c2e3e
  • tab.border#c8d8e8
  • tab.hoverBackground#e8eef4
  • tab.inactiveBackground#e0e8f0
  • tab.inactiveForeground#7090a8
  • terminal.ansiBlack#2c4058
  • terminal.ansiBlue#1870a0
  • terminal.ansiBrightBlack#607080
  • terminal.ansiBrightBlue#2888c0
  • terminal.ansiBrightCyan#2890a0
  • terminal.ansiBrightGreen#38905c
  • terminal.ansiBrightMagenta#a060b8
  • terminal.ansiBrightRed#e05050
  • terminal.ansiBrightWhite#1c2e3e
  • terminal.ansiBrightYellow#a08000
  • terminal.ansiCyan#187888
  • terminal.ansiGreen#2a7848
  • terminal.ansiMagenta#8848a0
  • terminal.ansiRed#c03030
  • terminal.ansiWhite#a0b0c0
  • terminal.ansiYellow#8a6800
  • terminal.background#f0f4f8
  • terminal.foreground#1c2e3e
  • terminalCursor.foreground#1870a0
  • titleBar.activeBackground#e0e8f0
  • titleBar.activeForeground#1c2e3e
  • titleBar.border#c8d8e8
  • titleBar.inactiveBackground#e8eef4
  • titleBar.inactiveForeground#7090a8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8898a8italic
variable#1c2e3e
variable.language#1870a0italic
variable.parameter#2c4058
invalid, invalid.illegal#c03030bold
keyword, storage.type, storage.modifier#1870a0bold
keyword.control#2888c0bold
keyword.operator#c03030
punctuation#7090a8
entity.name.tag#c03030
entity.other.attribute-name#8a6800italic
entity.name.function, variable.function, support.function#0c1e2ebold
entity.name, entity.name.class, support.class#187888bold
support.type, entity.name.type#1870a0
constant.numeric#8848a0
constant.language#c03030bold
constant, support.constant#8a6800
string#2a7848
constant.character.escape, string.regexp#1870a0
string.template#38905c
source.css support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#8848a0
support.constant.property-value#187888
entity.other.attribute-name.class.css#8a6800
meta.decorator#a08000italic
keyword.control.import, keyword.control.export, keyword.control.from#1870a0bold
markup.inserted#2a7848
markup.deleted#c03030
markup.changed#8a6800
*url*, *link*, *uri*#1870a0underline
markup.heading#1870a0bold
markup.bold#0c1e2ebold
markup.italic#1870a0italic
markup.inline.raw.markdown, markup.raw.block#2a7848
source.json meta.structure.dictionary.json support.type.property-name.json#1870a0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8a6800
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#2a7848