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#84c4df
  • activityBar.background#202328
  • activityBar.foreground#91a2a6
  • activityBar.inactiveForeground#91a2a680
  • activityBarBadge.background#84c4df
  • activityBarBadge.foreground#24272d
  • button.background#84c4df
  • button.foreground#24272d
  • button.secondaryBackground#393c42
  • debugToolBar.background#202328
  • diffEditor.insertedLineBackground#b9b56633
  • diffEditor.insertedTextBackground#b9b56633
  • diffEditor.removedLineBackground#ff818e33
  • diffEditor.removedTextBackground#ff818e33
  • editor.background#24272d
  • editor.foreground#91a2a6
  • editor.inactiveSelectionBackground#84c4df1a
  • editor.lineHighlightBackground#91a2a60d
  • editor.lineHighlightBorder#91a2a60d
  • editor.linkedEditingBackground#84c4df1a
  • editor.selectionBackground#84c4df33
  • editor.wordHighlightStrongBackground#84c4df1a
  • editor.wordHighlightTextBackground#84c4df1a
  • editor.wordHighlightTextBorder#84c4df1a
  • editorActionList.background#24272d
  • editorBracketHighlight.foreground1#7FB2C7
  • editorBracketHighlight.foreground2#EBD2A7
  • editorBracketHighlight.foreground3#7FB2C7
  • editorBracketHighlight.foreground4#EBD2A7
  • editorBracketHighlight.foreground5#7FB2C7
  • editorBracketHighlight.foreground6#EBD2A7
  • editorCursor.background#24272d
  • editorCursor.foreground#84c4df
  • editorError.foreground#FA7583
  • editorGroupHeader.tabsBackground#202328
  • editorGutter.addedBackground#b9b566
  • editorGutter.deletedBackground#ff818e
  • editorGutter.modifiedBackground#7cbcd6
  • editorIndentGuide.activeBackground1#91a2a64d
  • editorIndentGuide.background1#91a2a61a
  • editorInfo.foreground#9BCAFF
  • editorLineNumber.activeForeground#91a2a680
  • editorLineNumber.foreground#91a2a627
  • editorPane.background#24272d
  • editorStickyScroll.shadow#1c1f24
  • editorWarning.foreground#EBD2A7
  • editorWidget.background#202328
  • errorForeground#FA7583
  • errorLens.errorBackground#fa75831a
  • errorLens.errorForeground#FA7583
  • errorLens.warningBackground#ebd2a71a
  • errorLens.warningForeground#EBD2A7
  • focusBorder#84c4df
  • foreground#91a2a6
  • gitDecoration.addedResourceForeground#b9b566
  • gitDecoration.deletedResourceForeground#ff818e
  • gitDecoration.ignoredResourceForeground#91a2a699
  • gitDecoration.modifiedResourceForeground#7cbcd6
  • gitDecoration.renamedResourceForeground#b9b566
  • gitDecoration.stageDeletedResourceForegroundred
  • gitDecoration.stageModifiedResourceForeground#7cbcd6
  • gitDecoration.untrackedResourceForeground#b9b566
  • list.activeSelectionBackground#91a2a61a
  • list.activeSelectionForeground#91a2a6
  • list.errorForeground#FA7583
  • list.focusBackground#91a2a60d
  • list.focusForeground#bdc7c9
  • list.focusHighlightForeground#91a2a6
  • list.highlightForeground#84c4df
  • list.hoverBackground#2e3339
  • list.inactiveSelectionBackground#91a2a60d
  • list.warningForeground#EBD2A7
  • notifications.background#202328
  • notificationsInfoIcon.foreground#9BCAFF
  • panel.background#24272d
  • panelTitle.activeBorder#84c4df
  • panelTitle.activeForeground#84c4df
  • panelTitle.inactiveForeground#91a2a6
  • peekView.border#84c4df
  • peekViewEditor.background#1c1f24
  • peekViewResult.background#1c1f24
  • pickerGroup.foreground#84c4df
  • quickInput.background#24272d
  • quickInputList.focusBackground#84c4df33
  • quickInputList.focusForeground#91a2a6
  • scrollbar.shadow#1c1f24
  • selection.background#84c4df33
  • sideBar.background#202328
  • sideBarSectionHeader.background#1e2126
  • sideBarTitle.foreground#91a2a6
  • statusBar.background#202328
  • statusBar.debuggingBackground#84c4df
  • statusBar.debuggingForeground#24272d
  • statusBar.foreground#91a2a6
  • statusBar.noFolderBackground#2a333a
  • statusBarItem.errorBackground#FA7583
  • statusBarItem.remoteBackground#84c4df
  • statusBarItem.remoteForeground#202328
  • tab.activeBackground#24272d
  • tab.border#00000000
  • tab.inactiveBackground#202328
  • tab.selectedBackground#84c4df
  • terminal.ansiBlack#b1b1b1
  • terminal.ansiBlue#94b6d2
  • terminal.ansiBrightBlack#b1b1b1
  • terminal.ansiBrightBlue#93b6d3
  • terminal.ansiBrightCyan#8cbdb6
  • terminal.ansiBrightGreen#b0ba66
  • terminal.ansiBrightMagenta#c3a4cf
  • terminal.ansiBrightRed#f98f8c
  • terminal.ansiBrightWhite#b1b1b1
  • terminal.ansiBrightYellow#bdb288
  • terminal.ansiCyan#87bad1
  • terminal.ansiGreen#bab666
  • terminal.ansiMagenta#c3a5cc
  • terminal.ansiRed#f98f8d
  • terminal.ansiWhite#aeb2b9
  • terminal.ansiYellow#c8b05e
  • textLink.foreground#8bb5e5
  • titleBar.activeBackground#202328
  • titleBar.inactiveBackground#202328
  • toolbar.activeBackground#202328
  • tree.indentGuidesStroke#91a2a633

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#474c54
keyword, storage.modifier#B08CBA
support.class#EBD2A7
storage.type.primitive#B08CBA
string#BDB969
variable#EBD2A7
entity.name, support.function#7FB2C7
markup.heading.markdown#7FB2C7bold
text.html.markdown markup.inline.raw#EBD2A7
markup.underline.link#BDB969
markup.list punctuation.definition.list.begin#EBD2A7
storage.type.annotation#EBD2A7
meta.tag.attributes, constant.numeric#7FB2C7