Skip to main content
CodingTheme

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#052441
  • activityBar.foreground#CE0F5F
  • activityBarBadge.background#958bcb
  • activityBarBadge.foreground#ededed
  • badge.background#CE0F5F
  • badge.foreground#ededed
  • button.background#CE0F5F
  • debugTokenExpression.number#ae81ff
  • debugTokenExpression.value#989898
  • debugToolBar.background#0e3354
  • debugView.stateLabelBackground#0e3354
  • debugView.stateLabelForeground#958bcb
  • debugView.valueChangedHighlight#377380
  • diffEditor.insertedTextBackground#67862980
  • diffEditor.removedTextBackground#91284B80
  • dropdown.background#052441
  • dropdown.listBackground#0e3354
  • editor.background#062037
  • editor.findMatchBackground#91003caa
  • editor.findMatchBorder#91003c
  • editor.findMatchHighlightBackground#93A3D640
  • editor.findMatchHighlightBorder#91003c
  • editor.foreground#958bcb
  • editor.lineHighlightBackground#91003c45
  • editor.selectionBackground#93A3D640
  • editor.selectionHighlightBorder#ce296e40
  • editor.wordHighlightBackground#ce296e40
  • editor.wordHighlightStrongBackground#ce296e40
  • editorCursor.foreground#ce296e
  • editorGroup.border#062037
  • editorGroup.dropBackground#062037
  • editorGroupHeader.tabsBackground#052441
  • editorHoverWidget.background#062037
  • editorHoverWidget.border#062037
  • editorIndentGuide.activeBackground#0e3354
  • editorIndentGuide.background#052441
  • editorLineNumber.activeForeground#958bcb
  • editorLineNumber.foreground#958bcb
  • editorSuggestWidget.background#052441
  • editorSuggestWidget.border#052441
  • editorSuggestWidget.foreground#958bcb
  • editorSuggestWidget.highlightForeground#958bcb
  • editorSuggestWidget.selectedBackground#052441
  • editorWhitespace.foreground#958bcb
  • editorWidget.background#052441
  • editorWidget.foreground#958bcb
  • extensionButton.prominentBackground#91003c90
  • extensionButton.prominentForeground#ededed
  • extensionButton.prominentHoverBackground#91003c
  • focusBorder#052441
  • gitDecoration.addedResourceForeground#5e8019
  • gitDecoration.conflictingResourceForeground#995b14
  • gitDecoration.deletedResourceForeground#991414
  • gitDecoration.ignoredResourceForeground#9d999a
  • gitDecoration.modifiedResourceForeground#377380
  • gitDecoration.submoduleResourceForeground#333333
  • gitDecoration.untrackedResourceForeground#333333
  • input.background#052441
  • input.border#958bcb
  • input.foreground#958bcb
  • input.placeholderForeground#93A3D650
  • inputOption.activeBackground#06203750
  • inputOption.activeBorder#958bcb
  • inputOption.activeForeground#958bcb
  • inputValidation.errorBackground#91284B80
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#958bcb
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#858629
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#0e3354
  • list.activeSelectionForeground#958bcb
  • list.dropBackground#052441
  • list.focusBackground#0e3354
  • list.highlightForeground#958bcb
  • list.hoverBackground#062037
  • list.hoverForeground#958bcb
  • list.inactiveSelectionBackground#0e3354
  • list.inactiveSelectionForeground#958bcb
  • menu.background#0e3354
  • menu.foreground#958bcb
  • notifications.foreground#958bcb
  • panel.border#052441
  • panelTitle.activeBorder#052441
  • panelTitle.activeForeground#958bcb
  • panelTitle.inactiveForeground#824d70
  • peekView.border#052441
  • peekViewEditor.background#052441
  • peekViewEditor.matchHighlightBackground#052441
  • peekViewResult.background#0e3354
  • peekViewResult.matchHighlightBackground#052441
  • peekViewResult.selectionBackground#0e3354
  • peekViewTitle.background#052441
  • pickerGroup.foreground#ce296e
  • progressBar.background#052441
  • selection.background#ce296e
  • settings.dropdownForeground#958bcb
  • settings.headerForeground#ce296e
  • settings.modifiedItemIndicator#ce296e
  • settings.numberInputBackground#052441
  • settings.numberInputForeground#958bcb
  • settings.textInputBackground#052441
  • settings.textInputForeground#958bcb
  • sideBar.background#052441
  • sideBar.foreground#958bcb
  • sideBarSectionHeader.background#052441
  • sideBarSectionHeader.foreground#ce296e
  • statusBar.background#91003c
  • statusBar.debuggingBackground#052441
  • statusBar.noFolderBackground#052441
  • statusBarItem.remoteBackground#AC6218
  • tab.activeBorder#91003c
  • tab.activeForeground#ce296e
  • tab.border#062037
  • tab.inactiveBackground#052441
  • tab.inactiveForeground#958bcb
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#052441
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • titleBar.activeBackground#062037
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#958bcb
comment#7b778f
string#d574c0
punctuation.definition.template-expression, punctuation.section.embedded#6BAADC
meta.template.expression#6BAADC
constant.numeric#AE81FF
constant.language#AE81FF
constant.character, constant.other#AE81FF
variable#F8F8F2
keyword#6BAADC
storage#6BAADC
storage.type#cc6264
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#a054c6
entity.other.inherited-class#5c79b8italic
entity.name.function#2a96a4
variable.parameter#ae7a5aitalic
entity.name.tag#509370
entity.other.attribute-name#2a96a4
support.function#5b97cb
support.constant#5b97cb
support.type, support.class#5b97cbitalic
invalid#eb4783
invalid.deprecated#AE81FF
meta.structure.dictionary.json string.quoted.double.json#e479b4
meta.diff, meta.diff.header#052441
markup.deleted#eb4783
markup.inserted#2a96a4
markup.changed#d574c0
constant.numeric.line-number.find-in-files - match#AE81FF
entity.name.filename.find-in-files#d574c0
markup.quote#eb4783
markup.list#d574c0
markup.bold, markup.italic#2a6394
markup.inline.raw#ae7a5a
markup.heading#2a96a4
markup.heading.setext#2a96a4
token.info-token#5988da
token.warn-token#cb9d48
token.error-token#d76363
token.debug-token#bf93de
variable.language#ae7a5a
variable, variable.language#d753b2

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Bloc by Varun Bardwaj - VS Code Theme