Skip to main content
Coding Theme

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.activeBorder#D2A8FF
  • activityBar.background#0e0d0d
  • activityBar.border#373737
  • activityBarBadge.background#D2A8FF
  • activityBarBadge.foreground#0e0d0d
  • button.background#D2A8FF
  • button.foreground#0e0d0d
  • button.hoverBackground#D2A8FF99
  • button.secondaryBackground#DB6B6B
  • button.secondaryForeground#0e0d0d
  • dropdown.background#0e0d0d
  • dropdown.border#373737
  • dropdown.foreground#C9D1D9
  • dropdown.listBackground#0e0d0d
  • editor.background#0e0d0d
  • editor.findMatchBackground#D2A8FF4d
  • editor.findMatchHighlightBackground#D2A8FF2a
  • editor.foreground#C9D1D9
  • editor.inactiveSelectionBackground#D2A8FF3d
  • editor.lineHighlightBackground#D2A8FF1a
  • editor.selectionBackground#D2A8FF4d
  • editor.selectionForeground#C9D1D9
  • editorGroupHeader.noTabsBackground#0e0d0d
  • editorGroupHeader.tabsBackground#0e0d0d
  • editorGroupHeader.tabsBorder#373737
  • editorWidget.background#0e0d0d
  • editorWidget.border#373737
  • editorWidget.foreground#C9D1D9
  • editorWidget.resizeBorder#D2A8FF
  • focusBorder#373737
  • input.background#0e0d0d
  • input.border#373737
  • input.foreground#C9D1D9
  • input.placeholderForeground#8c8c8c
  • inputOption.activeBackground#D2A8FF
  • inputOption.activeBorder#373737
  • inputOption.activeForeground#C9D1D9
  • inputValidation.errorBackground#DB6B6B
  • inputValidation.errorBorder#C9D1D9
  • inputValidation.infoBackground#D2A8FF
  • inputValidation.infoBorder#373737
  • inputValidation.warningBackground#cab577
  • inputValidation.warningBorder#C9D1D9
  • list.activeSelectionBackground#D2A8FF4d
  • list.activeSelectionForeground#C9D1D9
  • list.filterMatchBorder#373737
  • list.hoverBackground#D2A8FF1a
  • list.inactiveSelectionBackground#D2A8FF3d
  • menu.background#0e0d0d
  • menu.border#373737
  • menu.foreground#C9D1D9
  • menu.selectionBackground#D2A8FF4d
  • menu.separatorBackground#373737
  • menubar.selectionBackground#D2A8FF4d
  • panel.background#0e0d0d
  • pickerGroup.border#373737
  • quickInput.background#0e0d0d
  • quickInput.foreground#C9D1D9
  • quickInputTitle.background#D2A8FF
  • scrollbar.shadow#0e0d0d
  • scrollbarSlider.background#D2A8FF3d
  • scrollbarSlider.hoverBackground#D2A8FF4d
  • sideBar.background#0e0d0d
  • sideBar.border#373737
  • sideBarSectionHeader.background#0e0d0d
  • statusBar.background#0e0d0d
  • statusBar.border#373737
  • statusBarItem.hoverBackground#D2A8FF1a
  • tab.activeBackground#0e0d0d
  • tab.activeBorder#0e0d0d
  • tab.inactiveBackground#0e0d0d
  • terminal.ansiBlack#0e0d0d
  • terminal.ansiBlue#79C0FF
  • terminal.ansiBrightBlack#373737
  • terminal.ansiBrightBlue#80D0FF
  • terminal.ansiBrightCyan#89f2d6
  • terminal.ansiBrightGreen#8ce88c
  • terminal.ansiBrightMagenta#a57ede
  • terminal.ansiBrightRed#ff5c5c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fce788
  • terminal.ansiCyan#72c5aa
  • terminal.ansiGreen#72c572
  • terminal.ansiMagenta#D2A8FF
  • terminal.ansiRed#DB6B6B
  • terminal.ansiWhite#C9D1D9
  • terminal.ansiYellow#cab577
  • terminal.background#0e0d0d
  • titleBar.activeBackground#0e0d0d
  • titleBar.border#373737

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8B949E
variable.other.constant, entity.name.type#C9D1D9
constant, entity.name.constant, variable.language, variable.object.property, variable.other.object.property, variable.other.constant.property#cab577
constant.language.import-export-all#C9D1D9
meta.object.member, variable.other.property#cab577
meta.brace, meta.objectliteral#C9D1D9
entity, entity.name, support.function#D2A8FF
variable.parameter#C9D1D9
entity.name.tag#DB6B6B
keyword#D2A8FF
keyword.operator.assignment#cab577
keyword.operator.type, keyword.operator.optional#C9D1D9
storage, storage.type#D2A8FF
storage.type.function.arrow#cab577
storage.modifier.package, storage.modifier.import, storage.type.java#C9D1D9
string, punctuation.definition.string, string punctuation.section.embedded source#79C0FF
punctuation.definition.template-expression, punctuation.definition.parameters, punctuation.definition.block#C9D1D9
support#cab577
support.type#D2A8FF
source.json support.type.property-name#79C0FF
meta.property-name#cab577
variable#FFA657
variable.other#C9D1D9
invalid.broken#F0F6FCitalic
invalid.deprecated#F0F6FCitalic
invalid.illegal#F0F6FCitalic
invalid.unimplemented#F0F6FCitalic
carriage-return#F0F6FCitalic underline
message.error#D2A8FF
string source#C9D1D9
string variable#cab577
source.regexp, string.regexp#79C0FF
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#79C0FF
string.regexp constant.character.escape#DB6B6Bbold
support.constant#cab577
support.variable#cab577
meta.module-reference#cab577
punctuation.definition.list.begin.markdown#FFA657
markup.heading, markup.heading entity.name#cab577bold
markup.quote#DB6B6B
markup.italic#C9D1D9italic
markup.bold#C9D1D9bold
markup.raw#cab577
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FFDCD7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#AFF5B4
markup.changed, punctuation.definition.changed#FFDFB6
markup.ignored, markup.untracked#C9D1D9
meta.diff.range#D2A8FFbold
meta.diff.header#cab577
meta.separator#cab577bold
meta.output#cab577
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#C9D1D9
brackethighlighter.unmatched#F85149
constant.other.reference.link, string.other.link#79C0FFunderline
ref.matchtext#FFFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6