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#22D3EEbold
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop#E879F9bold
string, constant.other.symbol, constant.other.character, string.quoted, string.template#34D399bold
constant.numeric, constant.language, constant.character, constant.other#FBBF24bold
entity.name.function, meta.function, support.function, variable.function#2DD4BFbold
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#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#22D3EEbold
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#22D3EEbold
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#FB7185bold
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#2DD4BFbold
markup.heading, markup.heading.setext, markup.heading.markdown#22D3EEbold
markup.italic, markup.bold#E879F9bold
markup.inline.raw, markup.fenced_code.block#34D399bold