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.activeBorder#4f46e5
  • activityBar.background#111827
  • activityBar.dropBackground#ffffff10
  • activityBar.foreground#f8f8f2
  • activityBarBadge.background#8b5cf6
  • badge.background#4f46e5
  • badge.foreground#f9fafb
  • button.background#4f46e5
  • button.foreground#f9fafb
  • button.hoverBackground#6366f1
  • debugToolBar.background#34244d
  • diffEditor.insertedTextBackground#0c4a6e70
  • diffEditor.removedTextBackground#ef444450
  • diffEditorGutter.insertedLineBackground#0c4a6e70
  • diffEditorGutter.removedLineBackground#ef444450
  • dropdown.background#111827
  • dropdown.listBackground#111827
  • editor.background#111827
  • editor.foreground#f9fafb
  • editor.lineHighlightBackground#ffffff10
  • editor.selectionBackground#ffffff35
  • editor.selectionHighlightBackground#575b6180
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#111827
  • editorGroup.dropBackground#ffffff10
  • editorGroupHeader.tabsBackground#111827
  • editorGutter.addedBackground#8b5cf6
  • editorGutter.background#111827
  • editorGutter.deletedBackground#ec4899
  • editorGutter.modifiedBackground#4f46e5
  • editorHoverWidget.background#111827
  • editorHoverWidget.border#d1d5db
  • editorIndentGuide.activeBackground#6366f1
  • editorIndentGuide.background#4b5563
  • editorLineNumber.activeForeground#6366f1
  • editorLineNumber.foreground#4b5563
  • editorSuggestWidget.background#1f2937
  • editorSuggestWidget.border#d1d5db
  • editorWhitespace.foreground#4b5563
  • editorWidget.background#111827
  • explorer.foreground#ef4444
  • focusBorder#111827
  • gitDecoration.addedResourceForeground#818cf8
  • gitDecoration.conflictingResourceForeground#a5b4fc
  • gitDecoration.deletedResourceForeground#ef4444
  • gitDecoration.ignoredResourceForeground#4b5563
  • gitDecoration.modifiedResourceForeground#8b5cf6
  • gitDecoration.renamedResourceForeground#a5b4fc
  • gitDecoration.stageDeletedResourceForeground#a5b4fc
  • gitDecoration.stageModifiedResourceForeground#a5b4fc
  • gitDecoration.submoduleResourceForeground#a5b4fc
  • gitDecoration.untrackedResourceForeground#c7d2fe
  • input.background#1f2937
  • inputOption.activeBorder#d1d5db
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#d1d5db
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#d1d5db
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#d1d5db
  • list.activeSelectionBackground#1f2937
  • list.dropBackground#ffffff10
  • list.errorForeground#ef4444
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#1f2937
  • list.inactiveSelectionBackground#111827
  • list.warningForeground#eab308
  • menu.background#111827
  • menu.foreground#cccccc
  • minimap.selectionHighlight#ffffff35
  • notebook.cellBorderColor#111827
  • notebook.cellEditorBackground#1f2937
  • notebook.cellHoverBackground#1f2937
  • notebook.cellInsertionIndicator#ffffff
  • notebook.focusedCellBackground#1f2937
  • notebook.focusedCellBorder#4f46e5
  • notebook.focusedEditorBorder#4f46e5
  • panel.background#111827
  • panel.border#4f46e5
  • panelTitle.activeBorder#4f46e5
  • panelTitle.activeForeground#f9fafb
  • panelTitle.inactiveForeground#6b7280
  • peekView.border#6366f1
  • peekViewEditor.background#1f2937
  • peekViewEditor.matchHighlightBackground#75715E
  • peekViewResult.background#111827
  • peekViewResult.matchHighlightBackground#75715E
  • peekViewResult.selectionBackground#111827
  • peekViewTitle.background#111827
  • pickerGroup.foreground#75715E
  • ports.iconRunningProcessForeground#ccccc7
  • progressBar.background#4f46e5
  • quickInput.background#1f2937
  • quickInput.foreground#f3f4f6
  • quickInputList.focusBackground#111827
  • selection.background#ffffff35
  • settings.focusedRowBackground#1f2937
  • sideBar.background#111827
  • sideBar.foreground#9ca3af
  • sideBarSectionHeader.background#111827
  • statusBar.background#111827
  • statusBar.border#111827
  • statusBar.debuggingBackground#f56565
  • statusBar.debuggingBorder#f56565
  • statusBar.debuggingForeground#f8f8f2
  • statusBar.foreground#f8f8f2
  • statusBar.noFolderBackground#111827
  • statusBar.noFolderBorder#111827
  • statusBar.noFolderForeground#f8f8f2
  • statusBarItem.errorBackground#f56565
  • statusBarItem.errorForeground#f9fafb
  • statusBarItem.prominentBackground#4f46e5
  • statusBarItem.prominentForeground#f9fafb
  • statusBarItem.prominentHoverBackground#6366f1
  • statusBarItem.remoteBackground#4f46e5
  • statusBarItem.remoteForeground#f9fafb
  • statusBarItem.warningBackground#4f46e5
  • statusBarItem.warningForeground#f9fafb
  • tab.activeBorder#4f46e5
  • tab.activeForeground#f9fafb
  • tab.border#111827
  • tab.inactiveBackground#111827
  • tab.inactiveForeground#ccccc7
  • tab.lastPinnedBorder#d1d5db
  • terminal.ansiBlack#616161
  • terminal.ansiBlue#3b82f6
  • terminal.ansiBrightBlack#616161
  • terminal.ansiBrightBlue#2563eb
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#a3e635
  • terminal.ansiBrightMagenta#7c3aed
  • terminal.ansiBrightRed#dc2626
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#facc15
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#84cc16
  • terminal.ansiMagenta#8b5cf6
  • terminal.ansiRed#ef4444
  • terminal.ansiWhite#f9fafb
  • terminal.ansiYellow#eab308
  • titleBar.activeBackground#111827
  • titleBar.activeForeground#f9fafb
  • titleBar.inactiveBackground#111827
  • titleBar.inactiveForeground#6b7280
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f9fafb
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#f9fafb
comment, punctuation.definition.comment#6b7280
string#a78bfa
punctuation.definition.template-expression, punctuation.section.embedded#4f46e5
meta.template.expression#F8F8F2
punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor.optional.js.jsx#6b7280
constant.numeric#ec4899
constant.language, keyword.operator.ternary.jsx, meta.brace.round.jsx, meta.brace.square.jsx, punctuation.definition.block.jsx, punctuation.definition.binding-pattern.object.jsx, punctuation.definition.template-expression.begin.jsx, punctuation.definition.template-expression.end.jsx, keyword.operator.ternary.js, meta.brace.round.js, meta.brace.square.js, punctuation.definition.block.js, punctuation.definition.binding-pattern.object.js, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, keyword.operator.ternary.ts, meta.brace.round.ts, meta.brace.square.ts, punctuation.definition.block.ts, punctuation.definition.binding-pattern.object.ts, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, keyword.operator.ternary.tsx, meta.brace.round.tsx, meta.brace.square.tsx, punctuation.definition.block.tsx, punctuation.definition.binding-pattern.object.tsx, punctuation.definition.template-expression.begin.tsx, punctuation.definition.template-expression.end.tsx, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.ts, punctuation.section.embedded.end.ts, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#ec4899
constant.character, constant.other#f9fafb
variable#f9fafb
keyword, support.type.property-name.json#818cf8
storage#f9fafb
storage.type#818cf8italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#e9d5ff
entity.other.inherited-class#e9d5ffitalic underline
entity.name.function, meta.function-call.python, new.expr.js#c4b5fd
variable.parameter#f9fafbitalic
entity.name.tag, support.class.component.jsx, support.class.component.js, support.class.component.ts, support.class.component.tsx#ec4899
entity.other.attribute-name#818cf8
support.function#818cf8
support.constant#818cf8
support.type, support.class#c4b5fditalic
support.other.variable
invalid#F44747
invalid.deprecated#F44747
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#F811A0
markup.inserted#f4a14d
markup.changed#8b5cf6
constant.numeric.line-number.find-in-files - match#ec4899A0
entity.name.filename.find-in-files#FCFD28
markup.quote#F811A0
markup.list#d946ef
markup.bold, markup.italic#faf5ff
markup.inline.raw#EC0095
markup.heading#ec4899
markup.heading.setext#ec4899bold
markup.heading.markdownbold
markup.quote.markdown#e5e7ebitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#ec4899
markup.underline.link.markdown,markup.underline.link.image.markdown#faf5ff
markup.italic.markdownitalic
markup.strikethroughstrikethrough
markup.list.unnumbered.markdown, markup.list.numbered.markdown#f8f8f2
punctuation.definition.list.begin.markdown#6366f1
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#EC0095