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.background#24212A
  • activityBar.foreground#F2F8F6
  • badge.background#6A6385
  • badge.foreground#F8F8F2
  • button.background#6A6385
  • commandCenter.activeBackground#322A44
  • commandCenter.background#1E1B24
  • commandCenter.foreground#D2D1DB
  • debugToolBar.background#201D25
  • diffEditor.insertedTextBackground#3F776580
  • diffEditor.removedTextBackground#903B6480
  • dropdown.background#3B3442
  • dropdown.listBackground#1E1D22
  • editor.background#171618
  • editor.findMatchBackground#6449d2
  • editor.findMatchHighlightBackground#5338be6d
  • editor.foreground#F2F7F8
  • editor.lineHighlightBackground#5229cd11
  • editor.selectionBackground#262633
  • editor.selectionHighlightBackground#5c558480
  • editor.wordHighlightBackground#4b4a565c
  • editor.wordHighlightStrongBackground#6d6a8ea5
  • editorBracketHighlight.foreground1#5fd4a3
  • editorBracketHighlight.foreground2#6fc7d3
  • editorBracketHighlight.foreground3#6e95dd
  • editorBracketHighlight.foreground4#8381f1
  • editorBracketHighlight.foreground5#8c5fd4
  • editorBracketHighlight.foreground6#cb6edd
  • editorCursor.foreground#d0faec
  • editorGroup.border#393440
  • editorGroup.dropBackground#403C4B80
  • editorGroupHeader.tabsBackground#111112
  • editorHoverWidget.background#3B3442
  • editorHoverWidget.border#6A6385
  • editorIndentGuide.activeBackground1#ffffff9d
  • editorIndentGuide.background1#3f3c446d
  • editorLineNumber.activeForeground#ae83ef
  • editorLineNumber.foreground#afaeaf
  • editorSuggestWidget.background#29262F
  • editorSuggestWidget.border#6A6385
  • editorWhitespace.foreground#6c4cd521
  • editorWidget.background#1C1A1F
  • focusBorder#6A6385
  • inlineChat.background#ffffff
  • inlineChat.shadow#4d37714f
  • input.background#3B3442
  • inputOption.activeBorder#6A6385
  • inputValidation.errorBackground#942754
  • inputValidation.errorBorder#cb58f8
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819AFF
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#E2E22E
  • list.activeSelectionBackground#6A6385
  • list.dropBackground#393344
  • list.focusBackground#393344
  • list.highlightForeground#F2F8F6
  • list.hoverBackground#34303C
  • list.inactiveSelectionBackground#393344
  • menu.background#1E1D22
  • menu.foreground#CCCCCC
  • minimap.selectionHighlight#878B9180
  • panel.border#3C3744
  • panelTitle.activeBorder#6A6385
  • panelTitle.activeForeground#F2F8F8
  • panelTitle.inactiveForeground#6A6385
  • peekView.border#6A6385
  • peekViewEditor.background#24212A
  • peekViewEditor.matchHighlightBackground#6A6385
  • peekViewResult.background#1F1E23
  • peekViewResult.matchHighlightBackground#6A6385
  • peekViewResult.selectionBackground#464356
  • peekViewTitle.background#1C1E1F
  • pickerGroup.foreground#6A6385
  • progressBar.background#6A6385
  • scrollbar.shadow#4d37714f
  • selection.background#B0B3B8
  • settings.focusedRowBackground#39344390
  • sideBar.background#1F1E23
  • sideBarSectionHeader.background#28252E
  • statusBar.background#3B3442
  • statusBar.debuggingBackground#6A6385
  • statusBar.noFolderBackground#3B3442
  • statusBarItem.remoteBackground#4018AC
  • tab.border#1F1E21
  • tab.inactiveBackground#302B36
  • tab.inactiveForeground#CABECF
  • tab.lastPinnedBorder#3B3442
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6C7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819AFF
  • terminal.ansiBrightCyan#69BBFD
  • terminal.ansiBrightGreen#5FD4AF
  • terminal.ansiBrightMagenta#b888e6
  • terminal.ansiBrightRed#cb58f8
  • terminal.ansiBrightWhite#F8F8F2
  • terminal.ansiBrightYellow#E2E22E
  • terminal.ansiCyan#49ADBC
  • terminal.ansiGreen#79DD6E
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#E3E3DD
  • terminal.ansiYellow#B3B42B
  • terminal.background#151515
  • titleBar.activeBackground#2A2731CC
  • titleBar.activeForeground#E3E0EA
  • titleBar.inactiveBackground#2A2731
  • titleBar.inactiveForeground#E3E0EA88
  • widget.shadow#6a39cd70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
symbol.unrecognized#d3d3cd9c
keyword.operator.Function, keyword.operator.BlankNullSequence, keyword.operator.BlankSequence, keyword.operator.Optional, keyword.operator.Blank, keyword.other.Slot, keyword.other.SlotSequence#f14a98
keyword.operator#99cc99
punctuation.section#cccccc
comment#75715E
constant.numeric#b888e6
constant.language#b888e6
constant.character, constant.other#b888e6
variable
keyword#cb58f8
storage#cb58f8
storage.type#8df7ffitalic
entity.name.class#2ee2b5underline
entity.other.inherited-class#2ee2b5italic underline
entity.name.function#2ee2b5
variable.function#d3e2e6
variable.parameter#be1ffditalic
entity.name.tag#cb58f8
entity.other.attribute-name#2ee2b5
support.function#8df7ff
support.function.undocumented#eeeeee
support.constant#8df7ff
support.type, support.class#8df7ffitalic
support.other.variable
invalid#FF0000
meta.embedded, source.groovy.embedded#f2f6f8
comment#706374
punctuation.definition.string.begin#a5a47a
punctuation.definition.string.end#a5a47a
string#fff1a0
punctuation.definition.template-expression, punctuation.section.embedded#cb58f8
meta.template.expression#F8F8F2
constant.numeric#b888e6
constant.language#b888e6
constant.character, constant.other#b888e6
variable#f2f8f8
keyword#cb58f8
storage#cb58f8
storage.type#8df7ffitalic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#2ee2b5underline
entity.other.inherited-class#2ee2b5italic underline
entity.name.function#2ee2b5
variable.parameter#be1ffditalic
entity.name.tag#cb58f8
entity.other.attribute-name#2ee2b5
support.constant#8df7ff
support.type, support.class#8df7ffitalic
support.other.variable
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#cb58f8
markup.inserted#2ee2b5
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#b888e6A0
entity.name.filename.find-in-files#E6DB74
markup.quote#cb58f8
markup.list#E6DB74
markup.bold, markup.italic#8df7ff
markup.inline.raw#be1ffd
markup.heading#2ee2b5
markup.heading.setext#2ee2b5bold
markup.heading.markdownbold
markup.quote.markdown#75715Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#b888e6
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#F8F8F2
punctuation.definition.list.begin.markdown#2ee2b5
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
variable.language#be1ffd
ToneWL by Tone - VS Code Theme