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#6D7280bold
keyword, storage.type, storage.modifier, storage.control#C084FCbold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#E879F9bold
string, constant.other.symbol, constant.other.character, string.quoted, string.template#4ADE80bold
constant.numeric, constant.language, constant.character, constant.other#EAB308bold
entity.name.function, meta.function, support.function, variable.function#818CF8bold
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#E5E7EBbold
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#FACC15bold
keyword.control.import, keyword.control.export, keyword.control.from, entity.name.namespace, meta.import#22C55Ebold
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#E879F9bold
entity.name.tag, meta.tag, support.class.component#A855F7bold
entity.other.attribute-name, meta.tag.attribute#FB7185bold
punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition#9CA3AFbold
support.type.property-name.json, support.type.property-name#C4B5FDbold
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#38BDF8bold
markup.heading, markup.heading.setext, markup.heading.markdown#C084FCbold
markup.italic, markup.bold#F472B6bold
markup.inline.raw, markup.fenced_code.block#4ADE80bold