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#1E1E2E
  • activityBar.foreground#D9E0EE
  • activityBarBadge.background#F28FAD
  • activityBarBadge.foreground#1E1E2E
  • badge.background#F28FAD
  • badge.foreground#1E1E2E
  • button.background#F28FAD
  • button.foreground#1E1E2E
  • button.hoverBackground#D9E0EE
  • button.secondaryBackground#6E6A86
  • button.secondaryForeground#D9E0EE
  • button.secondaryHoverBackground#494D64
  • dropdown.background#1E1E2E
  • dropdown.border#6E6A86
  • dropdown.foreground#D9E0EE
  • editor.background#1E1E2E
  • editor.foreground#D9E0EE
  • editor.lineHighlightBackground#2E2E3E
  • editor.selectionBackground#494D64
  • editorCursor.foreground#F5C2E7
  • editorGroup.emptyBackground#1E1E2E
  • editorGroupHeader.tabsBackground#1E1E2E
  • editorGroupHeader.tabsBorder#1E1E2E
  • editorLineNumber.activeForeground#D9E0EE
  • editorLineNumber.foreground#6E6A86
  • editorWhitespace.foreground#6E6A86
  • input.background#1E1E2E
  • input.border#6E6A86
  • input.foreground#D9E0EE
  • input.placeholderForeground#6E6A86
  • sideBar.background#1E1E2E
  • sideBar.foreground#D9E0EE
  • sideBarSectionHeader.background#302D41
  • sideBarSectionHeader.foreground#D9E0EE
  • statusBar.background#302D41
  • statusBar.debuggingBackground#E78284
  • statusBar.debuggingForeground#D9E0EE
  • statusBar.foreground#D9E0EE
  • statusBar.noFolderBackground#1E1E2E
  • tab.activeBackground#302D41
  • tab.activeForeground#D9E0EE
  • tab.border#1E1E2E
  • tab.inactiveBackground#1E1E2E
  • tab.inactiveForeground#6E6A86
  • titleBar.activeBackground#1E1E2E
  • titleBar.activeForeground#D9E0EE
  • titleBar.inactiveBackground#1E1E2E
  • titleBar.inactiveForeground#6E6A86

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E6A86italic
string, punctuation.definition.string#ABE9B3
string.special#F28FAD
constant, constant.builtin#F28FADbold
number#F8BD96
boolean#F28FAD
function, entity.name.function#96CDFBbold
keyword, keyword.control#F5C2E7bold
operator#D9E0EE
variable, variable.builtin#D9E0EEitalic
type, entity.name.type#C9CBFFitalic
attribute, entity.name.attribute#F5C2E7
namespace#DDB6F2
punctuation#D9E0EE
symbol#F28FADitalic
markup.heading#F5C2E7bold
markup.bold#F5C2E7bold
markup.italic#F5C2E7italic
markup.link.url#96CDFBunderline
markup.link.text#F5C2E7
markup.quote#6E6A86italic
meta.diagnostic.error#E78284bold
meta.diagnostic.warning#E5C890bold
meta.diagnostic.info#8CAAEEbold
meta.diagnostic.hint#8BD5CAbold
diff.add#A6DA95
diff.delete#E78284
diff.change#E5C890