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#020617
  • activityBar.foreground#E5E7EB
  • activityBarBadge.background#F97316
  • activityBarBadge.foreground#0B1120
  • badge.background#EC4899
  • badge.foreground#0B1120
  • editor.background#050515
  • editor.foreground#F9FAFB
  • editor.inactiveSelectionBackground#4B556355
  • editor.lineHighlightBackground#111827
  • editor.selectionBackground#4338CA55
  • editorBracketMatch.border#22D3EE
  • editorCursor.foreground#F97316
  • editorError.foreground#F97373
  • editorGutter.addedBackground#22C55EAA
  • editorGutter.deletedBackground#FB7185AA
  • editorGutter.modifiedBackground#38BDF8AA
  • editorIndentGuide.activeBackground1#4B5563
  • editorIndentGuide.background1#1F2937
  • editorInfo.foreground#38BDF8
  • editorLineNumber.activeForeground#F97316
  • editorLineNumber.foreground#6B7280
  • editorWarning.foreground#FACC15
  • editorWhitespace.foreground#4B5563
  • errorForeground#F97373
  • gitDecoration.addedResourceForeground#22C55E
  • gitDecoration.conflictingResourceForeground#F97316
  • gitDecoration.deletedResourceForeground#FB7185
  • gitDecoration.modifiedResourceForeground#38BDF8
  • gitDecoration.untrackedResourceForeground#22C55E
  • list.activeSelectionBackground#1E293B
  • list.focusBackground#1E293B
  • list.hoverBackground#111827
  • list.inactiveSelectionBackground#111827
  • panel.background#020617
  • panel.border#111827
  • scrollbarSlider.activeBackground#F9731655
  • scrollbarSlider.background#4B556355
  • scrollbarSlider.hoverBackground#6B728055
  • sideBar.background#020617
  • sideBar.border#111827
  • sideBar.foreground#9CA3AF
  • statusBar.background#020617
  • statusBar.debuggingBackground#F97316
  • statusBar.debuggingForeground#111827
  • statusBar.foreground#9CA3AF
  • statusBar.noFolderBackground#111827
  • tab.activeBackground#0F172A
  • tab.activeForeground#F9FAFB
  • tab.border#020617
  • tab.inactiveBackground#020617
  • tab.inactiveForeground#6B7280
  • terminal.ansiBlack#020617
  • terminal.ansiBlue#38BDF8
  • terminal.ansiBrightBlack#4B5563
  • terminal.ansiBrightBlue#93C5FD
  • terminal.ansiBrightCyan#67E8F9
  • terminal.ansiBrightGreen#86EFAC
  • terminal.ansiBrightMagenta#F9A8D4
  • terminal.ansiBrightRed#FCA5A5
  • terminal.ansiBrightWhite#F9FAFB
  • terminal.ansiBrightYellow#FEF08A
  • terminal.ansiCyan#22D3EE
  • terminal.ansiGreen#22C55E
  • terminal.ansiMagenta#EC4899
  • terminal.ansiRed#F97373
  • terminal.ansiWhite#E5E7EB
  • terminal.ansiYellow#FACC15
  • terminal.background#050515
  • terminal.foreground#F9FAFB
  • terminalCursor.foreground#F97316
  • titleBar.activeBackground#020617
  • titleBar.activeForeground#E5E7EB
  • titleBar.inactiveBackground#020617
  • titleBar.inactiveForeground#6B7280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9CA3AFitalic bold
keyword, storage.type, storage.modifier, storage.control#C4B5FDitalic bold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#F9A8D4italic bold
string, constant.other.symbol, constant.other.character, string.quoted, string.template#A7F3D0italic bold
constant.numeric, constant.language, constant.character, constant.other#FDE68Aitalic bold
entity.name.function, meta.function, support.function, variable.function#BFDBFEitalic bold
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs, storage.type.java#FCA5A5italic bold
variable, meta.definition.variable.name, meta.object-literal.key#FDF2FFitalic bold
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#FBCFE8italic bold
keyword.control.import, keyword.control.export, keyword.control.from, entity.name.namespace, meta.import#A5F3FCitalic bold
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#F9A8D4italic bold
entity.name.tag, meta.tag, support.class.component#BFDBFEitalic bold
entity.other.attribute-name, meta.tag.attribute#FDBA74italic bold
punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition#9CA3AFitalic bold
support.type.property-name.json, support.type.property-name#E9D5FFitalic bold
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#FDBA74italic bold
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#A5F3FCitalic bold
markup.heading, markup.heading.setext, markup.heading.markdown#C4B5FDitalic bold
markup.italic, markup.bold#F9A8D4italic bold
markup.inline.raw, markup.fenced_code.block#A7F3D0italic bold
Vaporpunk Theme Pack by Luke Parker - VS Code Theme