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