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#6B7280italic
keyword, storage.type, storage.modifier, storage.control#A855F7italic
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#EC4899italic
string, constant.other.symbol, constant.other.character, string.quoted, string.template#22C55Eitalic
constant.numeric, constant.language, constant.character, constant.other#FACC15italic
entity.name.function, meta.function, support.function, variable.function#38BDF8italic
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs, storage.type.java#F97316italic
variable, meta.definition.variable.name, meta.object-literal.key#F9FAFBitalic
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#FBBF24italic
keyword.control.import, keyword.control.export, keyword.control.from, entity.name.namespace, meta.import#34D399italic
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#EC4899italic
entity.name.tag, meta.tag, support.class.component#38BDF8italic
entity.other.attribute-name, meta.tag.attribute#F97316italic
punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition#9CA3AFitalic
support.type.property-name.json, support.type.property-name#A855F7italic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#F97316italic
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#22D3EEitalic
markup.heading, markup.heading.setext, markup.heading.markdown#F97316italic
markup.italic, markup.bold#EC4899italic
markup.inline.raw, markup.fenced_code.block#22C55Eitalic
Vaporpunk Theme Pack by Luke Parker - VS Code Theme