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#1f1919
  • activityBar.foreground#f2e4e4
  • badge.background#6a5555
  • badge.foreground#f2e4e4
  • button.background#6a5555
  • debugToolBar.background#131010
  • diffEditor.insertedTextBackground#435138
  • diffEditor.removedTextBackground#c4411870
  • dropdown.background#594646
  • dropdown.listBackground#131010
  • editor.background#1f1919
  • editor.foreground#f2e4e4
  • editor.lineHighlightBackground#493939
  • editor.selectionBackground#7c656580
  • editor.selectionHighlightBackground#3a2e2e80
  • editor.wordHighlightBackground#373d4f
  • editor.wordHighlightStrongBackground#4d5e8f80
  • editorCursor.foreground#f2e4e4
  • editorGroup.border#3a2e2e
  • editorGroup.dropBackground#59464680
  • editorGroupHeader.tabsBackground#131010
  • editorHoverWidget.background#594646
  • editorHoverWidget.border#6a5555
  • editorIndentGuide.activeBackground#aa9898
  • editorIndentGuide.background#594646
  • editorLineNumber.activeForeground#c0b0b0
  • editorLineNumber.foreground#a69191
  • editorSuggestWidget.background#1f1919
  • editorSuggestWidget.border#6a5555
  • editorWhitespace.foreground#594646
  • editorWidget.background#131010
  • focusBorder#aa9898
  • input.background#594646
  • inputOption.activeBorder#6a5555
  • inputValidation.errorBackground#c44118
  • inputValidation.errorBorder#bf6578
  • inputValidation.infoBackground#4d5e8f
  • inputValidation.infoBorder#7182b5
  • inputValidation.warningBackground#6c924c
  • inputValidation.warningBorder#ffbf34
  • list.activeSelectionBackground#6a5555
  • list.dropBackground#594646
  • list.highlightForeground#f2e4e4
  • list.hoverBackground#493939
  • list.inactiveSelectionBackground#594646
  • menu.background#131010
  • menu.foreground#cccccc
  • minimap.selectionHighlight#7c656580
  • panel.border#594646
  • panelTitle.activeBorder#6a5555
  • panelTitle.activeForeground#f2e4e4
  • panelTitle.inactiveForeground#6a5555
  • peekView.border#6a5555
  • peekViewEditor.background#1f1919
  • peekViewEditor.matchHighlightBackground#6a5555
  • peekViewResult.background#131010
  • peekViewResult.matchHighlightBackground#6a5555
  • peekViewResult.selectionBackground#594646
  • peekViewTitle.background#131010
  • pickerGroup.foreground#6a5555
  • ports.iconRunningProcessForeground#cdbcbc
  • progressBar.background#6a5555
  • quickInputList.focusBackground#594646
  • selection.background#7c656580
  • settings.focusedRowBackground#5946465A
  • sideBar.background#131010
  • sideBarSectionHeader.background#1f1919
  • statusBar.background#594646
  • statusBar.debuggingBackground#6a5555
  • statusBar.noFolderBackground#594646
  • statusBarItem.remoteBackground#ac621d
  • tab.border#131010
  • tab.inactiveBackground#3a2e2e
  • tab.inactiveForeground#cdbcbc
  • tab.lastPinnedBorder#594646
  • terminal.ansiBlack#2c2323
  • terminal.ansiBlue#54669c
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#7182b5
  • terminal.ansiBrightCyan#8a98c3
  • terminal.ansiBrightGreen#a4c589
  • terminal.ansiBrightMagenta#a54a5e
  • terminal.ansiBrightRed#bf6578
  • terminal.ansiBrightWhite#f2e4e4
  • terminal.ansiBrightYellow#ffbf34
  • terminal.ansiCyan#7182b5
  • terminal.ansiGreen#759f53
  • terminal.ansiMagenta#a54a5e
  • terminal.ansiRed#a54a5e
  • terminal.ansiWhite#e7d7d7
  • terminal.ansiYellow#d19618
  • titleBar.activeBackground#131010
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f2e4e4
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#f2e4e4
comment#8e7878
string#ffc74d
punctuation.definition.template-expression, punctuation.section.embedded#bf6578
meta.template.expression#f2e4e4
constant.numeric#a54a5e
constant.language#a54a5e
constant.character, constant.other#a54a5e
variable#f2e4e4
keyword#bf6578
storage#bf6578
storage.type#8a98c3italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#a4c589underline
entity.other.inherited-class#a4c589italic underline
entity.name.function#a4c589
variable.parameter#fd8617italic
entity.name.tag#bf6578
entity.other.attribute-name#a4c589
support.function#8a98c3
support.constant#8a98c3
support.type, support.class#8a98c3italic
support.other.variable
invalid#f04a18
invalid.deprecated#f04a18
meta.structure.dictionary.json string.quoted.double.json#cdbcbc
meta.diff, meta.diff.header#6a5555
markup.deleted#bf6578
markup.inserted#a4c589
markup.changed#ffc74d
constant.numeric.line-number.find-in-files - match#a54a5eA0
entity.name.filename.find-in-files#ffc74d
markup.quote#bf6578
markup.list#ffc74d
markup.bold, markup.italic#8a98c3
markup.inline.raw#fd8617
markup.heading#a4c589
markup.heading.setext#a4c589bold
markup.heading.markdownbold
markup.quote.markdown#6a5555italic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#a54a5e
markup.underline.link.markdown,markup.underline.link.image.markdown#ffc74d
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#f2e4e4
punctuation.definition.list.begin.markdown#a4c589
token.info-token#6072a9
token.warn-token#be8c21
token.error-token#f04a18
token.debug-token#b25569
variable.language#fd8617
Farben Theme by lihbr - VS Code Theme