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#252525
  • activityBar.foreground#F5F5F4
  • badge.background#78716C
  • badge.foreground#F5F5F4
  • button.background#78716C
  • debugToolBar.background#171717
  • diffEditor.insertedTextBackground#36531480
  • diffEditor.removedTextBackground#83184370
  • dropdown.background#404040
  • dropdown.listBackground#171717
  • editor.background#252525
  • editor.foreground#F5F5F4
  • editor.lineHighlightBackground#404040
  • editor.selectionBackground#A8A29E80
  • editor.selectionHighlightBackground#52525B80
  • editor.wordHighlightBackground#47556980
  • editor.wordHighlightStrongBackground#64748B80
  • editorCursor.foreground#F5F5F4
  • editorGroup.border#404040
  • editorGroup.dropBackground#40404080
  • editorGroupHeader.tabsBackground#171717
  • editorHoverWidget.background#404040
  • editorHoverWidget.border#78716C
  • editorIndentGuide.activeBackground#78716C
  • editorIndentGuide.background#57534e
  • editorLineNumber.activeForeground#D6D3D1
  • editorLineNumber.foreground#A8A29E
  • editorSuggestWidget.background#252525
  • editorSuggestWidget.border#78716C
  • editorWhitespace.foreground#57534e
  • editorWidget.background#171717
  • focusBorder#A8A29E
  • input.background#404040
  • inputOption.activeBorder#78716C
  • inputValidation.errorBackground#9D174D
  • inputValidation.errorBorder#FE9BE2
  • inputValidation.infoBackground#64748B
  • inputValidation.infoBorder#818CF8
  • inputValidation.warningBackground#B45309
  • inputValidation.warningBorder#F9C265
  • list.activeSelectionBackground#78716C
  • list.dropBackground#404040
  • list.highlightForeground#F5F5F4
  • list.hoverBackground#404040
  • list.inactiveSelectionBackground#404040
  • menu.background#171717
  • menu.foreground#D6D3D1
  • minimap.selectionHighlight#A8A29E80
  • minimapSlider.background#78716C60
  • panel.border#404040
  • panelTitle.activeBorder#78716C
  • panelTitle.activeForeground#F5F5F4
  • panelTitle.inactiveForeground#78716C
  • peekView.border#78716C
  • peekViewEditor.background#252525
  • peekViewEditor.matchHighlightBackground#78716C
  • peekViewResult.background#171717
  • peekViewResult.matchHighlightBackground#78716C
  • peekViewResult.selectionBackground#404040
  • peekViewTitle.background#171717
  • pickerGroup.foreground#78716C
  • ports.iconRunningProcessForeground#D6D3D1
  • progressBar.background#78716C
  • quickInputList.focusBackground#404040
  • selection.background#A8A29E80
  • settings.focusedRowBackground#4040405A
  • sideBar.background#171717
  • sideBarSectionHeader.background#252525
  • statusBar.background#404040
  • statusBar.debuggingBackground#78716C
  • statusBar.noFolderBackground#404040
  • statusBarItem.remoteBackground#A16207
  • tab.border#171717
  • tab.inactiveBackground#404040
  • tab.inactiveForeground#D6D3D1
  • tab.lastPinnedBorder#404040
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#818CF8
  • terminal.ansiBrightCyan#5EDFFF
  • terminal.ansiBrightGreen#5BEF96
  • terminal.ansiBrightMagenta#AD8CFE
  • terminal.ansiBrightRed#FE9BE2
  • terminal.ansiBrightWhite#F5F5F4
  • terminal.ansiBrightYellow#E3D97E
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#FE9BE2
  • terminal.ansiWhite#E3E3DD
  • terminal.ansiYellow#FACC15
  • titleBar.activeBackground#171717
  • 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#E3D97E
punctuation.definition.template-expression, punctuation.section.embedded#FE9BE2
meta.template.expression#F5F5F4
constant.numeric#AD8CFE
constant.language#AD8CFE
constant.character, constant.other#AD8CFE
variable#F5F5F4
keyword#FE9BE2
storage#FE9BE2
storage.type#5EDFFFitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#5BEF96underline
entity.other.inherited-class#5BEF96italic underline
entity.name.function#5BEF96
variable.parameter#F9C265italic
entity.name.tag#FE9BE2
entity.other.attribute-name#5BEF96
support.function#5EDFFF
support.constant#5EDFFF
support.type, support.class#5EDFFFitalic
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#FE9BE2
markup.inserted#5BEF96
markup.changed#E3D97E
constant.numeric.line-number.find-in-files - match#AD8CFEA0
entity.name.filename.find-in-files#E3D97E
markup.quote#FE9BE2
markup.list#E3D97E
markup.bold, markup.italic#5EDFFF
markup.inline.raw#F9C265
markup.heading#5BEF96
markup.heading.setext#5BEF96bold
markup.heading.markdownbold
markup.quote.markdown#78716Citalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AD8CFE
markup.underline.link.markdown,markup.underline.link.image.markdown#E3D97E
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#F5F5F4
punctuation.definition.list.begin.markdown#5BEF96
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
variable.language#F9C265
source.note variable.parameter
source.note invalid#FE9BE2bold underline
toybox by plewg - VS Code Theme