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.activeBorder#2D7DE5
  • activityBar.background#FDFDFD
  • activityBar.border#153A94
  • activityBar.foreground#2D7DE5
  • activityBar.inactiveForeground#153A94
  • activityBarBadge.background
  • activityBarBadge.foreground#FDFDFD
  • badge.background
  • badge.foreground#FFFFFF
  • button.background#153A94
  • checkbox.background#FFFFFF
  • editor.background#FDFDFD
  • editorLineNumber.activeForeground#006DFF
  • editorLineNumber.foreground#8EB8F0
  • editorWidget.background#FDFDFD
  • editorWidget.border#153A94
  • editorWidget.foreground#153A94
  • focusBorder#153A94
  • foreground#000000
  • icon.foreground#7E96FD
  • input.background#FFFFFF
  • input.border#153A94
  • list.activeSelectionBackground#ADCAF0
  • list.activeSelectionForeground#010101
  • list.focusBackground#ADCAF0A5
  • list.hoverBackground#ADCAF0A5
  • panel.border#153A94
  • panel.dropBorder#153A94
  • panelSection.dropBackground#8D461B
  • panelTitle.activeBorder#2D7DE5
  • panelTitle.activeForeground#2D7DE5
  • panelTitle.inactiveForeground#153A94
  • scrollbarSlider.activeBackground#ADCAF099
  • scrollbarSlider.background#153A9400
  • scrollbarSlider.hoverBackground#ADCAF099
  • sideBar.background#FDFDFD
  • sideBar.border#153A94
  • sideBarSectionHeader.background#153A94
  • sideBarSectionHeader.border#153A94
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#153A94
  • statusBar.background#FDFDFD
  • statusBar.border#153A94
  • statusBar.debuggingBackground#153A94
  • statusBar.debuggingForeground#FDFDFD
  • statusBar.foreground#153A94
  • statusBar.noFolderBackground#FDFDFD
  • statusBarItem.prominentBackground#282e34
  • statusBarItem.remoteBackground#153A94
  • statusBarItem.remoteForeground#ADCAF0
  • tab.unfocusedActiveBorder#44972A
  • tab.unfocusedActiveBorderTop#44972A
  • terminal.background#FDFDFD
  • terminal.foreground#153A94
  • terminalCursor.background#FDFDFD
  • terminalCursor.foreground#153A94
  • titleBar.activeBackground#FDFDFD
  • titleBar.activeForeground#153A94
  • titleBar.border#153A94
  • titleBar.inactiveBackground#FDFDFD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#19921C—
constant.other.placeholder, constant.character#cf222e—
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#0550ae—
entity.name, meta.export.default, meta.definition.variable#953800—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#1f2328—
entity.name.function#8250df—
entity.name.tag, support.class.component#FF5D1A—
keyword#cf222e—
storage, storage.type#cf222e—
storage.modifier.package, storage.modifier.import, storage.type.java#1f2328—
string, string punctuation.section.embedded source#0a3069—
support#0550ae—
meta.property-name#0550ae—
variable#953800—
variable.other#1f2328—
invalid.broken#82071eitalic
invalid.deprecated#82071eitalic
invalid.illegal#82071eitalic
invalid.unimplemented#82071eitalic
carriage-return#f6f8faitalic underline
message.error#82071e—
string variable#0550ae—
source.regexp, string.regexp#0a3069—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#0a3069—
string.regexp constant.character.escape#116329bold
support.constant#0550ae—
support.variable#0550ae—
support.type.property-name.json#BE1D1D—
meta.module-reference#0550ae—
punctuation.definition.list.begin.markdown#953800—
markup.heading, markup.heading entity.name#0550aebold
markup.quote#116329—
markup.italic#1f2328italic
markup.bold#1f2328bold
markup.underline—underline
markup.strikethrough—strikethrough
markup.inline.raw#0550ae—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#82071e—
punctuation.section.embedded#cf222e—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#116329—
markup.changed, punctuation.definition.changed#953800—
markup.ignored, markup.untracked#eaeef2—
meta.diff.range#8250dfbold
meta.diff.header#0550ae—
meta.separator#0550aebold
meta.output#0550ae—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#57606a—
brackethighlighter.unmatched#82071e—
constant.other.reference.link, string.other.link#0a3069—