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