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#26394b
  • activityBar.foreground#e1edf7
  • activityBarBadge.background#f0c94c
  • activityBarBadge.foreground#26394b
  • badge.background#8fc1ff
  • badge.foreground#26394b
  • button.background#f0c94c
  • button.foreground#26394b
  • button.hoverBackground#8fc1ff
  • dropdown.background#26394b
  • dropdown.border#8fa6ba6b
  • editor.background#26394b
  • editor.findMatchBackground#f0c94c61
  • editor.findMatchHighlightBackground#8fc1ff38
  • editor.foreground#e1edf7
  • editor.inactiveSelectionBackground#8fc1ff2e
  • editor.lineHighlightBackground#e1edf70f
  • editor.selectionBackground#8fc1ff52
  • editorCursor.foreground#f0c94c
  • editorIndentGuide.activeBackground1#8fc1ff6b
  • editorIndentGuide.background1#8fa6ba33
  • editorLineNumber.activeForeground#e1edf7
  • editorLineNumber.foreground#8fa6ba
  • editorWidget.background#26394b
  • editorWidget.border#8fa6ba6b
  • focusBorder#f0c94c
  • input.background#26394b
  • input.border#8fa6ba6b
  • input.foreground#e1edf7
  • list.activeSelectionBackground#8fc1ff52
  • list.activeSelectionForeground#e1edf7
  • list.hoverBackground#8fc1ff2e
  • panel.background#26394b
  • panel.border#8fa6ba6b
  • sideBar.background#26394b
  • sideBar.border#8fa6ba6b
  • sideBar.foreground#e1edf7
  • sideBarTitle.foreground#e1edf7
  • statusBar.background#f0c94c
  • statusBar.foreground#26394b
  • statusBar.noFolderBackground#8fc1ff
  • tab.activeBackground#26394b
  • tab.activeForeground#e1edf7
  • tab.border#8fa6ba6b
  • tab.inactiveBackground#8fa6ba59
  • tab.inactiveForeground#8fa6ba
  • terminal.ansiBlack#26394b
  • terminal.ansiBlue#8fc1ff
  • terminal.ansiBrightBlack#8fa6ba
  • terminal.ansiBrightBlue#f5ecdc
  • terminal.ansiBrightCyan#79c6d6
  • terminal.ansiBrightGreen#aed69b
  • terminal.ansiBrightMagenta#f0c94c
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e1edf7
  • terminal.ansiBrightYellow#ef9a70
  • terminal.ansiCyan#79c6d6
  • terminal.ansiGreen#aed69b
  • terminal.ansiMagenta#f0c94c
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e1edf7
  • terminal.ansiYellow#ef9a70
  • terminal.background#26394b
  • terminal.foreground#e1edf7
  • titleBar.activeBackground#26394b
  • titleBar.activeForeground#e1edf7
  • titleBar.border#8fa6ba6b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#e1edf7
comment, punctuation.definition.comment#8fa6baitalic
keyword, storage, storage.type#f0c94citalic bold
constant.numeric, constant.language, support.constant#ef9a70
string, constant.other.symbol#aed69b
variable, variable.other, support.variable#e2cd82
entity.name.function, support.function#f5ecdc
entity.name.type, support.class, entity.name.class#8fc1ff
entity.name.tag, punctuation.definition.tag#ef9970
entity.other.attribute-name#8fc1ff
variable.other.property, support.type.property-name#79c6d6
keyword.operator, punctuation, meta.brace#cfad83
meta, meta.object-literal.key#adc5d9
MonoLisa for VS Code by MonoLisa - VS Code Theme