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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5E5A76italic
string, punctuation.definition.string#8FBF8F—
string.special#F28FAD—
constant, constant.builtin#F28FADbold
number#D8A080—
boolean#F28FAD—
function, entity.name.function#7FAFD7bold
keyword, keyword.control#F5C2E7bold
operator#C0C0CE—
variable, variable.builtin#C0C0CEitalic
type, entity.name.type#A0A0D0italic
attribute, entity.name.attribute#F5C2E7—
namespace#A090C0—
punctuation#C0C0CE—
symbol#F28FADitalic
markup.heading#F5C2E7bold
markup.bold#F5C2E7bold
markup.italic#F5C2E7italic
markup.link.url#7FAFD7underline
markup.link.text#F5C2E7—
markup.quote#5E5A76italic
meta.diagnostic.error#D78284bold
meta.diagnostic.warning#D5B880bold
meta.diagnostic.info#7A9CCCbold
meta.diagnostic.hint#7BB5A8bold
diff.add#86BA75—
diff.delete#D78284—
diff.change#D5B880—