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