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#A5B4FCbold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#F9A8D4bold
string, constant.other.symbol, constant.other.character, string.quoted, string.template#6EE7B7bold
constant.numeric, constant.language, constant.character, constant.other#FCD34Dbold
entity.name.function, meta.function, support.function, variable.function#93C5FDbold
entity.name.type, entity.name.class, support.type, support.class, storage.type.cs, storage.type.java#FDBA74bold
variable, meta.definition.variable.name, meta.object-literal.key#E5E7EBbold
meta.object-literal.key, support.type.property-name, entity.name.tag.yaml#FDE68Abold
keyword.control.import, keyword.control.export, keyword.control.from, entity.name.namespace, meta.import#6EE7B7bold
meta.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.decorator#F9A8D4bold
entity.name.tag, meta.tag, support.class.component#93C5FDbold
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#C7D2FEbold
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#6EE7B7bold
markup.heading, markup.heading.setext, markup.heading.markdown#A5B4FCbold
markup.italic, markup.bold#F9A8D4bold
markup.inline.raw, markup.fenced_code.block#6EE7B7bold