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#ffffff
  • activityBar.border#9f9f9f
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#595959
  • activityBarBadge.background#0031a9
  • activityBarBadge.foreground#ffffff
  • badge.background#0031a9
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#595959
  • button.background#c4c4c4
  • button.foreground#000000
  • button.hoverBackground#9f9f9f
  • diffEditor.insertedLineBackground#c1f2d120
  • diffEditor.insertedTextBackground#c1f2d140
  • diffEditor.removedLineBackground#ffd8d520
  • diffEditor.removedTextBackground#ffd8d540
  • dropdown.background#f2f2f2
  • dropdown.border#9f9f9f
  • dropdown.foreground#000000
  • editor.background#ffffff
  • editor.findMatchBackground#f3d000
  • editor.findMatchHighlightBackground#a4d5f999
  • editor.foreground#000000
  • editor.lineHighlightBackground#dae5ec
  • editor.selectionBackground#bdbdbd
  • editor.selectionForeground#000000
  • editor.wordHighlightBackground#c0deff99
  • editor.wordHighlightStrongBackground#c0deff99
  • editorBracketMatch.background#5fcfff
  • editorBracketMatch.border#5fcfff
  • editorCursor.foreground#000000
  • editorError.foreground#d00000
  • editorGroupHeader.tabsBackground#dfdfdf
  • editorGroupHeader.tabsBorder#9f9f9f
  • editorHoverWidget.background#f2f2f2
  • editorHoverWidget.border#9f9f9f
  • editorIndentGuide.activeBackground1#595959
  • editorIndentGuide.background1#9f9f9f
  • editorInfo.foreground#005f5f
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#595959
  • editorSuggestWidget.background#f2f2f2
  • editorSuggestWidget.border#9f9f9f
  • editorSuggestWidget.selectedBackground#c4c4c4
  • editorWarning.foreground#808000
  • editorWhitespace.foreground#9f9f9f
  • editorWidget.background#f2f2f2
  • editorWidget.border#9f9f9f
  • gitDecoration.addedResourceForeground#005000
  • gitDecoration.conflictingResourceForeground#7f0000
  • gitDecoration.deletedResourceForeground#8f1313
  • gitDecoration.ignoredResourceForeground#595959
  • gitDecoration.modifiedResourceForeground#553d00
  • gitDecoration.untrackedResourceForeground#005077
  • input.background#f2f2f2
  • input.border#9f9f9f
  • input.foreground#000000
  • input.placeholderForeground#595959
  • inputOption.activeBorder#0031a9
  • list.activeSelectionBackground#c4c4c4
  • list.activeSelectionForeground#000000
  • list.focusBackground#c4c4c4
  • list.focusForeground#000000
  • list.hoverBackground#b2e4dc
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#e0e0e0
  • list.inactiveSelectionForeground#000000
  • notificationLink.foreground#3548cf
  • notifications.background#f2f2f2
  • notifications.border#9f9f9f
  • notifications.foreground#000000
  • panel.background#f2f2f2
  • panel.border#9f9f9f
  • panelTitle.activeBorder#0031a9
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#595959
  • peekView.border#9f9f9f
  • peekViewEditor.background#f2f2f2
  • peekViewResult.background#f2f2f2
  • peekViewTitle.background#e0e0e0
  • progressBar.background#0031a9
  • scrollbar.shadow#ffffff
  • scrollbarSlider.activeBackground#595959
  • scrollbarSlider.background#c4c4c4
  • scrollbarSlider.hoverBackground#9f9f9f
  • sideBar.background#f2f2f2
  • sideBar.border#9f9f9f
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#c8c8c8
  • statusBar.border#5a5a5a
  • statusBar.debuggingBackground#ef7969
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#c8c8c8
  • tab.activeBackground#ffffff
  • tab.activeForeground#000000
  • tab.border#9f9f9f
  • tab.inactiveBackground#c2c2c2
  • tab.inactiveForeground#595959
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0031a9
  • terminal.ansiBrightBlack#595959
  • terminal.ansiBrightBlue#3548cf
  • terminal.ansiBrightCyan#005f5f
  • terminal.ansiBrightGreen#00663f
  • terminal.ansiBrightMagenta#531ab6
  • terminal.ansiBrightRed#972500
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#884900
  • terminal.ansiCyan#005e8b
  • terminal.ansiGreen#006800
  • terminal.ansiMagenta#721045
  • terminal.ansiRed#a60000
  • terminal.ansiWhite#a6a6a6
  • terminal.ansiYellow#6f5500
  • terminal.background#ffffff
  • terminal.foreground#000000
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#9f9f9f
  • titleBar.inactiveBackground#f2f2f2
  • titleBar.inactiveForeground#595959

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#595959
string, string.quoted, string.template#3548cf
constant.numeric, constant.language, constant.character#000000
constant.other#0000b0
keyword, storage.type, storage.modifier#531ab6
keyword.control, keyword.operator.new#531ab6bold
variable, variable.other#005e8b
variable.parameter, variable.language#7a4f2f
entity.name.function, support.function#721045
entity.name.type, entity.name.class, support.type, support.class#005f5f
entity.name.tag#531ab6
entity.other.attribute-name#005e8b
support.constant, support.variable#8f0075
meta.preprocessor, entity.name.function.preprocessor#a0132f
invalid, invalid.illegal#000000
invalid.deprecated#000000
markup.heading#005f5fbold
markup.bold#000000bold
markup.italic#000000italic
markup.underline.link#3548cfunderline
markup.inline.raw, markup.fenced_code#005f5f
markup.quote#005077
punctuation.definition.list#000000