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