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#ecc3c25d
  • activityBar.foreground#250e07
  • activityBarBadge.background#ecc3c2
  • activityBarBadge.foreground#250e07
  • badge.foreground#250e07
  • button.background#f3eae9
  • button.foreground#250e07
  • checkbox.background#f3eae9
  • checkbox.foreground#ecc3c2
  • diffEditor.insertedTextBackground#c3900493
  • diffEditor.removedTextBackground#d68382a1
  • dropdown.background#f3eae9
  • dropdown.listBackground#f3eae9
  • editor.background#fffafa
  • editor.findMatchBackground#ecc3c280
  • editor.foreground#250e07
  • editor.lineHighlightBackground#f3eae9
  • editor.selectionBackground#ecc3c2a2
  • editor.wordHighlightStrongBackground#ecc3c280
  • editorGroup.border#ecc3c200
  • editorGroupHeader.tabsBackground#f3eae9
  • editorLightBulb.foreground#d68482
  • editorLineNumber.activeForeground#ecc3c2
  • editorLineNumber.foreground#d68482
  • editorPane.background#fffafa
  • input.background#f3eae9
  • input.border#250e07
  • input.foreground#250e07
  • input.placeholderForeground#AAAAAA
  • inputOption.activeBorder#ecc3c2
  • inputValidation.errorBackground#d68482
  • inputValidation.errorBorder#d68482
  • inputValidation.errorForeground#fffcfd
  • inputValidation.infoBackground#f3eae9
  • inputValidation.infoBorder#250e07
  • inputValidation.infoForeground#250e07
  • inputValidation.warningBackground#d68482
  • inputValidation.warningBorder#d68482
  • inputValidation.warningForeground#fffcfd
  • list.activeSelectionBackground#fffafa
  • list.activeSelectionForeground#250e07
  • list.activeSelectionIconForeground#ecc3c2
  • list.focusBackground#ecc3c2
  • list.focusHighlightForeground#ecc3c2
  • list.focusOutline#fffafa
  • list.highlightForeground#ecc3c2
  • list.hoverBackground#ecc3c291
  • list.inactiveSelectionBackground#fffcfd
  • list.warningForeground#d68482
  • menu.background#f3eae9
  • minimap.errorHighlight#c97270
  • minimap.findMatchHighlight#ecc3c2
  • minimap.selectionHighlight#ecc3c2
  • minimapGutter.addedBackground#c3900493
  • minimapGutter.deletedBackground#d68382a1
  • notificationCenterHeader.background#f3eae9
  • notificationCenterHeader.foreground#250e07
  • notifications.background#f3eae9
  • notifications.border#ecc3c2
  • notifications.foreground#250e07
  • progressBar.background#ecc3c2
  • scrollbar.shadow#fffcfd00
  • scrollbarSlider.activeBackground#ecc3c2
  • scrollbarSlider.background#f3eae9
  • scrollbarSlider.hoverBackground#ecc3c260
  • selection.background#ecc3c2b6
  • sideBar.background#f3eae9
  • sideBarSectionHeader.background#ecc3c24b
  • sideBySideEditor.horizontalBorder#ecc3c2
  • sideBySideEditor.verticalBorder#ecc3c2
  • statusBar.background#ecc3c2
  • statusBar.foreground#250e07
  • statusBar.noFolderBackground#ecc3c2
  • tab.activeBackground#fffafa
  • tab.hoverForeground#250e07
  • tab.inactiveBackground#f3eae9
  • terminal.ansiBlack#d8b8b3
  • terminal.ansiBlue#A6B6CE
  • terminal.ansiBrightBlack#F3EAE9
  • terminal.ansiBrightBlue#7B91B3
  • terminal.ansiBrightCyan#63A098
  • terminal.ansiBrightGreen#6F873E
  • terminal.ansiBrightMagenta#C97270
  • terminal.ansiBrightRed#832426
  • terminal.ansiBrightWhite#F2CC60
  • terminal.ansiBrightYellow#C39104
  • terminal.ansiCyan#89BEB7
  • terminal.ansiGreen#839a53
  • terminal.ansiMagenta#D68482
  • terminal.ansiRed#873e40
  • terminal.ansiWhite#ECC3C2
  • terminal.ansiYellow#d4a520
  • textLink.foreground#d68482
  • titleBar.activeBackground#ecc3c2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#ecc3c2
invalid.illegal#873e40
keyword.operator#250e07
keyword, storage#873e40
storage.type, support.type#c97270
constant.language, support.constant, variable.language#a6b6ce
variable, support.variable#250e07
entity.name.function, support.function#c97270bold
entity.name.type, entity.other.inherited-class, support.class#c97270bold
entity.name.exception#832426
entity.name.sectionbold
constant.numeric, constant.character, constant#839a53
string#d68482
constant.character.escape#250e07
string.regexp#a6b6ce
constant.other.symbol#c97270
punctuation#250e07
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#928374
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#a6b6ce
entity.name.tag#c39104
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#c39104italic
constant.character.entity, punctuation.definition.entity#d68482
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#963436
meta.property-name, support.type.property-name#c39104
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#250e07
markup.deleted#250e07
markup.italicitalic
markup.error#873e40
markup.inserted#250e07
meta.link#d68482
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#c97270
markup.boldbold
markup.traceback#963436
markup.underlineunderline
markup.quote#250e07
markup.list#d68482
markup.bold, markup.italic#250e07
markup.inline.raw#c39104
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
mio by ene-ne - VS Code Theme