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#FF634722
  • badge.background#FF6347AA
  • badge.foreground#FFFFFF
  • button.background#FF6347AA
  • button.foreground#FFFFFF
  • button.hoverBackground#FF6347CC
  • dropdown.background#FF634722
  • editor.background#1E1E1E
  • editor.findMatchBackground#FFD70077
  • editor.findMatchHighlightBackground#FFD70044
  • editor.foreground#FFB6C1
  • editor.lineHighlightBackground#FF634733
  • editor.selectionBackground#FF634777
  • editor.selectionHighlightBackground#FF634744
  • editorCursor.foreground#FF6347
  • editorGroupHeader.tabsBackground#FF634722
  • editorLineNumber.activeForeground#FF6347CC
  • editorLineNumber.foreground#FF634788
  • editorSuggestWidget.background#1E1E1EEE
  • editorSuggestWidget.border#FF634744
  • editorSuggestWidget.selectedBackground#FF634744
  • editorWidget.background#FF634722
  • editorWidget.border#FF634744
  • input.background#FF634722
  • list.activeSelectionBackground#FF634777
  • list.hoverBackground#FF634722
  • panel.background#FF634722
  • panelTitle.activeBorder#FF6347
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#FFB6C1AA
  • peekView.border#FF6347AA
  • peekViewEditor.background#1E1E1EBB
  • peekViewResult.background#1E1E1EBB
  • peekViewTitle.background#FF634722
  • sideBar.background#FF634722
  • statusBar.background#FF634722
  • statusBar.debuggingBackground#FF634733
  • statusBar.noFolderBackground#FF634722
  • statusBarItem.remoteBackground#FF634744
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#87CEEB
  • terminal.ansiBrightBlack#696969
  • terminal.ansiBrightBlue#1E90FF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#90EE90
  • terminal.ansiBrightMagenta#FF1493
  • terminal.ansiBrightRed#FF7F50
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF00
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#98FB98
  • terminal.ansiMagenta#FF69B4
  • terminal.ansiRed#FF6347
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFD700
  • terminal.background#1E1E1E
  • terminal.foreground#FFB6C1
  • titleBar.activeBackground#FF634722
  • titleBar.inactiveBackground#FF634711

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#B0B0B0italic
keyword#FF6347bold
variable#FFA07Abold
constant#FF69B4bold
entity.name.function#FF8C00bold
string#FFD700bold
entity.name.type#98FB98bold
support.type#87CEEBbold
support.function#00CED1bold
punctuation#E0FFFFbold
storage.type#FF6347bold
entity.other.attribute-name.class.css#FFD700bold
support.type.property-name.css#87CEEBbold
support.constant.property-value.css#98FB98bold
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css#FF6347bold
punctuation.separator.key-value.css#FF69B4bold
keyword.other.unit.css#FFA07Abold
support.function.misc.css#00CED1bold
constant.numeric.css#FF8C00bold
keyword.operator.css#E0FFFFbold

Shiki preview

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

Loading...