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.activeBackground#44475A
  • activityBar.activeBorder#FF79C6
  • activityBar.background#21222C
  • activityBar.border#6272A4
  • activityBar.foreground#F8F8F2
  • button.background#44475A
  • button.border#6272A4
  • button.foreground#F8F8F2
  • button.hoverBackground#6272A4
  • debugIcon.continueForeground#50FA7B
  • debugIcon.disconnectForeground#FFB86C
  • debugIcon.pauseForeground#FFB86C
  • debugIcon.restartForeground#50FA7B
  • debugIcon.startForeground#50FA7B
  • debugIcon.stepBackForeground#BD93F9
  • debugIcon.stepIntoForeground#8BE9FD
  • debugIcon.stepOutForeground#8BE9FD
  • debugIcon.stepOverForeground#8BE9FD
  • debugIcon.stopForeground#FF5555
  • debugToolBar.background#21222C
  • dropdown.background#21222C
  • dropdown.border#6272A4
  • dropdown.foreground#F8F8F2
  • editor.background#282A36
  • editor.findMatchBackground#FFB86C55
  • editor.findMatchBorder#FFB86C
  • editor.findMatchHighlightBackground#FFB86C25
  • editor.findMatchHighlightBorder#FFB86C70
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#BD93F925
  • editor.lineHighlightBackground#44475A50
  • editor.selectionBackground#BD93F940
  • editor.selectionHighlightBackground#BD93F920
  • editor.selectionHighlightBorder#BD93F960
  • editor.wordHighlightBackground#8BE9FD40
  • editor.wordHighlightBorder#8BE9FD90
  • editor.wordHighlightStrongBackground#FF79C640
  • editor.wordHighlightStrongBorder#FF79C6
  • editorGroup.border#6272A4
  • editorGroupHeader.tabsBorder#191A21
  • editorIndentGuide.activeBackground#6272A4
  • editorIndentGuide.background#44475A
  • editorLineNumber.activeForeground#BD93F9
  • editorLineNumber.foreground#6272A4
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.border#6272A4
  • editorSuggestWidget.highlightForeground#FF79C6
  • editorSuggestWidget.selectedBackground#44475A
  • editorWidget.background#21222C
  • editorWidget.border#6272A4
  • extensionButton.prominentBackground#BD93F9
  • extensionButton.prominentForeground#282A36
  • extensionButton.prominentHoverBackground#FF79C6
  • gitDecoration.addedResourceForeground#50FA7B
  • gitDecoration.conflictingResourceForeground#FF79C6
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#FFB86C
  • gitDecoration.renamedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#BD93F9
  • input.background#282A36
  • input.border#6272A4
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272A4
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.background#21222C
  • list.focusBackground#44475A
  • list.focusForeground#F8F8F2
  • list.foreground#F8F8F2
  • list.hoverBackground#44475A
  • list.inactiveSelectionBackground#282A36
  • list.inactiveSelectionForeground#F8F8F2
  • notification.background#21222C
  • notification.border#6272A4
  • notification.foreground#F8F8F2
  • panel.background#21222C
  • panel.border#6272A4
  • peekView.border#BD93F9
  • peekViewEditor.background#282A36
  • peekViewEditor.matchHighlightBackground#FFB86C40
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#6272A4
  • peekViewResult.matchHighlightBackground#FFB86C40
  • peekViewTitle.background#44475A
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#F8F8F2
  • progressBar.background#BD93F9
  • scrollbar.shadow#191A21
  • scrollbarSlider.activeBackground#BD93F9
  • scrollbarSlider.background#6272A4
  • scrollbarSlider.hoverBackground#8BE9FD
  • sideBar.background#21222C
  • sideBar.border#6272A4
  • sideBar.foreground#F8F8F2
  • sideBarSectionHeader.background#282A36
  • sideBarSectionHeader.border#6272A4
  • sideBarSectionHeader.foreground#BD93F9
  • sideBarTitle.foreground#BD93F9
  • statusBar.background#191A21
  • statusBar.border#6272A4
  • statusBar.debuggingBackground#FF79C6
  • statusBar.debuggingForeground#282A36
  • statusBar.foreground#F8F8F2
  • tab.activeBackground#282A36
  • tab.activeBorder#FF79C6
  • tab.activeBorderTop#FF79C6
  • tab.activeForeground#F8F8F2
  • tab.border#191A21
  • tab.inactiveBackground#21222C
  • tab.inactiveForeground#6272A4
  • terminal.background#282A36
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#21222C
  • titleBar.activeForeground#F8F8F2
  • titleBar.border#6272A4
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#6272A4
  • tree.indentGuidesStroke#44475A
  • tree.tableColumnsBorder#44475A
  • welcomePage.background#282A36
  • welcomePage.progress.background#BD93F9
  • welcomePage.progress.foreground#F8F8F2
  • welcomePage.tileBackground#21222C
  • welcomePage.tileBorder#6272A4
  • welcomePage.tileHoverBackground#44475A
  • widget.shadow#191A21

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.line.double-slash, comment.line.double-dash, comment.line.number-sign, comment.line.percentage#6272A4italic
variable, variable.other, variable.parameter, variable.language, string constant.other.placeholder#F8F8F2—
constant.other.color#ffffff—
invalid, invalid.illegal, invalid.broken#F8F8F2—
invalid.unimplemented#282A36—
invalid.deprecated#282A36—
keyword, storage.type, storage.modifier#FF79C6—
storage.type, keyword.control—italic
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#FF79C6—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF79C6—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#50FA7B—
support.other.variable, string.other.link#FF79C6—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#BD93F9—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#F1FA8Cnormal
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8BE9FD—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#8BE9FD—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5555—
variable.language#FF79C6italic
entity.name.method.js#50FA7B—
meta.class-method.js entity.name.function.js, variable.function.constructor#50FA7B—
entity.other.attribute-name#50FA7B—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFB86Citalic
entity.other.attribute-name.class#FFB86C—
source.sass keyword.control#BD93F9—
markup.inserted#50FA7B—
markup.deleted#FF5555—
markup.changed#BD93F9—
string.regexp#8BE9FD—
constant.character.escape#FF79C6—
*url*, *link*, *uri*—underline
constant.numeric.line-number.find-in-files - match#6272A4—
entity.name.filename.find-in-files#50FA7B—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#BD93F9italic
source.js constant.other.object.key.js string.unquoted.label.js#FF5555italic
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#BD93F9—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#FF79C6—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json#8BE9FD—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#BD93F9—
markup.italic#F1FA8Citalic
markup.bold, markup.bold string#FFB86Cbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold—bold italic
markup.underline#8BE9FDunderline
markup.quote punctuation.definition.blockquote.markdown#6272A4—
markup.quoteitalic
string.other.link.title.markdown#8BE9FD—
string.other.link.description.title.markdown#BD93F9—
markup.table#F8F8F2—
markup.ignored.git_gutter#6272A4—
markup.untracked.git_gutter#6272A4—
markup.inserted.git_gutter#50FA7B—
markup.changed.git_gutter#FFB86C—
markup.deleted.git_gutter#FF5555—
brackethighlighter.default#F8F8F2—
brackethighlighter.quote#F1FA8C—
brackethighlighter.unmatched#FF5555—
Omi Theme by Omprakash Chauhan - VS Code Theme