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#fafafa
  • activityBar.border#e4e4e7
  • activityBar.foreground#09090b
  • badge.background#e7000b
  • badge.foreground#09090b
  • breadcrumb.foreground#71717b
  • button.background#fdc700
  • button.foreground#733e0a
  • button.hoverBackground#ffdf20
  • debugToolBar.background#ffffff
  • dropdown.background#ffffff
  • dropdown.border#e4e4e7
  • dropdown.foreground#09090b
  • editor.background#ffffff
  • editor.foreground#09090b
  • editorGroup.border#e4e4e7
  • editorGroupHeader.tabsBackground#f4f4f5
  • editorGutter.background#fafafa
  • editorLineNumber.foreground#71717b
  • editorWidget.background#ffffff
  • focusBorder#fdc700
  • input.background#e4e4e7
  • input.border#e4e4e7
  • input.foreground#09090b
  • inputOption.activeBackground#fdc700
  • inputOption.activeForeground#733e0a
  • list.activeSelectionBackground#fdc700
  • list.activeSelectionForeground#733e0a
  • list.focusBackground#fdc700
  • list.hoverBackground#f4f4f5
  • list.inactiveSelectionBackground#f4f4f5
  • menu.background#ffffff
  • menu.foreground#09090b
  • menu.separatorBackground#e4e4e7
  • panel.background#ffffff
  • panel.border#e4e4e7
  • peekViewEditor.background#ffffff
  • peekViewResult.background#f4f4f5
  • progressBar.background#fdc700
  • scrollbarSlider.activeBackground#f4f4f5ff
  • scrollbarSlider.background#f4f4f599
  • scrollbarSlider.hoverBackground#f4f4f5cc
  • settings.headerForeground#09090b
  • settings.modifiedItemIndicator#fdc700
  • sideBar.background#fafafa
  • sideBar.foreground#09090b
  • sideBarSectionHeader.background#fafafa
  • sideBarSectionHeader.border#e4e4e7
  • sideBarSectionHeader.foreground#09090b
  • statusBar.background#fdc700
  • statusBar.border#e4e4e7
  • statusBar.foreground#733e0a
  • tab.activeBackground#ffffff
  • tab.activeForeground#09090b
  • tab.border#e4e4e7
  • tab.inactiveBackground#f4f4f5
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#fdc700
  • terminal.ansiBrightBlack#f4f4f5
  • terminal.ansiBrightBlue#fdc700
  • terminal.ansiBrightCyan#d08700
  • terminal.ansiBrightGreen#ffdf20
  • terminal.ansiBrightMagenta#fbf0dc
  • terminal.ansiBrightRed#e7000b
  • terminal.ansiBrightWhite#09090b
  • terminal.ansiBrightYellow#733e0a
  • terminal.ansiCyan#894b00
  • terminal.ansiGreen#f0b100
  • terminal.ansiMagenta#d08700
  • terminal.ansiRed#e7000b
  • terminal.ansiWhite#09090b
  • terminal.ansiYellow#ffdf20
  • terminal.background#ffffff
  • terminal.border#e4e4e7
  • terminal.foreground#09090b
  • terminal.selectionBackground#fdc70099
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#fdc700
  • textLink.foreground#fdc700
  • titleBar.activeBackground#fafafa
  • titleBar.activeForeground#09090b
  • titleBar.border#e4e4e7
  • titleBar.inactiveBackground#fafafa
  • welcomePage.background#ffffff
  • welcomePage.tileBackground#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#71717b
string#894b00
keyword#fdc700
entity.name.function#ffdf20
variable#fbf0dc
entity.name.type#d08700
constant#e7000b
markup.underline.link#fdc700
punctuation#09090b
constant.numeric#e7000b
keyword.operator#ffdf20
Prism Themes by Muhammad-Sulman - VS Code Theme