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#000000
  • activityBar.border#646464
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#989898
  • activityBarBadge.background#2fafff
  • activityBarBadge.foreground#ffffff
  • badge.background#2fafff
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#989898
  • button.background#535353
  • button.foreground#ffffff
  • button.hoverBackground#646464
  • diffEditor.insertedLineBackground#00381f40
  • diffEditor.insertedTextBackground#00381f80
  • diffEditor.removedLineBackground#4f111940
  • diffEditor.removedTextBackground#4f111980
  • dropdown.background#1e1e1e
  • dropdown.border#646464
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.findMatchBackground#7a6100
  • editor.findMatchHighlightBackground#2266ae99
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#2f3849
  • editor.selectionBackground#5a5a5a
  • editor.selectionForeground#ffffff
  • editor.wordHighlightBackground#2f447f99
  • editor.wordHighlightStrongBackground#2f447f99
  • editorBracketMatch.background#2f7f9f
  • editorBracketMatch.border#2f7f9f
  • editorCursor.foreground#ffffff
  • editorError.foreground#ff5f5f
  • editorGroupHeader.tabsBackground#313131
  • editorGroupHeader.tabsBorder#646464
  • editorHoverWidget.background#1e1e1e
  • editorHoverWidget.border#646464
  • editorIndentGuide.activeBackground1#989898
  • editorIndentGuide.background1#646464
  • editorInfo.foreground#00c06f
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#989898
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.border#646464
  • editorSuggestWidget.selectedBackground#535353
  • editorWarning.foreground#fec43f
  • editorWhitespace.foreground#646464
  • editorWidget.background#1e1e1e
  • editorWidget.border#646464
  • gitDecoration.addedResourceForeground#a0e0a0
  • gitDecoration.conflictingResourceForeground#ff9580
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#989898
  • gitDecoration.modifiedResourceForeground#efef80
  • gitDecoration.untrackedResourceForeground#9ac8e0
  • input.background#1e1e1e
  • input.border#646464
  • input.foreground#ffffff
  • input.placeholderForeground#989898
  • inputOption.activeBorder#2fafff
  • list.activeSelectionBackground#535353
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#535353
  • list.focusForeground#ffffff
  • list.hoverBackground#45605e
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#303030
  • list.inactiveSelectionForeground#ffffff
  • notificationLink.foreground#79a8ff
  • notifications.background#1e1e1e
  • notifications.border#646464
  • notifications.foreground#ffffff
  • panel.background#1e1e1e
  • panel.border#646464
  • panelTitle.activeBorder#2fafff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#989898
  • peekView.border#646464
  • peekViewEditor.background#1e1e1e
  • peekViewResult.background#1e1e1e
  • peekViewTitle.background#303030
  • progressBar.background#2fafff
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#989898
  • scrollbarSlider.background#535353
  • scrollbarSlider.hoverBackground#646464
  • sideBar.background#1e1e1e
  • sideBar.border#646464
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#303030
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#505050
  • statusBar.border#959595
  • statusBar.debuggingBackground#b52c2c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#505050
  • tab.activeBackground#000000
  • tab.activeForeground#ffffff
  • tab.border#646464
  • tab.inactiveBackground#545454
  • tab.inactiveForeground#989898
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2fafff
  • terminal.ansiBrightBlack#595959
  • terminal.ansiBrightBlue#79a8ff
  • terminal.ansiBrightCyan#6ae4b9
  • terminal.ansiBrightGreen#00c06f
  • terminal.ansiBrightMagenta#b6a0ff
  • terminal.ansiBrightRed#ff6b55
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fec43f
  • terminal.ansiCyan#00d3d0
  • terminal.ansiGreen#44bc44
  • terminal.ansiMagenta#feacd0
  • terminal.ansiRed#ff5f59
  • terminal.ansiWhite#a6a6a6
  • terminal.ansiYellow#d0bc00
  • terminal.background#000000
  • terminal.foreground#ffffff
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffff
  • titleBar.border#646464
  • titleBar.inactiveBackground#1e1e1e
  • titleBar.inactiveForeground#989898

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#989898
string, string.quoted, string.template#79a8ff
constant.numeric, constant.language, constant.character#ffffff
constant.other#00bcff
keyword, storage.type, storage.modifier#b6a0ff
keyword.control, keyword.operator.new#b6a0ffbold
variable, variable.other#00d3d0
variable.parameter, variable.language#d2b580
entity.name.function, support.function#feacd0
entity.name.type, entity.name.class, support.type, support.class#00bcff
entity.name.tag#b6a0ff
entity.other.attribute-name#00d3d0
support.constant, support.variable#f78fe7
meta.preprocessor, entity.name.function.preprocessor#ff7f86
invalid, invalid.illegal#ffffff
invalid.deprecated#ffffff
markup.heading#00bcffbold
markup.bold#ffffffbold
markup.italic#ffffffitalic
markup.underline.link#79a8ffunderline
markup.inline.raw, markup.fenced_code#00bcff
markup.quote#9ac8e0
punctuation.definition.list#ffffff