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#fdfdfd
  • activityBar.foreground#ff3399
  • activityBarBadge.background#44425e
  • activityBarBadge.foreground#ffffff
  • diffEditor.insertedTextBackground#ffffff22
  • diffEditor.removedTextBackground#ffa6cf33
  • editor.background#ffffff
  • editor.findMatchBackground#ff339922
  • editor.findMatchBorder#ff3399
  • editor.findMatchHighlightBackground#01a9e155
  • editor.foreground#070007
  • editor.lineHighlightBackground#eae9ff77
  • editor.selectionBackground#dbdaff
  • editorCursor.foreground#f39
  • editorHoverWidget.background#f8f8ff
  • editorHoverWidget.border#dbdaff
  • editorLineNumber.foreground#7c79ac
  • editorRuler.foreground#b3b3d44e
  • editorWhitespace.foreground#dbdaff9e
  • editorWidget.background#f8f8ff
  • list.activeSelectionBackground#b3b3d44e
  • list.activeSelectionIconForeground#ffffff
  • list.hoverBackground#f39
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#eae9ff77
  • scrollbarSlider.activeBackground#CC66FF
  • scrollbarSlider.background#cc66ff3e
  • scrollbarSlider.hoverBackground#CC66FF
  • sideBar.background#f5f5ff
  • sideBar.foreground#7c79ac
  • sideBarSectionHeader.background#ff339911
  • statusBar.background#ff3399
  • statusBar.debuggingBackground#b12350dd
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#CC66FF
  • statusBar.noFolderForeground#ffffff
  • tab.activeBorder#f39
  • terminal.ansiBlack#2c2c3e
  • terminal.ansiBlue#01a9e1
  • terminal.ansiBrightBlack#3d3d56
  • terminal.ansiBrightBlue#01a9e1
  • terminal.ansiBrightCyan#00CED1
  • terminal.ansiBrightGreen#00b253
  • terminal.ansiBrightMagenta#CC66FF
  • terminal.ansiBrightRed#ff3399
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFAA00
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#00b253
  • terminal.ansiMagenta#CC66FF
  • terminal.ansiRed#ff3399
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFAA00
  • terminal.foreground#44425e
  • textLink.foreground#ff3399
  • titleBar.activeBackground#f8f8ff
  • titleBar.activeForeground#44425e
  • titleBar.inactiveBackground#f8f8ff
  • titleBar.inactiveForeground#44425e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#aaaaaaitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448c27
invalid.illegal#660000
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#828282
meta.class entity.name.type.class.tsx#7c2cbd
entity.name.type.tsx, entity.name.type.module.tsx#7c2cbd
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#4a668f
keyword.operator#29f4ce
keyword, storage#00ff1aitalic bold
string.template punctuation.definition.string#ff0303bold
storage.type, support.type#1accf9feitalic bold
constant.language, support.constant, variable.language#08b319bold
variable, support.variable#0e05bcbold
variable.parameter#94041c
entity.name.tag#0444ac
entity.name.type#0444ac
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#10709ditalic bold
entity.name.function, support.function#c6046fbold
entity.name.type, entity.other.inherited-class, support.class#fd44bfbold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#e8009bbold
constant.language.boolean#ff7300
string#d946ef
constant.character.escape#777777
string.regexp#4b83cd
constant.other.symbol#ab6526
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#09f115
entity.name.tag#8a02c5bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#29dd18italic bold
constant.character.entity, punctuation.definition.entity#ab6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#f930e1
meta.property-name, support.type.property-name#04aec8
meta.property-value, meta.property-value constant.other, support.constant.property-value#098e05e7
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#aa3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4b83cd
markup.bold, markup.italic#448c27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
support.constant.json#497803
meta.structure.dictionary.value.json string.quoted.double#fe26fa
string.quoted.double.json punctuation.definition.string.json#2b8c82
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ae408b
source.json support#6dbdfa
source.json string, source.json punctuation.definition.string#05f721
markup.list#207bb8
markup.heading punctuation.definition.heading, entity.name.section#4FB4D8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#87429a
punctuation#ff0000
calabaza by calabaza - VS Code Theme