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
keyword, storage.type, storage.modifier, storage.control#A5B4FCitalic
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#F9A8D4italic
string, constant.other.symbol, constant.other.character, string.quoted, string.template#6EE7B7italic
constant.numeric, constant.language, constant.character, constant.other#FCD34Ditalic
entity.name.function, meta.function, support.function, variable.function#93C5FDitalic
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs, storage.type.java#FDBA74italic
variable, meta.definition.variable.name, meta.object-literal.key#E5E7EBitalic
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#FDE68Aitalic
keyword.control.import, keyword.control.export, keyword.control.from, entity.name.namespace, meta.import#6EE7B7italic
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#F9A8D4italic
entity.name.tag, meta.tag, support.class.component#93C5FDitalic
entity.other.attribute-name, meta.tag.attribute#FDBA74italic
punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition#9CA3AFitalic
support.type.property-name.json, support.type.property-name#C7D2FEitalic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#FDBA74italic
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#6EE7B7italic
markup.heading, markup.heading.setext, markup.heading.markdown#A5B4FCitalic
markup.italic, markup.bold#F9A8D4italic
markup.inline.raw, markup.fenced_code.block#6EE7B7italic