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#6D7280italic
keyword, storage.type, storage.modifier, storage.control#C084FCitalic
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#E879F9italic
string, constant.other.symbol, constant.other.character, string.quoted, string.template#4ADE80italic
constant.numeric, constant.language, constant.character, constant.other#EAB308italic
entity.name.function, meta.function, support.function, variable.function#818CF8italic
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#E5E7EBitalic
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#FACC15italic
keyword.control.import, keyword.control.export, keyword.control.from, entity.name.namespace, meta.import#22C55Eitalic
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#E879F9italic
entity.name.tag, meta.tag, support.class.component#A855F7italic
entity.other.attribute-name, meta.tag.attribute#FB7185italic
punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition#9CA3AFitalic
support.type.property-name.json, support.type.property-name#C4B5FDitalic
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#38BDF8italic
markup.heading, markup.heading.setext, markup.heading.markdown#C084FCitalic
markup.italic, markup.bold#F472B6italic
markup.inline.raw, markup.fenced_code.block#4ADE80italic