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#0d0e1c
  • activityBar.border#61647a
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#989898
  • activityBarBadge.background#2fafff
  • activityBarBadge.foreground#ffffff
  • badge.background#2fafff
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#0d0e1c
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#989898
  • button.background#4a4f69
  • button.foreground#ffffff
  • button.hoverBackground#61647a
  • diffEditor.insertedLineBackground#003a2f40
  • diffEditor.insertedTextBackground#003a2f80
  • diffEditor.removedLineBackground#4f112740
  • diffEditor.removedTextBackground#4f112780
  • dropdown.background#1d2235
  • dropdown.border#61647a
  • dropdown.foreground#ffffff
  • editor.background#0d0e1c
  • editor.findMatchBackground#7a6100
  • editor.findMatchHighlightBackground#2266ae99
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#303a6f
  • editor.selectionBackground#555a66
  • editor.selectionForeground#ffffff
  • editor.wordHighlightBackground#483d8a99
  • editor.wordHighlightStrongBackground#483d8a99
  • editorBracketMatch.background#4f7f9f
  • editorBracketMatch.border#4f7f9f
  • editorCursor.foreground#ff66ff
  • editorError.foreground#ff5f5f
  • editorGroupHeader.tabsBackground#2c3045
  • editorGroupHeader.tabsBorder#61647a
  • editorHoverWidget.background#1d2235
  • editorHoverWidget.border#61647a
  • editorIndentGuide.activeBackground1#989898
  • editorIndentGuide.background1#61647a
  • editorInfo.foreground#11c777
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#989898
  • editorSuggestWidget.background#1d2235
  • editorSuggestWidget.border#61647a
  • editorSuggestWidget.selectedBackground#4a4f69
  • editorWarning.foreground#d0bc00
  • editorWhitespace.foreground#61647a
  • editorWidget.background#1d2235
  • editorWidget.border#61647a
  • gitDecoration.addedResourceForeground#a0e0a0
  • gitDecoration.conflictingResourceForeground#ef8386
  • gitDecoration.deletedResourceForeground#ffbfbf
  • gitDecoration.ignoredResourceForeground#989898
  • gitDecoration.modifiedResourceForeground#efef80
  • gitDecoration.untrackedResourceForeground#9ac8e0
  • input.background#1d2235
  • input.border#61647a
  • input.foreground#ffffff
  • input.placeholderForeground#989898
  • inputOption.activeBorder#2fafff
  • list.activeSelectionBackground#4a4f69
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#4a4f69
  • list.focusForeground#ffffff
  • list.hoverBackground#45605e
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#2b3045
  • list.inactiveSelectionForeground#ffffff
  • notificationLink.foreground#79a8ff
  • notifications.background#1d2235
  • notifications.border#61647a
  • notifications.foreground#ffffff
  • panel.background#1d2235
  • panel.border#61647a
  • panelTitle.activeBorder#2fafff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#989898
  • peekView.border#61647a
  • peekViewEditor.background#1d2235
  • peekViewResult.background#1d2235
  • peekViewTitle.background#2b3045
  • progressBar.background#2fafff
  • scrollbar.shadow#0d0e1c
  • scrollbarSlider.activeBackground#989898
  • scrollbarSlider.background#4a4f69
  • scrollbarSlider.hoverBackground#61647a
  • sideBar.background#1d2235
  • sideBar.border#61647a
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#2b3045
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#484d67
  • statusBar.border#979797
  • statusBar.debuggingBackground#b52c2c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#484d67
  • tab.activeBackground#0d0e1c
  • tab.activeForeground#ffffff
  • tab.border#61647a
  • tab.inactiveBackground#4a4f6a
  • 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#0d0e1c
  • terminal.foreground#ffffff
  • titleBar.activeBackground#0d0e1c
  • titleBar.activeForeground#ffffff
  • titleBar.border#61647a
  • titleBar.inactiveBackground#1d2235
  • titleBar.inactiveForeground#989898

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ef8386
string, string.quoted, string.template#2fafff
constant.numeric, constant.language, constant.character#ffffff
constant.other#b6a0ff
keyword, storage.type, storage.modifier#79a8ff
keyword.control, keyword.operator.new#79a8ffbold
variable, variable.other#4ae2f0
variable.parameter, variable.language#d2b580
entity.name.function, support.function#f78fe7
entity.name.type, entity.name.class, support.type, support.class#11c777
entity.name.tag#79a8ff
entity.other.attribute-name#4ae2f0
support.constant, support.variable#feacd0
meta.preprocessor, entity.name.function.preprocessor#ff7f86
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