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#251f2b
  • activityBar.foreground#D1C5DD
  • badge.background#32293a
  • badge.foreground#D1C5DD
  • button.background#32293a
  • debugToolBar.background#2a2331
  • diffEditor.insertedTextBackground#a2baa880
  • diffEditor.removedTextBackground#D865A370
  • dropdown.background#32293a
  • dropdown.listBackground#2a2331
  • editor.background#2a2331
  • editor.foreground#D1C5DD
  • editor.lineHighlightBackground#32293a
  • editor.selectionBackground#D1C5DD20
  • editor.selectionHighlightBackground#D1C5DD20
  • editor.wordHighlightBackground#A89DE980
  • editor.wordHighlightStrongBackground#A89DE980
  • editorCursor.foreground#D865A3
  • editorGroup.border#32293a
  • editorGroup.dropBackground#32293a80
  • editorGroupHeader.tabsBackground#251f2b
  • editorGroupHeader.tabsBorder#1d1921
  • editorHoverWidget.background#32293a
  • editorHoverWidget.border#32293a
  • editorIndentGuide.activeBackground#D1C5DD30
  • editorIndentGuide.background#D1C5DD10
  • editorLineNumber.activeForeground#D865A3
  • editorLineNumber.foreground#D1C5DD40
  • editorSuggestWidget.background#2a2331
  • editorSuggestWidget.border#32293a
  • editorWhitespace.foreground#D1C5DD60
  • editorWidget.background#32293a
  • focusBorder#D865A3
  • input.background#32293a
  • inputOption.activeBorder#32293a
  • inputValidation.errorBackground#D865A34A
  • inputValidation.errorBorder#D865A3
  • inputValidation.infoBackground#A89DE9
  • inputValidation.infoBorder#A89DE9
  • inputValidation.warningBackground#DACEB1
  • inputValidation.warningBorder#DACEB1
  • list.activeSelectionBackground#D865A3
  • list.dropBackground#32293a
  • list.highlightForeground#D1C5DD
  • list.hoverBackground#32293a
  • list.inactiveSelectionBackground#32293a
  • menu.background#2a2331
  • menu.foreground#D1C5DD
  • minimap.selectionHighlight#D1C5DD20
  • panel.background#251f2b
  • panel.border#D1C5DD00
  • panelTitle.activeBorder#32293a
  • panelTitle.activeForeground#D1C5DD
  • panelTitle.inactiveForeground#D1C5DD70
  • peekView.border#32293a
  • peekViewEditor.background#2a2331
  • peekViewEditor.matchHighlightBackground#32293a
  • peekViewResult.background#2a2331
  • peekViewResult.matchHighlightBackground#32293a
  • peekViewResult.selectionBackground#D865A330
  • peekViewTitle.background#2a2331
  • pickerGroup.foreground#32293a
  • ports.iconRunningProcessForeground#D1C5DD
  • progressBar.background#32293a
  • quickInputList.focusBackground#D865A330
  • selection.background#D1C5DD20
  • settings.focusedRowBackground#32293a5A
  • sideBar.background#251f2b
  • sideBar.border#1d1921
  • sideBar.foreground#D1C5DD80
  • sideBarSectionHeader.background#2a2331
  • statusBar.background#251f2b
  • statusBar.border#1d1921
  • statusBar.debuggingBackground#32293a
  • statusBar.noFolderBackground#32293a
  • statusBarItem.remoteBackground#A89DE970
  • tab.activeBackground#2a2331
  • tab.activeBorder#2a2331
  • tab.activeBorderTop#D865A330
  • tab.border#1d1921
  • tab.inactiveBackground#251f2b
  • tab.inactiveForeground#D1C5DD
  • tab.lastPinnedBorder#32293a
  • terminal.ansiBlack#594B67
  • terminal.ansiBlue#A89DE9
  • terminal.ansiBrightBlack#594B67
  • terminal.ansiBrightBlue#A89DE9
  • terminal.ansiBrightCyan#aabae7
  • terminal.ansiBrightGreen#a2baa8
  • terminal.ansiBrightMagenta#D29BDB
  • terminal.ansiBrightRed#D865A3
  • terminal.ansiBrightWhite#D1C5DD
  • terminal.ansiBrightYellow#DACEB1
  • terminal.ansiCyan#aabae7
  • terminal.ansiGreen#a2baa8
  • terminal.ansiMagenta#D29BDB
  • terminal.ansiRed#D865A3
  • terminal.ansiWhite#D1C5DD
  • terminal.ansiYellow#DACEB1
  • titleBar.activeBackground#251f2b
  • titleBar.border#1d1921
  • widget.shadow#2a233100

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#D1C5DD
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#D1C5DD
comment#594B67
string#DACEB1
punctuation.definition.template-expression, punctuation.section.embedded#D865A3
meta.template.expression#D1C5DD
constant.numeric#D29BDB
variable.other.property#D29BDB
constant.language#D29BDB
constant.character, constant.other#D29BDB
variable#D1C5DD
keyword#D865A3
storage#D865A3
storage.type#aabae7
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#a2baa8underline
entity.other.inherited-class#a2baa8underline
entity.name.function#a2baa8
variable.parameter#D29BDB
entity.name.tag#D865A3
entity.other.attribute-name#a2baa8
support.function#aabae7
support.constant#aabae7
support.type, support.class#aabae7
support.other.variable
invalid#D865A3
invalid.deprecated#D865A3
meta.structure.dictionary.json string.quoted.double.json#D1C5DD
meta.diff, meta.diff.header#32293a
markup.deleted#D865A3
markup.inserted#a2baa8
markup.changed#DACEB1
constant.numeric.line-number.find-in-files - match#D29BDBA0
entity.name.filename.find-in-files#DACEB1
markup.quote#D865A3
markup.list#DACEB1
markup.bold, markup.italic#aabae7
markup.inline.raw#D29BDB
markup.heading#a2baa8
markup.heading.setext#a2baa8bold
markup.heading.markdownbold
markup.quote.markdown#32293aitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#D29BDB
markup.underline.link.markdown,markup.underline.link.image.markdown#DACEB1
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#D1C5DD
punctuation.definition.list.begin.markdown#a2baa8
token.info-token#A89DE9
token.warn-token#DACEB1
token.error-token#D865A3
token.debug-token#A89DE9
variable.language#D29BDB
punctuation.separator#594B67
amora by owozsh - VS Code Theme