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#25252F
  • activityBar.foreground#ff69b4
  • activityBarBadge.background#6B6D8C
  • activityBarBadge.foreground#1E1E25
  • breadcrumb.foreground#B4C1D05b
  • button.background#1E1E25
  • button.foreground#ffffff
  • button.hoverBackground#111
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#ff69b433
  • dropdown.background#1E1E25
  • dropdown.border#000000
  • editor.background#25252F
  • editor.foreground#F6F8F7
  • editor.lineHighlightBackground#1E1E256b
  • editor.selectionBackground#F6F8F74b
  • editorBracketMatch.border#ff69b4
  • editorCursor.foreground#ff69b4
  • editorGroup.border#111
  • editorGroupHeader.tabsBackground#25252F
  • editorHoverWidget.background#1E1E25
  • editorHoverWidget.border#111
  • editorIndentGuide.background1#1E1E25
  • editorLineNumber.foreground#6B6D8C5b
  • editorSuggestWidget.background#1E1E25
  • editorSuggestWidget.border#111
  • editorSuggestWidget.selectedBackground#0000005b
  • editorWhitespace.foreground#1E1E25
  • editorWidget.background#1E1E25
  • extensionButton.prominentBackground#ff84c2
  • extensionButton.prominentHoverBackground#ff47a3
  • focusBorder#ff69b4
  • gitDecoration.addedResourceForeground#ff69b4
  • gitDecoration.deletedResourceForeground#ff2e6d
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#ffe66b
  • gitDecoration.untrackedResourceForeground#b9ff6f
  • input.background#0000003b
  • input.border#111
  • list.activeSelectionBackground#0000005b
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#0000005b
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#0000005b
  • list.inactiveSelectionBackground#0000005b
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#111
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#0000005b
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#1E1E25
  • sideBarSectionHeader.background#1E1E25
  • statusBar.background#1E1E25
  • statusBar.debuggingBackground#B2D5DA
  • statusBar.debuggingForeground#1E1E25
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#1E1E25
  • statusBarItem.hoverBackground#0000005b
  • tab.activeBackground#25252F
  • tab.border#1E1E25
  • tab.inactiveBackground#1E1E25
  • terminal.ansiBlue#09b3ec
  • terminal.ansiBrightBlue#09b3ec
  • terminal.ansiBrightCyan#7ef9ff
  • terminal.ansiBrightGreen#b9ff6f
  • terminal.ansiBrightMagenta#ff47a3
  • terminal.ansiBrightRed#ff2e6d
  • terminal.ansiBrightYellow#ffe66b
  • terminal.ansiCyan#8FC8FF
  • terminal.ansiGreen#b9ff6f
  • terminal.ansiMagenta#ff47a3
  • terminal.ansiRed#ff2e6d
  • terminal.ansiYellow#ffe66b
  • terminal.background#22222A
  • terminal.foreground#F6F8F7
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#7ef9ff
  • terminalCursor.foreground#ff69b4
  • titleBar.activeBackground#25252F
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#1E1E25
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#525863italic
string.template meta.embedded.line#F6F8F7—
variable.parameter, variable.other, constant.language#FFFFFFitalic
storage.type, storage.modifier#ff69b4italic
string.regexp#B4C1D0—
meta.jsx.children.js, meta.property-value.css, text.html.derivative, constant.length.units.css, support.function.misc.css, support.function.transform.css, meta.function.color.css, constant.other.color.rgb-value.hex.css, meta.identifier.css#5F8658—
constant.language#CB602D—
constant.character.escape#CB602D—
entity.name#A8C3C8—
punctuation.definition.tag, punctuation.definition.block.js, punctuation.definition.string.begin, punctuation.definition.string.end, meta.property-list.css, storage.type.function.arrow.js#5F8658—
entity.other.attribute-name#ff69b4italic
entity.name.function, variable.function, meta.export.default.js#77DFEF—
keyword#ff84c2italic
keyword.control#ff69b4—
keyword.operator#CB602D—
keyword.other.unit#a801d4—
support#B4C1D0—
support.function#EE0F88—
support.variable#FFFFFF—
meta.object-literal.key, support.type.property-name#ff69b4—
meta.function-call.generic.python#A771FE—
entity.name.type.class.python#ff69b4—
punctuation.definition.decorator.python, support.type.python#7EB3FF—
variable.language.special.self.python, variable.language.special.cls.python#ff69b4—
support.variable.magic.python#EE0F88—
storage.type.string.python, string.quoted.single.python, 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, string.quoted.docstring.multi.python constant.character.escape.python#5F8658—
variable.other.property.js#B4C1D0italic
variable.other.object.js#F6F8F7—
meta.brace.square, meta.brace.round, punctuation.definition.block#A8C3C8—
punctuation.separator.key-value#ffffff—
punctuation.section.embedded#ffffff—
punctuation.section.embedded#5F8658—
string.template#ff69b4—
support.type.property-name.css, support.type.vendored.property-name.css, meta.property-name#ff69b4—
support.constant.font-name#B4C1D0—
entity.other.attribute-name.id#ff84c2—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F6F8F7—
markup.heading, entity.name.section#B4C1D0—
markup.quote#ff84c2—
beginning.punctuation.definition.list#B4C1D0—
markup.underline.link#F6F8F7—
string.other.link.description#B4C1D0—
entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml#ff84c2—
storage.type.cs#ff84c2—
entity.name.variable.local.cs#B4C1D0—
entity.name.variable.field.cs, entity.name.variable.property.cs#B4C1D0—
source.cpp keyword.operator#ff84c2—
punctuation.definition.heading.markdown#ff84c2—
punctuation.definition.list#ff84c2—
punctuation.definition.bold.markdown#ff69b47a—
punctuation.definition.italic.markdown#ffffff7e—
markup.bold.markdown, entity.name.section.markdown—bold
markup.italic.markdown—italic