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#FF3D0066
  • badge.background#FF3D00
  • badge.foreground#FFFFFE
  • button.background#FF3D00
  • button.foreground#FFFFFF
  • button.hoverBackground#FF3D00CC
  • dropdown.background#FF3D0066
  • editor.background#0F0E17
  • editor.findMatchBackground#FF3D0077
  • editor.findMatchHighlightBackground#FF3D0044
  • editor.foreground#FFFFFE
  • editor.lineHighlightBackground#FF3D0066
  • editor.selectionBackground#FF3D0077
  • editor.selectionHighlightBackground#FF3D0044
  • editorCursor.foreground#FF3D00
  • editorGroupHeader.tabsBackground#FF3D0066
  • editorLineNumber.activeForeground#FF3D00
  • editorLineNumber.foreground#FF3D0066
  • editorSuggestWidget.background#0F0E17EE
  • editorSuggestWidget.border#FF3D0066
  • editorSuggestWidget.selectedBackground#FF3D0066
  • editorWidget.background#FF3D0066
  • editorWidget.border#FF3D0066
  • input.background#FF3D0066
  • list.activeSelectionBackground#FF3D0077
  • list.hoverBackground#FF3D0066
  • panel.background#FF3D0066
  • panelTitle.activeBorder#FF3D00
  • panelTitle.activeForeground#FFFFFE
  • panelTitle.inactiveForeground#FFFFFEAA
  • peekView.border#FF3D00
  • peekViewEditor.background#0F0E17BB
  • peekViewResult.background#0F0E17BB
  • peekViewTitle.background#FF3D0066
  • sideBar.background#FF3D0066
  • statusBar.background#FF3D00
  • statusBar.debuggingBackground#FF3D00
  • statusBar.noFolderBackground#FF3D00
  • statusBarItem.remoteBackground#FF3D00
  • terminal.ansiBlack#0F0E17
  • terminal.ansiBlue#FF3D00
  • terminal.ansiBrightBlack#FF3D00
  • terminal.ansiBrightBlue#FF3D00
  • terminal.ansiBrightCyan#FF3D00
  • terminal.ansiBrightGreen#FF3D00
  • terminal.ansiBrightMagenta#FF3D00
  • terminal.ansiBrightRed#FF3D00
  • terminal.ansiBrightWhite#FF3D00
  • terminal.ansiBrightYellow#FF3D00
  • terminal.ansiCyan#FF3D00
  • terminal.ansiGreen#FF3D00
  • terminal.ansiMagenta#FF3D00
  • terminal.ansiRed#FF3D00
  • terminal.ansiWhite#FF3D00
  • terminal.ansiYellow#FF3D00
  • terminal.background#0F0E17
  • terminal.foreground#FF3D00
  • titleBar.activeBackground#FF3D00
  • titleBar.inactiveBackground#FF3D0066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6B7280italic
keyword#FF3D00bold
variable#3DA9FCbold
constant#7F5AF0bold
entity.name.function#00EEFFbold
string#F25F4Cbold
entity.name.type#FF3D00bold
support.type#7F5AF0bold
support.function#00EEFFbold
punctuation#FFFFFEbold
storage.type#FF3D00bold
entity.other.attribute-name.class.css#FF3D00bold
support.type.property-name.css#3DA9FCbold
support.constant.property-value.css#FF3D00bold
punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css#FF3D00bold
punctuation.separator.key-value.css#7F5AF0bold
keyword.other.unit.css#00EEFFbold
support.function.misc.css#00EEFFbold
constant.numeric.css#FF3D00bold
keyword.operator.css#FFFFFEbold

Shiki preview

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

Loading...