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#0A0A0A
  • activityBar.foreground#FFFFFF
  • badge.background#F92672
  • badge.foreground#FFFFFF
  • button.background#F92672
  • button.foreground#FFFFFF
  • debugToolBar.background#0A0A0A
  • dropdown.background#1E1E1E
  • dropdown.listBackground#0A0A0A
  • editor.background#121212
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#1E1E1E
  • editor.selectionBackground#264F78
  • editor.selectionHighlightBackground#1E3A5F
  • editor.wordHighlightBackground#3A3A78
  • editor.wordHighlightStrongBackground#5A5A9A
  • editorCursor.foreground#F92672
  • editorGroup.border#444444
  • editorGroup.dropBackground#1E1E1E80
  • editorGroupHeader.tabsBackground#0A0A0A
  • editorHoverWidget.border#F92672
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#555555
  • editorSuggestWidget.border#F92672
  • editorWhitespace.foreground#333333
  • editorWidget.background#0A0A0A
  • input.background#1E1E1E
  • input.foreground#FFFFFF
  • inputValidation.errorBackground#5C0000
  • inputValidation.errorBorder#FF0000
  • inputValidation.infoBackground#003D5C
  • inputValidation.infoBorder#66D9EF
  • inputValidation.warningBackground#5C4D00
  • inputValidation.warningBorder#FFCC00
  • list.activeSelectionBackground#264F78
  • list.dropBackground#1E1E1E
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#1E3A5F
  • list.inactiveSelectionBackground#1E1E1E
  • menu.background#0A0A0A
  • menu.foreground#E0E0E0
  • minimap.selectionHighlight#264F78
  • panel.border#555555
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#75715E
  • peekView.border#F92672
  • peekViewResult.background#0A0A0A
  • peekViewTitle.background#0A0A0A
  • ports.iconRunningProcessForeground#B0B0B0
  • progressBar.background#F92672
  • quickInputList.focusBackground#1E1E1E
  • selection.background#264F78
  • settings.focusedRowBackground#1E1E1E5A
  • sideBar.background#0A0A0A
  • statusBar.background#1E1E1E
  • statusBar.debuggingBackground#F92672
  • statusBar.noFolderBackground#1E1E1E
  • statusBarItem.remoteBackground#FF7700
  • tab.border#0A0A0A
  • tab.inactiveForeground#B0B0B0
  • tab.lastPinnedBorder#555555
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088FF
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#55AAFF
  • terminal.ansiBrightCyan#55FFFF
  • terminal.ansiBrightGreen#55FF55
  • terminal.ansiBrightMagenta#FF55FF
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF55
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#00FF00
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFFF00
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python, variable#FFFFFF
comment#888888italic
string#66D9EF
string punctuation.definition.string#66D9EFbold
constant.numeric#52F97Abold
constant.language#52F97Abold
constant.character, constant.other#52F97A
keyword#F92672bold
keyword.operator#F92672bold
storage#F92672
storage.type#66D9EFitalic
entity.name.type, entity.name.class#A992F0underline
entity.name.function#A992F0bold
variable.parameter#FFC324italic
variable.other.object, variable.other.object.ts, variable.other.property.ts#FFC324
variable.other.object.property, variable.other.property#FFFFFF
entity.name.tag#F92672bold
entity.other.attribute-name#A992F0
support.function#66D9EF
invalid#FF0000underline wavy
markup.heading#A992F0bold
markup.raw.inline#FFC324
Monokai Plus Ultra by k3v5 - VS Code Theme