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#00425440
  • diffEditor.insertedTextBackground#00425480
  • diffEditor.removedLineBackground#4f111940
  • diffEditor.removedTextBackground#4f111980
  • dropdown.background#1e1e1e
  • dropdown.border#646464
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.findMatchBackground#9d1f1f
  • editor.findMatchHighlightBackground#2266ae99
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#2f3849
  • editor.selectionBackground#5a5a5a
  • editor.selectionForeground#ffffff
  • editor.wordHighlightBackground#00425399
  • editor.wordHighlightStrongBackground#00425399
  • editorBracketMatch.background#2f7f9f
  • editorBracketMatch.border#2f7f9f
  • editorCursor.foreground#ff5f5f
  • editorError.foreground#ff5f5f
  • editorGroupHeader.tabsBackground#313131
  • editorGroupHeader.tabsBorder#646464
  • editorHoverWidget.background#1e1e1e
  • editorHoverWidget.border#646464
  • editorIndentGuide.activeBackground1#989898
  • editorIndentGuide.background1#646464
  • editorInfo.foreground#00d3d0
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#989898
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.border#646464
  • editorSuggestWidget.selectedBackground#535353
  • editorWarning.foreground#feacd0
  • editorWhitespace.foreground#646464
  • editorWidget.background#1e1e1e
  • editorWidget.border#646464
  • gitDecoration.addedResourceForeground#9fdfdf
  • gitDecoration.conflictingResourceForeground#ff9070
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#989898
  • gitDecoration.modifiedResourceForeground#e3cfff
  • gitDecoration.untrackedResourceForeground#7fdbdf
  • 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#8e3e3b
  • 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#003c52
  • statusBar.border#5f8fb4
  • statusBar.debuggingBackground#b52c2c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#f0f0f0
  • statusBar.noFolderBackground#003c52
  • 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#ff6740
  • 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#ff9070
string, string.quoted, string.template#00d3d0
constant.numeric, constant.language, constant.character#ffffff
constant.other#88ca9f
keyword, storage.type, storage.modifier#ff7f86
keyword.control, keyword.operator.new#ff7f86bold
variable, variable.other#6ae4b9
variable.parameter, variable.language#ff9070
entity.name.function, support.function#4ae2ff
entity.name.type, entity.name.class, support.type, support.class#79a8ff
entity.name.tag#ff7f86
entity.other.attribute-name#6ae4b9
support.constant, support.variable#feacd0
meta.preprocessor, entity.name.function.preprocessor#ff6740
invalid, invalid.illegal#ffffff
invalid.deprecated#ffffff
markup.heading#6ae4b9bold
markup.bold#ffffffbold
markup.italic#ffffffitalic
markup.underline.link#00d3d0underline
markup.inline.raw, markup.fenced_code#00d3d0
markup.quote#7fdbdf
punctuation.definition.list#ffffff