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#6B7280bold
keyword, storage.type, storage.modifier, storage.control#A855F7bold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#EC4899bold
string, constant.other.symbol, constant.other.character, string.quoted, string.template#22C55Ebold
constant.numeric, constant.language, constant.character, constant.other#FACC15bold
entity.name.function, meta.function, support.function, variable.function#38BDF8bold
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs, storage.type.java#F97316bold
variable, meta.definition.variable.name, meta.object-literal.key#F9FAFBbold
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#FBBF24bold
keyword.control.import, keyword.control.export, keyword.control.from, entity.name.namespace, meta.import#34D399bold
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#EC4899bold
entity.name.tag, meta.tag, support.class.component#38BDF8bold
entity.other.attribute-name, meta.tag.attribute#F97316bold
punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition#9CA3AFbold
support.type.property-name.json, support.type.property-name#A855F7bold
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#F97316bold
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#22D3EEbold
markup.heading, markup.heading.setext, markup.heading.markdown#F97316bold
markup.italic, markup.bold#EC4899bold
markup.inline.raw, markup.fenced_code.block#22C55Ebold