Skip to main content
Coding Theme

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#262626
  • activityBar.border#ffffff19
  • activityBar.inactiveForeground#ffffff7f
  • activityBarBadge.background#EF3E30
  • editor.background#171717
  • editor.findMatchBackground#FFFF0B7F
  • editor.findMatchBorder#FFFF0B
  • editor.findMatchHighlightBackground#FFFF0B3F
  • editor.findMatchHighlightBorder#FFFF0B7F
  • editor.foreground#ffffffd8
  • editor.inactiveSelectionBackground#363636
  • editor.lineHighlightBackground#00000059
  • editor.lineHighlightBorder#0000
  • editor.selectionBackground#314F78
  • editor.selectionHighlightBackground#314F787f
  • editor.wordHighlightBackground#314F78
  • editor.wordHighlightStrongBackground#314F78
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff
  • editorError.foreground#EF3E30
  • editorGroup.emptyBackground#1e1e1e
  • editorGutter.addedBackground#9CDD2D
  • editorGutter.background#171717
  • editorGutter.deletedBackground#EF3E30
  • editorGutter.modifiedBackground#95BFDD
  • editorIndentGuide.activeBackground#ffffff3f
  • editorIndentGuide.background#ffffff19
  • editorLineNumber.activeForeground#ffffffd8
  • editorLineNumber.foreground#ffffff3f
  • editorWarning.foreground#EED130
  • focusBorder#314f78
  • foreground#ffffffd8
  • gitDecoration.addedResourceForeground#9CDD2D
  • gitDecoration.deletedResourceForeground#EF3E30
  • gitDecoration.modifiedResourceForeground#95BFDD
  • list.activeSelectionBackground#0a60ff
  • list.errorForeground#FF7F75
  • list.invalidItemForeground#EF3E30
  • list.warningForeground#FFEC81
  • panel.background#1e1e1e
  • panel.border#ffffff19
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff7f
  • selection.background#314F78
  • sideBar.background#1e1e1e
  • sideBar.border#ffffff19
  • sideBar.foreground#ffffffd8
  • sideBarSectionHeader.background#1e1e1e
  • sideBarSectionHeader.border#ffffff19
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#407CA5
  • statusBar.debuggingBackground#EE8C30
  • statusBar.noFolderBackground#E469A7
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#ffffff7f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#407CA5
  • terminal.ansiBrightBlack#515151
  • terminal.ansiBrightBlue#95BFDD
  • terminal.ansiBrightCyan#C1E4F0
  • terminal.ansiBrightGreen#C3F470
  • terminal.ansiBrightMagenta#FABADA
  • terminal.ansiBrightRed#FF7F75
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFEC81
  • terminal.ansiCyan#90C8DA
  • terminal.ansiGreen#9CDD2D
  • terminal.ansiMagenta#E469A7
  • terminal.ansiRed#EF3E30
  • terminal.ansiWhite#dcdcdc
  • terminal.ansiYellow#EED130
  • terminal.background#171717
  • terminal.foreground#ffffffd8
  • terminalCursor.foreground#ffffff
  • textLink.foreground#3586FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffffff3f—
string#9CDD2D—
string constant.character.escape#C3F470italic
punctuation.definition.template-expression, punctuation.section.embedded#C3F470—
meta.template.expression, source meta.embedded#ebeced—
string.regexp#93E0C5—
constant.numeric, constant.language#E469A7—
variable.language.this, variable.language.self, variable.language.special.self, variable.parameter.function.language.special.self#fabada—
keyword, storage.type, storage.modifier, punctuation.separator.annotation#EE8C30—
meta.definition entity.name, meta.class entity.name.type, meta.enum.declaration entity.name.type, meta.interface entity.name.type, meta.class.ruby entity.name, meta.module.ruby entity.name, meta.function.method entity.name, meta.class.python entity.name, meta.function.python entity.name, meta.at-rule.function support.function, meta.at-rule.mixin entity.name, support.function.name entity.name#EED130—
support.type, meta.type.annotation, meta.return.type, meta.type entity.name.type, meta.return.type entity.name.type, meta.return.type support.type, meta.type.parameters entity.name.type, meta.type.parameters punctuation.definition, support.type.python, comment.typehint.type, comment.typehint.punctuation#FFEC81—
entity.other.inherited-class, meta.class entity.name.type.module, meta.class punctuation.accessor#93E0C5italic
meta.function.decorator entity.name.function, meta.function.decorator punctuation.definition, meta.decorator entity.name.function, meta.decorator punctuation.decorator, meta.decorator meta.brace#93E0C5—
entity.name.tag, punctuation.definition.tag#90C8DA—
entity.other.attribute-name, meta.tag.attributes keyword.operator.assignment, meta.tag.attributes punctuation.section.embedded#C1E4F0—
support.type.property-name#C1E4F0—
support.type.vendored.property-name#C1E4F0italic
support.constant.property-value, support.constant.color, constant.other.color, support.constant.font-name, meta.property-value support.function, meta.at-rule.include entity.name.function, meta.at-rule.extend entity.other.attribute-name.placeholder#FFEC81—
entity.other.attribute-name.id#FF7F75—
entity.other.attribute-name.class#93E0C5—
meta.attribute-selector, meta.attribute-selector keyword#C1E4F0—
keyword.other.important#EF3E30—
entity.other.attribute-name.placeholder#EED130—
meta.property-list entity.name.tag.reference#FABADA—
markup.heading#ffffffbold
markup.bold#ffffffbold
markup.italic#ffffffitalic
markup.raw, markup.inline.raw#ffffff—
markup.fenced_code punctuation.definition#ffffff—
comment storage.type#FF7F75—
comment entity.name.type#FFEC81—
comment variable.other#ebeced—
comment keyword.codetag.notation, comment storage.type.class.todo, comment storage.type.class.fixme, comment storage.type.class.changed, comment storage.type.class.xxx, comment storage.type.class.idea, comment storage.type.class.hack, comment storage.type.class.note, comment storage.type.class.review, comment storage.type.class.nb, comment storage.type.class.bug, comment storage.type.class.question, comment storage.type.class.combak, comment storage.type.class.temp, comment storage.type.class.debug, comment storage.type.class.optimize#407CA5italic
pizarra by Alejandro Fernández - VS Code Theme