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#E8E8F0
  • activityBar.foreground#1E1E2E
  • activityBarBadge.background#9655FF
  • activityBarBadge.foreground#F7F7FF
  • badge.background#9655FF
  • badge.foreground#F7F7FF
  • button.background#9655FF
  • button.foreground#F7F7FF
  • button.hoverBackground#C0C0CE
  • button.secondaryBackground#5E5A76
  • button.secondaryForeground#C0C0CE
  • button.secondaryHoverBackground#2E2E30
  • dropdown.background#E8E8F0
  • dropdown.border#5E5A76
  • dropdown.foreground#C0C0CE
  • editor.background#F7F7FF
  • editor.foreground#1E1E2E
  • editor.lineHighlightBackground#E8E8F0
  • editor.selectionBackground#FEF5BC
  • editorCursor.foreground#F7F7FF
  • editorGroup.emptyBackground#E8E8F0
  • editorGroupHeader.tabsBackground#E8E8F0
  • editorGroupHeader.tabsBorder#E8E8F0
  • editorLineNumber.activeForeground#1E1E2E
  • editorLineNumber.foreground#6E6A86
  • editorWhitespace.foreground#5E5A76
  • input.background#E8E8F0
  • input.border#5E5A76
  • input.foreground#C0C0CE
  • input.placeholderForeground#5E5A76
  • sideBar.background#E8E8F0
  • sideBar.foreground#1E1E2E
  • sideBarSectionHeader.background#E8E8F0
  • sideBarSectionHeader.foreground#1E1E2E
  • statusBar.background#E8E8F0
  • statusBar.debuggingBackground#D78284
  • statusBar.debuggingForeground#1E1E2E
  • statusBar.foreground#1E1E2E
  • statusBar.noFolderBackground#E8E8F0
  • tab.activeBackground#C0C0CE
  • tab.activeForeground#1E1E20
  • tab.border#E8E8F0
  • tab.inactiveBackground#E8E8F0
  • tab.inactiveForeground#6E6A86
  • titleBar.activeBackground#E8E8F0
  • titleBar.activeForeground#1E1E2E
  • titleBar.inactiveBackground#E8E8F0
  • titleBar.inactiveForeground#6E6A86

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E6A86italic
string, punctuation.definition.string#FEF5BC—
string.special#F28FAD—
constant, constant.builtin#F28FADbold
number#D8A080—
boolean#F28FAD—
function, entity.name.function#005F87bold
keyword, keyword.control#9655FFbold
operator#6E6A86—
variable, variable.builtin#1E1E2Eitalic
type, entity.name.type#A0A0D0italic
attribute, entity.name.attribute#9655FF—
namespace#9655FF—
punctuation#1E1E2E—
symbol#F28FADitalic
markup.heading#9655FFbold
markup.bold#1E1E2Ebold
markup.italic#1E1E2Eitalic
markup.link.url#005F87underline
markup.link.text#9655FF—
markup.quote#6E6A86italic
meta.diagnostic.error#E78284bold
meta.diagnostic.warning#E5B880bold
meta.diagnostic.info#7A9CCCbold
meta.diagnostic.hint#7BB5A8bold
diff.add#86BA75—
diff.delete#D78284—
diff.change#D5B880—
NyxVamp by Zeetech - VS Code Theme