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#272727
  • activityBar.dropBackground#3b3b3b
  • activityBar.foreground#d6d6d6
  • badge.background#797979
  • badge.foreground#d6d6d6
  • button.background#757575
  • debugToolBar.background#242424
  • diffEditor.insertedTextBackground#66852880
  • diffEditor.removedTextBackground#90274A80
  • dropdown.background#414141
  • dropdown.listBackground#242424
  • editor.background#2e2e2e
  • editor.foreground#d6d6d6
  • editor.lineHighlightBackground#343434
  • editor.selectionBackground#bacbda3d
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4a4a7680
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorCursor.foreground#d6d6d6
  • editorGroup.border#2f6980
  • editorGroup.dropBackground#3f3f3f80
  • editorGroupHeader.tabsBackground#272727
  • editorHoverWidget.background#414141
  • editorHoverWidget.border#757575
  • editorIndentGuide.activeBackground#757575
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#c2c2bf
  • editorLineNumber.foreground#949494
  • editorSuggestWidget.background#292929
  • editorSuggestWidget.border#727272
  • editorWhitespace.foreground#444444
  • editorWidget.background#202020
  • focusBorder#757575
  • input.background#414141
  • inputOption.activeBorder#747474
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#707070
  • list.dropBackground#424242
  • list.focusBackground#3f3f3f
  • list.highlightForeground#d6d6d6
  • list.hoverBackground#414141
  • list.inactiveSelectionBackground#3f3f3f
  • menu.background#202020
  • menu.foreground#d6d6d6
  • minimap.background#292929
  • minimapSlider.background#ffffff57
  • minimapSlider.hoverBackground#ffffff83
  • panel.border#424242
  • panelTitle.activeBorder#707070
  • panelTitle.activeForeground#6aafe7
  • panelTitle.inactiveForeground#727272
  • peekView.border#6e6e6e
  • peekViewEditor.background#2b2b2b
  • peekViewEditor.matchHighlightBackground#777777
  • peekViewResult.background#202020
  • peekViewResult.matchHighlightBackground#797979
  • peekViewResult.selectionBackground#3d3d3d
  • peekViewTitle.background#202020
  • pickerGroup.foreground#727272
  • progressBar.background#757575
  • selection.background#c9c9c9
  • settings.numberInputBackground#363636
  • settings.textInputBackground#303030
  • sideBar.background#1f1f1f
  • sideBarSectionHeader.background#272727
  • statusBar.background#424242
  • statusBar.debuggingBackground#696969
  • statusBar.noFolderBackground#444444
  • tab.activeBackground#1e5c8d
  • tab.border#386483
  • tab.inactiveBackground#3d3d3d
  • tab.inactiveForeground#b4b4b4
  • tab.modifiedBorder#007acc
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#d6d6d6
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#c4265e
  • terminal.ansiWhite#d6d6d6
  • terminal.ansiYellow#B3B42B
  • titleBar.activeBackground#1a1a1a
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d6d6d6
meta.embedded, source.groovy.embedded#d6d6d6
comment#965c5c
string#E6DB74
punctuation.definition.template-expression, punctuation.section.embedded#F92672
meta.template.expression#d6d6d6
constant.numeric#AE81FF
constant.language#AE81FF
constant.character, constant.other#d6d6d6
variable#d6d6d6
keyword#2EDC00
storage#F92672
storage.type#66D9EFitalic
entity.name.type, entity.name.class#A6E22Eunderline
entity.other.inherited-class#A6E22Eitalic underline
entity.name.function#A6E22E
keyword.control.flow#2EDC00FF
support.function, meta.function-call, keyword.other.special-method, meta.block-level, markup.changed.git_gutter #66d9ee
punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python , punctuation.separator.arguments.python#d6d6d6
meta.function-call.arguments#d6d6d6
variable.parameter#FD971Fitalic
keyword.operator.assignment#f92672ff
entity.name.tag#26f965
entity.other.attribute-name#A6E22E
support.function#66D9EF
support.constant#66D9EF
support.type, support.class#66D9EFitalic
support.type.property-name.json#2EDC00FF
meta.structure.dictionary.json#d6d6d6
punctuation.definition.array.begin.json, punctuation.definition.array.end.json#d6d6d6
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json#71adfc
support.other.variable
invalid#d6d6d6
invalid.deprecated#d6d6d6
constant.character.escape#8a4ef8
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#d6d6d6
entity.name.filename.find-in-files#E6DB74
markup.quote#F92672
markup.list#E6DB74
markup.bold, markup.italic#66D9EF
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22E
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#FD971F
v Maya Theme by Vitalie Tz - VS Code Theme