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#6A057222
  • badge.background#6A0572
  • badge.foreground#FFFFFF
  • button.background#6A0572
  • button.foreground#FFFFFF
  • button.hoverBackground#7A0572CC
  • dropdown.background#6A057222
  • editor.background#1A1A2E
  • editor.findMatchBackground#FF6F61
  • editor.findMatchHighlightBackground#FF6F6144
  • editor.foreground#EAEAEA
  • editor.lineHighlightBackground#6A057233
  • editor.selectionBackground#6A057277
  • editor.selectionHighlightBackground#6A057244
  • editorCursor.foreground#6A0572
  • editorGroupHeader.tabsBackground#6A057222
  • editorLineNumber.activeForeground#6A0572
  • editorLineNumber.foreground#6A057288
  • editorSuggestWidget.background#1A1A2E
  • editorSuggestWidget.border#6A057244
  • editorSuggestWidget.selectedBackground#6A057244
  • editorWidget.background#6A057222
  • editorWidget.border#6A057244
  • input.background#6A057222
  • list.activeSelectionBackground#6A057277
  • list.hoverBackground#6A057222
  • panel.background#6A057222
  • panelTitle.activeBorder#6A0572
  • panelTitle.activeForeground#EAEAEA
  • panelTitle.inactiveForeground#EAEAEA88
  • peekView.border#6A0572
  • peekViewEditor.background#1A1A2EBB
  • peekViewResult.background#1A1A2EBB
  • peekViewTitle.background#6A057222
  • sideBar.background#6A057222
  • statusBar.background#6A0572
  • statusBar.debuggingBackground#6A0572
  • statusBar.noFolderBackground#6A0572
  • statusBarItem.remoteBackground#6A0572
  • terminal.ansiBlack#1A1A2E
  • terminal.ansiBlue#82B1FF
  • terminal.ansiBrightBlack#6A0572
  • terminal.ansiBrightBlue#82B1FF
  • terminal.ansiBrightCyan#00EEFF
  • terminal.ansiBrightGreen#6A0572
  • terminal.ansiBrightMagenta#FF8A80
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#00EEFF
  • terminal.ansiGreen#6A0572
  • terminal.ansiMagenta#FF8A80
  • terminal.ansiRed#FF6F61
  • terminal.ansiWhite#EAEAEA
  • terminal.ansiYellow#FFD54F
  • terminal.background#1A1A2E
  • terminal.foreground#EAEAEA
  • titleBar.activeBackground#6A0572
  • titleBar.inactiveBackground#4B2C6A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#B0BEC5italic
keyword#6A0572bold
variable#82B1FFbold
constant#FFD54Fbold
entity.name.function#6A0572bold
string#FF6F61bold
entity.name.type#6A0572bold
support.type#82B1FFbold
support.function#00EEFFbold
punctuation#EAEAEAbold
storage.type#6A0572bold
entity.other.attribute-name.class.css#6A0572bold
support.type.property-name.css#82B1FFbold
support.constant.property-value.css#6A0572bold
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css#6A0572bold
punctuation.separator.key-value.css#FFD54Fbold
keyword.other.unit.css#00EEFFbold
support.function.misc.css#00EEFFbold
constant.numeric.css#FFD54Fbold
keyword.operator.css#EAEAEAbold

Shiki preview

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

Loading...