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.markdownbold
markup.italic.markdownitalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...