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