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—
NyxVamp by Zeetech - VS Code Theme