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