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