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.activeBackground#1e293b
  • activityBar.activeBorder#38bdf8
  • activityBar.background#111827
  • activityBar.foreground#e6e6e6
  • activityBar.inactiveForeground#6b7280
  • activityBarBadge.background#f59e0b
  • activityBarBadge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#111827
  • breadcrumb.focusForeground#38bdf8
  • breadcrumb.foreground#ffff7f
  • button.background#38bdf8
  • button.foreground#000000
  • button.hoverBackground#0ea5e9
  • button.secondaryBackground#f59e0b
  • button.secondaryForeground#000000
  • button.secondaryHoverBackground#d97706
  • debugConsole.errorForeground#ef4444
  • debugConsole.infoForeground#38bdf8
  • debugConsole.sourceForeground#06b6d4
  • debugConsole.warningForeground#fbbf24
  • debugToolBar.background#1e293b
  • debugToolBar.border#38bdf8
  • diffEditor.insertedLineBackground#10b98111
  • diffEditor.insertedTextBackground#10b98122
  • diffEditor.removedLineBackground#ef444411
  • diffEditor.removedTextBackground#ef444422
  • dropdown.background#1e293b
  • dropdown.border#374151
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.foreground#e6e6e6
  • editor.inactiveSelectionBackground#25424b85
  • editor.selectionBackground#25424bd5
  • editor.selectionHighlightBackground#25424b22
  • editorCursor.foreground#fbbf24
  • editorHoverWidget.background#1e293b
  • editorHoverWidget.border#38bdf8
  • editorHoverWidget.foreground#ffffff
  • editorIndentGuide.activeBackground1#38bdf8
  • editorIndentGuide.background1#374151
  • editorLineNumber.activeForeground#38bdf8
  • editorLineNumber.foreground#4a5568
  • editorOverviewRuler.border#374151
  • editorOverviewRuler.errorForeground#ef4444
  • editorOverviewRuler.infoForeground#38bdf8
  • editorOverviewRuler.warningForeground#fbbf24
  • editorSuggestWidget.background#1e293b
  • editorSuggestWidget.border#38bdf8
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#fbbf24
  • editorSuggestWidget.selectedBackground#38bdf833
  • editorWhitespace.foreground#374151
  • editorWidget.background#1e293b
  • editorWidget.border#374151
  • editorWidget.foreground#ffffff
  • editorWidget.resizeBorder#38bdf8
  • gitDecoration.addedResourceForeground#10b981
  • gitDecoration.conflictingResourceForeground#a855f7
  • gitDecoration.deletedResourceForeground#ef4444
  • gitDecoration.ignoredResourceForeground#6b7280
  • gitDecoration.modifiedResourceForeground#fbbf24
  • gitDecoration.untrackedResourceForeground#06b6d4
  • input.background#1e293b
  • input.border#374151
  • input.foreground#ffffff
  • input.placeholderForeground#6b7280
  • inputOption.activeBorder#38bdf8
  • inputValidation.errorBackground#ef444433
  • inputValidation.errorBorder#ef4444
  • inputValidation.warningBackground#fbbf2433
  • inputValidation.warningBorder#fbbf24
  • list.activeSelectionBackground#38bff859
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#38bdf822
  • list.focusBackground#38bdf833
  • list.hoverBackground#374151
  • list.inactiveSelectionBackground#38bdf833
  • merge.border#374151
  • merge.currentContentBackground#10b98111
  • merge.currentHeaderBackground#10b98133
  • merge.incomingContentBackground#38bdf811
  • merge.incomingHeaderBackground#38bdf833
  • minimap.background#111827
  • minimap.errorHighlight#ef4444
  • minimap.selectionHighlight#38bff8bb
  • minimap.warningHighlight#fbbf24
  • notificationCenter.border#374151
  • notificationCenterHeader.background#111827
  • notifications.background#1e293b
  • notifications.border#374151
  • notifications.foreground#ffffff
  • notificationToast.border#374151
  • panel.background#111827
  • panel.border#374151
  • panelTitle.activeBorder#38bdf8
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffff7f
  • peekView.border#38bdf8
  • peekViewEditor.background#111827
  • peekViewResult.background#1e293b
  • peekViewTitle.background#111827
  • progressBar.background#38bdf8
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#88888890
  • scrollbarSlider.background#88888833
  • scrollbarSlider.hoverBackground#88888890
  • sideBar.background#000000
  • sideBar.border#374151
  • sideBar.foreground#d1d5db
  • sideBarSectionHeader.background#1e293b
  • sideBarSectionHeader.border#374151
  • sideBarSectionHeader.foreground#38bdf8
  • sideBarTitle.foreground#38bdf8
  • statusBar.background#111827
  • statusBar.border#374151
  • statusBar.debuggingBackground#f59e0b
  • statusBar.foreground#e6e6e6
  • statusBar.noFolderBackground#111827
  • statusBarItem.activeBackground#38bdf833
  • statusBarItem.hoverBackground#374151
  • statusBarItem.remoteBackground#38bdf8
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#0a0a0a
  • tab.activeBorder#f59e0b
  • tab.activeForeground#ffffff
  • tab.border#374151
  • tab.dragAndDropBorder#f59e0b
  • tab.hoverBackground#374151
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#1e293b
  • tab.inactiveForeground#ffff7f
  • terminal.ansiBlue#38bdf8
  • terminal.ansiCyan#06b6d4
  • terminal.ansiGreen#10b981
  • terminal.ansiMagenta#a855f7
  • terminal.ansiRed#ef4444
  • terminal.ansiYellow#fbbf24
  • terminal.background#0a0a0a
  • terminal.foreground#e6e6e6
  • terminal.selectionBackground#38bdf833
  • titleBar.activeBackground#111827
  • titleBar.activeForeground#e6e6e6
  • titleBar.border#374151
  • titleBar.inactiveBackground#0f172a
  • titleBar.inactiveForeground#6b7280
  • tree.indentGuidesStroke#38bdf8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4d724ditalic
punctuation.definition.comment#4d634d
string#fbbf24
string.quoted#f59e0b
string.template#d97706
punctuation.definition.string#92400e
punctuation.definition.template-expression#b45309
constant.numeric#06b6d4
constant.language.boolean#0891b2
constant.language.null#0e7490
constant.language.undefined#155e75
keyword.control#a855f7
keyword.control.flow#ff3333
keyword.control.conditional#ce358e
keyword.control.loop#6d28d9
keyword.control.trycatch#5b21b6
keyword.control.switch#4c1d95
keyword.operator.new#c084fc
keyword.other.debugger#ddd6fe
storage.type.function#c649d1
storage.type.class#c4b5fd
storage.type#c649d1
storage.modifier#c90000
keyword.control.import#38bdf8
keyword.control.export#0ea5e9
keyword.control.from#0284c7
keyword.control.as#0369a1
keyword.control.default#075985
entity.name.function#fbbf24
meta.function-call entity.name.function#f59e0b
support.function#d97706
meta.function-call#b45309
support.function.console#92400e
support.function.builtin#78350f
support.function.dom#451a03
entity.name.type#10b981
entity.name.class#059669
support.class#047857
entity.other.inherited-class#065f46
storage.type.primitive#064e3b
keyword.type#022c22
support.type.primitive#34d399
entity.name.type.interface#6ee7b7
entity.name.type.alias#9deccd
meta.type.parameters#c6f6d5
variable#e5e7eb
variable.other.readwrite#d1d5db
variable.other.object#ffff7f
variable.other.constant#6b7280
variable.other.enummember#4b5563
variable.language.arguments#374151
support.variable.property#1f2937
variable.other.property#38bdf8
meta.object-literal.key#0ea5e9
variable.language.this#a855f7italic
variable.language.super#9333eaitalic
keyword.operator#f472b6
keyword.operator.arithmetic#ec4899
keyword.operator.comparison#db2777
keyword.operator.logical#be185d
keyword.operator.assignment#9d174d
keyword.operator.spread#831843
keyword.operator.rest#701a75
punctuation.separator#d1d5db
punctuation.terminator#ffff7f
punctuation.accessor#6b7280
punctuation.definition.block#4b5563
punctuation.definition.parameters#374151
punctuation.definition.array#1f2937
entity.name.tag.jsx#38bdf8
entity.name.tag.tsx#0ea5e9
entity.other.attribute-name.jsx#0284c7
entity.other.attribute-name.tsx#0369a1
punctuation.definition.tag.jsx#075985
punctuation.definition.tag.tsx#0c4a6e
support.type.property-name.json#38bdf8
string.regexp#f59e0b
constant.character.character-class.regexp#d97706
constant.other.character-class.regexp#b45309
meta.decorator#c084fcitalic
punctuation.decorator#c90000
markup.bold#fbbf24
markup.heading#f59e0b
markup.italic#38bdf8italic
invalid#ef4444
invalid.illegal#dc2626