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#DB6B6B—
constant.language.import-export-all#C9D1D9—
meta.object.member, variable.other.property#cab577—
meta.brace, meta.objectliteral#C9D1D9—
entity, entity.name, support.function#D2A8FF—
entity.name#DB6B6B—
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—
42nd by fawkes42 - VS Code Theme