Skip to main content
Coding Theme

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
Nightwind by Ratul Maharaj - VS Code Theme