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#6B7280italic
keyword, storage.type, storage.modifier, storage.control#22D3EEitalic
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#E879F9italic
string, constant.other.symbol, constant.other.character, string.quoted, string.template#34D399italic
constant.numeric, constant.language, constant.character, constant.other#FBBF24italic
entity.name.function, meta.function, support.function, variable.function#2DD4BFitalic
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#F9FAFBitalic
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#22D3EEitalic
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#22D3EEitalic
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#FB7185italic
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#2DD4BFitalic
markup.heading, markup.heading.setext, markup.heading.markdown#22D3EEitalic
markup.italic, markup.bold#E879F9italic
markup.inline.raw, markup.fenced_code.block#34D399italic