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#9CA3AFbold
keyword, storage.type, storage.modifier, storage.control#C4B5FDbold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#F9A8D4bold
string, constant.other.symbol, constant.other.character, string.quoted, string.template#A7F3D0bold
constant.numeric, constant.language, constant.character, constant.other#FDE68Abold
entity.name.function, meta.function, support.function, variable.function#BFDBFEbold
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs, storage.type.java#FCA5A5bold
variable, meta.definition.variable.name, meta.object-literal.key#FDF2FFbold
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#FBCFE8bold
keyword.control.import, keyword.control.export, keyword.control.from, entity.name.namespace, meta.import#A5F3FCbold
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#F9A8D4bold
entity.name.tag, meta.tag, support.class.component#BFDBFEbold
entity.other.attribute-name, meta.tag.attribute#FDBA74bold
punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition#9CA3AFbold
support.type.property-name.json, support.type.property-name#E9D5FFbold
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#FDBA74bold
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#A5F3FCbold
markup.heading, markup.heading.setext, markup.heading.markdown#C4B5FDbold
markup.italic, markup.bold#F9A8D4bold
markup.inline.raw, markup.fenced_code.block#A7F3D0bold