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#00306640
  • diffEditor.insertedTextBackground#00306680
  • diffEditor.removedLineBackground#3d3d0040
  • diffEditor.removedTextBackground#3d3d0080
  • dropdown.background#1e1e1e
  • dropdown.border#646464
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.findMatchBackground#7a6100
  • editor.findMatchHighlightBackground#1640b099
  • 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#efef00
  • editorError.foreground#efef00
  • editorGroupHeader.tabsBackground#313131
  • editorGroupHeader.tabsBorder#646464
  • editorHoverWidget.background#1e1e1e
  • editorHoverWidget.border#646464
  • editorIndentGuide.activeBackground1#989898
  • editorIndentGuide.background1#646464
  • editorInfo.foreground#2fafff
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#989898
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.border#646464
  • editorSuggestWidget.selectedBackground#535353
  • editorWarning.foreground#cabf00
  • editorWhitespace.foreground#646464
  • editorWidget.background#1e1e1e
  • editorWidget.border#646464
  • gitDecoration.addedResourceForeground#c4d5ff
  • gitDecoration.conflictingResourceForeground#ff9580
  • gitDecoration.deletedResourceForeground#d4d48f
  • gitDecoration.ignoredResourceForeground#989898
  • gitDecoration.modifiedResourceForeground#e3cfff
  • 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#2a2a6a
  • statusBar.border#8080a7
  • statusBar.debuggingBackground#bf6000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f0f0f0
  • statusBar.noFolderBackground#2a2a6a
  • 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#ffa00f
  • terminal.ansiCyan#00d3d0
  • terminal.ansiGreen#44bc44
  • terminal.ansiMagenta#feacd0
  • terminal.ansiRed#ff5f59
  • terminal.ansiWhite#a6a6a6
  • terminal.ansiYellow#cabf00
  • 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#d8af7a
string, string.quoted, string.template#79a8ff
constant.numeric, constant.language, constant.character#ffffff
constant.other#82b0ec
keyword, storage.type, storage.modifier#00bcff
keyword.control, keyword.operator.new#00bcffbold
variable, variable.other#00d3d0
variable.parameter, variable.language#d2b580
entity.name.function, support.function#ffa00f
entity.name.type, entity.name.class, support.type, support.class#6ae4b9
entity.name.tag#00bcff
entity.other.attribute-name#00d3d0
support.constant, support.variable#cabf00
meta.preprocessor, entity.name.function.preprocessor#b6a0ff
invalid, invalid.illegal#ffffff
invalid.deprecated#ffffff
markup.heading#6ae4b9bold
markup.bold#ffffffbold
markup.italic#ffffffitalic
markup.underline.link#79a8ffunderline
markup.inline.raw, markup.fenced_code#6ae4b9
markup.quote#9ac8e0
punctuation.definition.list#ffffff