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#fe4450
string.template meta.embedded.line#b6b1b1
variable, variable.parameter.function-call#ff7edb
variable.language#fe4450bold
storage.type, storage.modifier#72f1b8
constant#f97e72
string.regexp#f97e72
constant.numeric#2ac3de
constant.language#f97e72
constant.character.escape#36f9f6
entity.name#fe4450
entity.name.tag, meta.tag.sgml#72f1b8
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#72f1b8
support.variable#ff7edb
meta.object-literal.key, support.type.property-name#ff7edb
punctuation.separator.key-value#b6b1b1
punctuation.section.embedded#fede5d
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#72f1b8
support.type.property-name.css, support.type.property-name.json#72f1b8
switch-block.expr.js#72f1b8
variable.other.constant.property.js, variable.other.property.js#2ee2fa
constant.other.color#f97e72
support.constant.font-name#f97e72
entity.other.attribute-name.id#36f9f6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#36f9f6
support.function.misc.css#fe4450
markup.heading, entity.name.section#ff7edb
text.html, keyword.operator.assignment#ffffffee
markup.quote#b6b1b1ccitalic
beginning.punctuation.definition.list#ff7edb
markup.underline.link#DD5500
string.other.link.description#f97e72
meta.function-call.generic.python#36f9f6
variable.parameter.function-call.python#72f1b8
storage.type.cs#fe4450
entity.name.variable.local.cs#ff7edb
entity.name.variable.field.cs, entity.name.variable.property.cs#ff7edb
constant.other.placeholder.c#72f1b8italic
keyword.control.directive.include.c, keyword.control.directive.define.c#72f1b8
storage.modifier.c#fe4450
source.cpp keyword.operator#fede5d
constant.other.placeholder.cpp#72f1b8italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp#72f1b8
storage.modifier.specifier.const.cpp#fe4450
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#fede5d
keyword.other.unit#f97e72
support#fe4450
support.function#36f9f6
keyword.control#fede5d
keyword.control.java#72f1b8
keyword.operator#fede5d
entity.name.function, variable.function#36f9f6
keyword.control.export.js, keyword.control.import.js#72f1b8
constant.numeric.decimal.js#2EE2FA
entity.other.inherited-class#DD5500
entity.name.type, meta.attribute.class.html#fe4450
punctuation.definition.tag#36f9f6
entity.other.attribute-name#fede5d
entity.other.attribute-name.html#fede5ditalic
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.annotation, meta.method.identifier.java#f97e72
storage.type.function#36f9f6
entity.name.function.java#36f9f6