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.background#0c0a20
  • activityBar.foreground#7984d1
  • activityBarBadge.background#ff2e97
  • activityBarBadge.foreground#ffffff
  • button.background#1ea8fc
  • button.foreground#f2f3f7
  • button.hoverBackground#1ea8fc
  • descriptionForeground#f2f3f7
  • dropdown.background#100d2b
  • dropdown.listBackground#100d2b
  • editor.background#0c0a20
  • editor.findMatchBackground#484f7d
  • editor.findMatchHighlightBackground#484f7d80
  • editor.foreground#f2f3f7
  • editor.hoverHighlightBackground#42c6ff2a
  • editor.lineHighlightBackground#0c0a20
  • editor.selectionBackground#484f7d
  • editor.selectionHighlightBackground#484f7d8e
  • editor.wordHighlightBackground#ffffff22
  • editor.wordHighlightStrongBackground#42c6ff63
  • editorCursor.foreground#ff2e97
  • editorError.foreground#ff2e97
  • editorGroup.dropBackground#7984d1
  • editorGroupHeader.noTabsBackground#090819
  • editorGroupHeader.tabsBackground#090819
  • editorHoverWidget.background#100d2b
  • editorHoverWidget.border#3b4167
  • editorInfo.foreground#7984d1
  • editorLineNumber.activeForeground#42c6ff
  • editorLineNumber.foreground#484f7d
  • editorRuler.foreground#484f7d
  • editorSuggestWidget.background#100d2b
  • editorWarning.foreground#ff9b50
  • editorWidget.background#100d2b
  • editorWidget.border#3b4167
  • foreground#f2f3f7
  • gitDecoration.conflictingResourceForeground#df85ff
  • gitDecoration.deletedResourceForeground#ff2e97
  • gitDecoration.ignoredResourceForeground#7984d1
  • gitDecoration.modifiedResourceForeground#ffd400
  • gitDecoration.untrackedResourceForeground#42c6ff
  • input.background#0c0a20
  • input.border#763b8c
  • input.placeholderForeground#7984d1
  • inputOption.activeBorder#ff9b50
  • list.activeSelectionBackground#30007e
  • list.activeSelectionForeground#F2F3F7
  • list.dropBackground#100d2b
  • list.errorForeground#ff2e97
  • list.focusBackground#8a45a3
  • list.hoverBackground#0e0658
  • list.hoverForeground#F2F3F7
  • list.inactiveSelectionBackground#131033
  • list.warningForeground#ff2e97
  • menu.background#100d2b
  • panel.background#090819
  • panel.border#090819
  • panelTitle.activeBorder#1ea8fc
  • panelTitle.activeForeground#f2f3f7
  • panelTitle.inactiveForeground#7984d1
  • peekView.border#ff9b50
  • peekViewEditor.background#110d26
  • peekViewEditor.matchHighlightBackground#161130
  • peekViewEditor.matchHighlightBorder#161130
  • peekViewResult.background#0c0a20
  • peekViewResult.selectionBackground#ff9b50
  • peekViewTitle.background#0c0a20
  • peekViewTitleDescription.foreground#7984d1
  • progressBar.background#ff2e97
  • scrollbar.shadow#090819
  • scrollbarSlider.activeBackground#919ad9
  • scrollbarSlider.background#9199d94f
  • scrollbarSlider.hoverBackground#9199d9b4
  • sideBar.background#090819
  • sideBarSectionHeader.background#0c0a20
  • sideBarSectionHeader.foreground#7984d1
  • statusBar.background#090819
  • statusBar.foreground#7984d1
  • statusBar.noFolderBackground#1ea8fc
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#0c0a20
  • tab.activeForeground#f2f3f7
  • tab.border#0c0a20
  • tab.inactiveBackground#090819
  • tab.inactiveForeground#7984d1
  • terminal.ansiBlack#283034
  • terminal.ansiBlue#42c6ff
  • terminal.ansiBrightBlack#435056
  • terminal.ansiBrightBlue#42c6ff
  • terminal.ansiBrightCyan#42c6ff
  • terminal.ansiBrightGreen#add0e5
  • terminal.ansiBrightMagenta#ff2afc
  • terminal.ansiBrightRed#ff2e97
  • terminal.ansiBrightWhite#f4f6f9
  • terminal.ansiBrightYellow#ffd400
  • terminal.ansiCyan#42c6ff
  • terminal.ansiGreen#62a9cf
  • terminal.ansiMagenta#ff2afc
  • terminal.ansiRed#ff2e97
  • terminal.ansiWhite#d9e0e9
  • terminal.ansiYellow#ffd400
  • terminal.background#090819
  • terminal.foreground#e4eeff
  • titleBar.activeBackground#090819

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python#848bbditalic
string.quoted, string.template, punctuation.definition.string#8DFFB0—
entity.name.type#FF957E—
storage.type.function, punctuation.separator.annotation.result.python#36f9f6—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.annotation, meta.method.identifier.java, punctuation.definition.annotation#BA3C97—
keyword.control#2EE2FA—
keyword.operator#2EE2FA—
entity.name.function, variable.function#4786FF—
entity.name#fe4450—
entity.name.namespace, keyword.other.import#72f1b8—
constant#f97e72—
string.regexp#f97e72—
constant.other.color#f97e72—
support.constant.font-name#f97e72—
markup.underline.link#DD5500—
string.other.link.description#f97e72—
keyword.other.unit#f97e72—
entity.other.inherited-class#DD5500—
punctuation.separator.delimiter#FFFFFF—
variable.language#F7768Ebold
storage.modifier#F7768E—
storage.type#F7768E—
constant.numeric#FF9E64—
constant.language#f97e72—
constant.character.escape#36f9f6—
support.variable#ff7edb—
punctuation.separator.key-value#b6b1b1—
punctuation.section.embedded#fede5d—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF957E—
markup.heading, entity.name.section#ff7edb—
keyword.operator.assignment#2EE2FA—
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#ff7edb—
markup.underline.link.markdown, markup.inline.raw.string.markdown#72f1b8italic
string.other.link.title.markdown#fede5d—
markup.heading.markdown, entity.name.section.markdown#ff7edbbold
markup.italic.markdown#2EE2FAitalic
markup.bold.markdown#2EE2FAbold
punctuation.definition.quote.begin.markdown, markup.quote.markdown#72f1b8—
source.dart, source.python, source.scala#ff7edbff—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#36f9f6—
support#F7768E—
support.function#36f9f6—
punctuation.definition.tag#36f9f6—
string.template meta.embedded.line#b6b1b1—
variable#ff7edb—
switch-block.expr.js#72f1b8—
support.type.property-name.css, support.type.property-name.json#72f1b8—
entity.other.attribute-name.id#36f9f6—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#36f9f6—
support.function.misc.css#fe4450—
constant.numeric.css#FF9E64bold
keyword.other.unit.px.css, keyword.other.unit.deg.css, keyword.other.unit.s.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.ch.css, keyword.other.unit.cw.css#F7768Ebold
entity.other.keyframe-offset.css#36f9f6—
variable.parameter.keyframe-list.css, constant.other.color.rgb-value.hex.css, punctuation.definition.constant.css#36f9f6—
entity.other.attribute-name.css#fede5d—
meta.object-literal.key, support.type.property-name#ff7edb—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key#7aa2f7—
support.constant.font-name, meta.definition.variable#8DFFB0—
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss#8DFFB0—
entity.other.attribute-name.id#fc7b7b—
entity.name.tag.css#0db9d7—
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference#e0af68—
meta.property-list#9abdf5—
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else#ff9e64—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css#73daca—
meta.property-list meta.property-list#9abdf5—
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include#bb9af7—
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword#9d7cd8—
meta.property-list meta.at-rule.include#c0caf5—
support.constant.property-value#ff9e64—
source.json meta.structure.dictionary.json support.type.property-name.json#7aa2f7—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0db9d7—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7dcfff—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bb9af7—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e0af68—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0db9d7—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#73daca—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f7768e—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9ece6a—
punctuation.support.type.property-name.begin.json.comments, punctuation.support.type.property-name.end.json.comments, punctuation.separator.dictionary.key-value.json.comments#89DDFF—
entity.name.tag, meta.tag.sgml#F7768E—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#BA3C97—
entity.other.attribute-name.html#BB9AF7italic
meta.attribute.class.html#fe4450—
string.quoted.double.html#8DFFB0—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html#89DDFF—
text.html#9AA5CE—
entity.name.function.python#36f9f6—
entity.name.function.decorator.python#179FFF—
variable.parameter.function-call.python#72f1b8—
variable.parameter.function.language.special.self.python#f97e72—
storage.type.function.python#72f1b8—
punctuation.separator.colon.python, punctuation.section.function.begin.python, punctuation.separator.dict.python, punctuation.separator.arguments.python, punctuation.separator.period.python, punctuation.separator.element.python, punctuation.separator.parameters.python, punctuation.section.class.begin.python, punctuation.separator.annotation.python#ffffff—
variable.other.constant.property.js, variable.other.property.js#C0CAF5—
keyword.control.export.js, keyword.control.import.js#72f1b8—
keyword.control.java#36F9F6—
storage.type.primitive.java#F7768E—