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#88C0D0
  • activityBar.background#f2f2f2
  • activityBar.foreground#5C6165
  • activityBar.inactiveForeground#5c616580
  • activityBarBadge.background#88C0D0
  • activityBarBadge.foreground#ffffff
  • button.background#88C0D0
  • button.foreground#ffffff
  • button.secondaryBackground#fff
  • debugToolBar.background#f2f2f2
  • diffEditor.insertedLineBackground#8aca6b1a
  • diffEditor.insertedTextBackground#8aca6b1a
  • diffEditor.removedLineBackground#ff8f9b1a
  • diffEditor.removedTextBackground#ff8f9b1a
  • editor.background#ffffff
  • editor.foreground#5C6165
  • editor.inactiveSelectionBackground#88c0d01a
  • editor.lineHighlightBackground#5c61650d
  • editor.lineHighlightBorder#5c61650d
  • editor.linkedEditingBackground#88c0d01a
  • editor.selectionBackground#88c0d033
  • editor.wordHighlightStrongBackground#88c0d01a
  • editor.wordHighlightTextBackground#88c0d01a
  • editor.wordHighlightTextBorder#88c0d01a
  • editorActionList.background#ffffff
  • editorBracketHighlight.foreground1#50afce
  • editorBracketHighlight.foreground2#d59225
  • editorBracketHighlight.foreground3#50afce
  • editorBracketHighlight.foreground4#d59225
  • editorBracketHighlight.foreground5#50afce
  • editorBracketHighlight.foreground6#d59225
  • editorCursor.background#ffffff
  • editorCursor.foreground#88C0D0
  • editorError.foreground#ff8491
  • editorGroupHeader.tabsBackground#f2f2f2
  • editorGutter.addedBackground#8aca6b
  • editorGutter.deletedBackground#ff8f9b
  • editorGutter.modifiedBackground#88c0d0
  • editorIndentGuide.activeBackground1#5c61654d
  • editorIndentGuide.background1#5c61651a
  • editorInfo.foreground#8ab8ec
  • editorLineNumber.activeForeground#5c616580
  • editorLineNumber.foreground#5c616527
  • editorPane.background#ffffff
  • editorStickyScroll.shadow#ccc
  • editorWarning.foreground#ef9f65
  • editorWidget.background#f2f2f2
  • errorForeground#ff8491
  • errorLens.errorBackground#ff84911a
  • errorLens.errorForeground#ff8491
  • errorLens.warningBackground#ef9f651a
  • errorLens.warningForeground#ef9f65
  • focusBorder#88C0D0
  • foreground#5C6165
  • gitDecoration.addedResourceForeground#8aca6b
  • gitDecoration.deletedResourceForeground#ff8f9b
  • gitDecoration.ignoredResourceForeground#5c616599
  • gitDecoration.modifiedResourceForeground#88c0d0
  • gitDecoration.renamedResourceForeground#8aca6b
  • gitDecoration.stageDeletedResourceForegroundred
  • gitDecoration.stageModifiedResourceForeground#88c0d0
  • gitDecoration.untrackedResourceForeground#8aca6b
  • list.activeSelectionBackground#5c61651a
  • list.activeSelectionForeground#5C6165
  • list.errorForeground#ff8491
  • list.focusBackground#5c61650d
  • list.focusForeground#373a3c
  • list.focusHighlightForeground#5C6165
  • list.highlightForeground#88C0D0
  • list.hoverBackground#eeefef
  • list.inactiveSelectionBackground#5c61650d
  • list.warningForeground#ef9f65
  • notifications.background#f2f2f2
  • notificationsInfoIcon.foreground#8ab8ec
  • panel.background#ffffff
  • panelTitle.activeBorder#88C0D0
  • panelTitle.activeForeground#88C0D0
  • panelTitle.inactiveForeground#5C6165
  • peekView.border#88C0D0
  • peekViewEditor.background#d9d9d9
  • peekViewResult.background#d9d9d9
  • pickerGroup.foreground#88C0D0
  • quickInput.background#ffffff
  • quickInputList.focusBackground#88c0d033
  • quickInputList.focusForeground#5C6165
  • scrollbar.shadow#ccc
  • selection.background#88c0d033
  • sideBar.background#f2f2f2
  • sideBarSectionHeader.background#e8e8e8
  • sideBarTitle.foreground#5C6165
  • statusBar.background#f2f2f2
  • statusBar.debuggingBackground#88C0D0
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#5C6165
  • statusBar.noFolderBackground#e7edee
  • statusBarItem.errorBackground#ff8491
  • statusBarItem.remoteBackground#88C0D0
  • statusBarItem.remoteForeground#f2f2f2
  • tab.activeBackground#ffffff
  • tab.border#00000000
  • tab.inactiveBackground#f2f2f2
  • tab.selectedBackground#88C0D0
  • terminal.ansiBlack#939393
  • terminal.ansiBlue#7697b3
  • terminal.ansiBrightBlack#939393
  • terminal.ansiBrightBlue#7598b3
  • terminal.ansiBrightCyan#6e9e97
  • terminal.ansiBrightGreen#919b47
  • terminal.ansiBrightMagenta#a486af
  • terminal.ansiBrightRed#d6706e
  • terminal.ansiBrightWhite#939393
  • terminal.ansiBrightYellow#cb7d43
  • terminal.ansiCyan#699bb1
  • terminal.ansiGreen#9b9746
  • terminal.ansiMagenta#a487ad
  • terminal.ansiRed#d7706f
  • terminal.ansiWhite#8f939a
  • terminal.ansiYellow#b48c38
  • textLink.foreground#7ca5d4
  • titleBar.activeBackground#f2f2f2
  • titleBar.inactiveBackground#f2f2f2
  • toolbar.activeBackground#f2f2f2
  • tree.indentGuidesStroke#5c616533

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#bdc1c8
keyword, storage.modifier#a25cb5
support.class#d59225
storage.type.primitive#a25cb5
string#85B300
variable#d59225
entity.name, support.function#50afce
markup.heading.markdown#50afcebold
text.html.markdown markup.inline.raw#d59225
markup.underline.link#85B300
markup.list punctuation.definition.list.begin#d59225
storage.type.annotation#d59225
meta.tag.attributes, constant.numeric#50afce