Skip to main content
Coding Theme

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#292524
  • activityBar.foreground#F5F5F4
  • badge.background#78716C
  • badge.foreground#F5F5F4
  • button.background#78716C
  • debugToolBar.background#1C1917
  • diffEditor.insertedTextBackground#36531480
  • diffEditor.removedTextBackground#83184370
  • dropdown.background#44403c
  • dropdown.listBackground#1C1917
  • editor.background#292524
  • editor.foreground#F5F5F4
  • editor.lineHighlightBackground#44403C
  • editor.selectionBackground#A8A29E80
  • editor.selectionHighlightBackground#52525B80
  • editor.wordHighlightBackground#47556980
  • editor.wordHighlightStrongBackground#64748B80
  • editorCursor.foreground#F5F5F4
  • editorGroup.border#44403C
  • editorGroup.dropBackground#44403c80
  • editorGroupHeader.tabsBackground#1C1917
  • editorHoverWidget.background#44403c
  • editorHoverWidget.border#78716C
  • editorIndentGuide.activeBackground#78716c
  • editorIndentGuide.background#57534e
  • editorLineNumber.activeForeground#D6D3D1
  • editorLineNumber.foreground#A8A29E
  • editorSuggestWidget.background#292524
  • editorSuggestWidget.border#78716C
  • editorWhitespace.foreground#57534e
  • editorWidget.background#1C1917
  • focusBorder#A8A29E
  • input.background#44403c
  • inputOption.activeBorder#78716C
  • inputValidation.errorBackground#9D174D
  • inputValidation.errorBorder#DB2777
  • inputValidation.infoBackground#64748B
  • inputValidation.infoBorder#818CF8
  • inputValidation.warningBackground#B45309
  • inputValidation.warningBorder#F59E0B
  • list.activeSelectionBackground#78716C
  • list.dropBackground#44403c
  • list.highlightForeground#F5F5F4
  • list.hoverBackground#44403C
  • list.inactiveSelectionBackground#44403c
  • menu.background#1C1917
  • menu.foreground#D6D3D1
  • minimap.selectionHighlight#A8A29E80
  • minimapSlider.background#78716C60
  • panel.border#44403c
  • panelTitle.activeBorder#78716C
  • panelTitle.activeForeground#F5F5F4
  • panelTitle.inactiveForeground#78716C
  • peekView.border#78716C
  • peekViewEditor.background#292524
  • peekViewEditor.matchHighlightBackground#78716C
  • peekViewResult.background#1C1917
  • peekViewResult.matchHighlightBackground#78716C
  • peekViewResult.selectionBackground#44403c
  • peekViewTitle.background#1C1917
  • pickerGroup.foreground#78716C
  • ports.iconRunningProcessForeground#D6D3D1
  • progressBar.background#78716C
  • quickInputList.focusBackground#44403c
  • selection.background#A8A29E80
  • settings.focusedRowBackground#44403c5A
  • sideBar.background#1C1917
  • sideBarSectionHeader.background#292524
  • statusBar.background#44403c
  • statusBar.debuggingBackground#78716C
  • statusBar.noFolderBackground#44403c
  • statusBarItem.remoteBackground#A16207
  • tab.border#1C1917
  • tab.inactiveBackground#44403C
  • tab.inactiveForeground#D6D3D1
  • tab.lastPinnedBorder#44403c
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#818CF8
  • terminal.ansiBrightCyan#67E8F9
  • terminal.ansiBrightGreen#A3E635
  • terminal.ansiBrightMagenta#A78BFA
  • terminal.ansiBrightRed#DB2777
  • terminal.ansiBrightWhite#F5F5F4
  • terminal.ansiBrightYellow#FDDD6C
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#ec4899
  • terminal.ansiWhite#E3E3DD
  • terminal.ansiYellow#FACC15
  • titleBar.activeBackground#1C1917
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#F5F5F4
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#F5F5F4
comment#78716C
string#FDDD6C
punctuation.definition.template-expression, punctuation.section.embedded#DB2777
meta.template.expression#F5F5F4
constant.numeric#A78BFA
constant.language#A78BFA
constant.character, constant.other#A78BFA
variable#F5F5F4
keyword#DB2777
storage#DB2777
storage.type#67E8F9italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#A3E635underline
entity.other.inherited-class#A3E635italic underline
entity.name.function#A3E635
variable.parameter#F59E0Bitalic
entity.name.tag#DB2777
entity.other.attribute-name#A3E635
support.function#67E8F9
support.constant#67E8F9
support.type, support.class#67E8F9italic
support.other.variable
invalid#F44747
invalid.deprecated#F44747
meta.structure.dictionary.json string.quoted.double.json#D6D3D1
meta.diff, meta.diff.header#78716C
markup.deleted#DB2777
markup.inserted#A3E635
markup.changed#FDDD6C
constant.numeric.line-number.find-in-files - match#A78BFAA0
entity.name.filename.find-in-files#FDDD6C
markup.quote#DB2777
markup.list#FDDD6C
markup.bold, markup.italic#67E8F9
markup.inline.raw#F59E0B
markup.heading#A3E635
markup.heading.setext#A3E635bold
markup.heading.markdownbold
markup.quote.markdown#78716Citalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#A78BFA
markup.underline.link.markdown,markup.underline.link.image.markdown#FDDD6C
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#F5F5F4
punctuation.definition.list.begin.markdown#A3E635
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
variable.language#F59E0B
source.note variable.parameter
source.note invalid#DB2777bold underline
Kaio by ciiqr - VS Code Theme