Skip to main content
CodingTheme

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#F5F5F5
  • badge.background#00BFFF
  • badge.foreground#FFFFFF
  • button.background#00BFFF
  • button.foreground#FFFFFF
  • button.hoverBackground#009AC1
  • dropdown.background#A3D9FF22
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFD700
  • editor.findMatchHighlightBackground#FFD70044
  • editor.foreground#2C3E50
  • editor.lineHighlightBackground#A3D9FF33
  • editor.selectionBackground#00BFFF77
  • editor.selectionHighlightBackground#00BFFF44
  • editorCursor.foreground#FFD700
  • editorGroupHeader.tabsBackground#A3D9FF22
  • editorLineNumber.activeForeground#00BFFF
  • editorLineNumber.foreground#00BFFF88
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#00BFFF44
  • editorSuggestWidget.selectedBackground#00BFFF44
  • editorWidget.background#A3D9FF22
  • editorWidget.border#00BFFF44
  • input.background#A3D9FF22
  • list.activeSelectionBackground#00BFFF77
  • list.hoverBackground#A3D9FF22
  • panel.background#F5F5F5
  • panelTitle.activeBorder#00BFFF
  • panelTitle.activeForeground#2C3E50
  • panelTitle.inactiveForeground#2C3E5088
  • peekView.border#00BFFF
  • peekViewEditor.background#FFFFFFBB
  • peekViewResult.background#FFFFFFBB
  • peekViewTitle.background#A3D9FF22
  • sideBar.background#F5F5F5
  • statusBar.background#00BFFF
  • statusBar.debuggingBackground#00BFFF
  • statusBar.noFolderBackground#00BFFF
  • statusBarItem.remoteBackground#00BFFF
  • terminal.ansiBlack#FFFFFF
  • terminal.ansiBlue#00BFFF
  • terminal.ansiBrightBlack#BDBDBD
  • terminal.ansiBrightBlue#00BFFF
  • terminal.ansiBrightCyan#00BCD4
  • terminal.ansiBrightGreen#4CAF50
  • terminal.ansiBrightMagenta#E91E63
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#FF6F61
  • terminal.ansiWhite#2C3E50
  • terminal.ansiYellow#FFD54F
  • terminal.background#FFFFFF
  • terminal.foreground#2C3E50
  • titleBar.activeBackground#00BFFF
  • titleBar.inactiveBackground#A3D9FF99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#B0BEC5italic
keyword#00BFFFbold
variable#2196F3bold
constant#FFD54Fbold
entity.name.function#4CAF50bold
string#FF6F61bold
entity.name.type#00BFFFbold
support.type#2196F3bold
support.function#00BCD4bold
punctuation#333333bold
storage.type#00BFFFbold
entity.other.attribute-name.class.css#00BFFFbold
support.type.property-name.css#2196F3bold
support.constant.property-value.css#FFD54Fbold
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css#00BFFFbold
punctuation.separator.key-value.css#FFD54Fbold
keyword.other.unit.css#00BCD4bold
support.function.misc.css#00BCD4bold
constant.numeric.css#FFD54Fbold
keyword.operator.css#333333bold

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...