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#1a1f2e
  • activityBar.activeBorder#ff6b35
  • activityBar.background#0f1419
  • activityBar.foreground#cbd5e0
  • activityBar.inactiveForeground#5a6575
  • activityBarBadge.background#00d4aa
  • activityBarBadge.foreground#0f1419
  • breadcrumb.activeSelectionForeground#e1e5e9
  • breadcrumb.background#1a1e26
  • breadcrumb.focusForeground#ff6b35
  • breadcrumb.foreground#8892a0
  • button.background#00d4aa
  • button.foreground#0f1419
  • button.hoverBackground#00c49a
  • button.secondaryBackground#ff6b35
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#ff5722
  • debugConsole.errorForeground#f44336
  • debugConsole.infoForeground#4a90e2
  • debugConsole.sourceForeground#00d4aa
  • debugConsole.warningForeground#ffb300
  • debugToolBar.background#1a1f2e
  • debugToolBar.border#ff6b35
  • diffEditor.insertedLineBackground#7cb34211
  • diffEditor.insertedTextBackground#7cb34222
  • diffEditor.removedLineBackground#f4433611
  • diffEditor.removedTextBackground#f4433622
  • dropdown.background#1a1f2e
  • dropdown.border#4a90e2
  • dropdown.foreground#e1e5e9
  • editor.background#1a1e26
  • editor.foreground#e1e5e9
  • editor.inactiveSelectionBackground#3a4047d0
  • editor.selectionBackground#1e3f64d0
  • editor.selectionHighlightBackground#4a90e233
  • editorCursor.foreground#ff6b35
  • editorHoverWidget.background#1a1f2e
  • editorHoverWidget.border#ff6b35
  • editorHoverWidget.foreground#e1e5e9
  • editorIndentGuide.activeBackground1#4a5568
  • editorIndentGuide.background1#2d3748
  • editorLineNumber.activeForeground#ff6b35
  • editorLineNumber.foreground#5a6575
  • editorOverviewRuler.border#2d3748
  • editorOverviewRuler.errorForeground#f44336
  • editorOverviewRuler.infoForeground#4a90e2
  • editorOverviewRuler.warningForeground#ffb300
  • editorSuggestWidget.background#1a1f2e
  • editorSuggestWidget.border#4a90e2
  • editorSuggestWidget.foreground#e1e5e9
  • editorSuggestWidget.highlightForeground#ffb300
  • editorSuggestWidget.selectedBackground#4a90e2
  • editorWhitespace.foreground#2d3748
  • editorWidget.background#1a1f2e
  • editorWidget.border#4a90e2
  • editorWidget.foreground#e1e5e9
  • editorWidget.resizeBorder#ff6b35
  • gitDecoration.addedResourceForeground#7cb342
  • gitDecoration.conflictingResourceForeground#e91e63
  • gitDecoration.deletedResourceForeground#f44336
  • gitDecoration.ignoredResourceForeground#8892a0
  • gitDecoration.modifiedResourceForeground#ffb300
  • gitDecoration.untrackedResourceForeground#00d4aa
  • input.background#1a1f2e
  • input.border#4a90e2
  • input.foreground#e1e5e9
  • input.placeholderForeground#8892a0
  • inputOption.activeBorder#ff6b35
  • inputValidation.errorBackground#f4433633
  • inputValidation.errorBorder#f44336
  • inputValidation.warningBackground#ffb30033
  • inputValidation.warningBorder#ffb300
  • list.activeSelectionBackground#4a90e2
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#4a90e233
  • list.focusBackground#4a90e2
  • list.hoverBackground#1e2a3a
  • list.inactiveSelectionBackground#2a3441
  • menu.background#1a1f2e
  • menu.foreground#e1e5e9
  • menu.selectionBackground#4a90e2
  • menu.selectionForeground#ffffff
  • merge.border#4a90e2
  • merge.currentContentBackground#7cb34211
  • merge.currentHeaderBackground#7cb34233
  • merge.incomingContentBackground#00d4aa11
  • merge.incomingHeaderBackground#00d4aa33
  • minimap.background#1a1e26
  • minimap.errorHighlight#f44336
  • minimap.selectionHighlight#4a90e233
  • minimap.warningHighlight#ffb300
  • notificationCenter.border#4a90e2
  • notificationCenterHeader.background#0f1419
  • notifications.background#1a1f2e
  • notifications.border#4a90e2
  • notifications.foreground#e1e5e9
  • notificationToast.border#4a90e2
  • panel.background#141920
  • panel.border#2d3748
  • panelTitle.activeBorder#ff6b35
  • panelTitle.activeForeground#e1e5e9
  • panelTitle.inactiveForeground#8892a0
  • peekView.border#ff6b35
  • peekViewEditor.background#1a1e26
  • peekViewResult.background#141920
  • peekViewTitle.background#0f1419
  • ports.iconRunningProcessForeground#7cb342
  • progressBar.background#00d4aa
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#88888890
  • scrollbarSlider.background#88888833
  • scrollbarSlider.hoverBackground#88888890
  • sideBar.background#141920
  • sideBar.border#2d3748
  • sideBar.foreground#e1e5e9
  • sideBarSectionHeader.background#1a1f2e
  • sideBarSectionHeader.border#2d3748
  • sideBarSectionHeader.foreground#ff6b35
  • sideBarTitle.foreground#cbd5e0
  • statusBar.background#0f1419
  • statusBar.border#2d3748
  • statusBar.debuggingBackground#ff6b35
  • statusBar.foreground#cbd5e0
  • statusBar.noFolderBackground#0f1419
  • statusBarItem.activeBackground#4a90e2
  • statusBarItem.hoverBackground#1a1f2e
  • statusBarItem.remoteBackground#00d4aa
  • statusBarItem.remoteForeground#0f1419
  • tab.activeBackground#1a1e26
  • tab.activeBorder#ff6b35
  • tab.activeForeground#e1e5e9
  • tab.border#2d3748
  • tab.dragAndDropBorder#ff6b35
  • tab.hoverBackground#1a1f2e
  • tab.hoverForeground#e1e5e9
  • tab.inactiveBackground#0f1419
  • tab.inactiveForeground#8892a0
  • terminal.ansiBlue#4a90e2
  • terminal.ansiCyan#00d4aa
  • terminal.ansiGreen#7cb342
  • terminal.ansiMagenta#e91e63
  • terminal.ansiRed#f44336
  • terminal.ansiYellow#ffb300
  • terminal.background#141920
  • terminal.foreground#e1e5e9
  • terminal.inactiveSelectionBackground#3a404733
  • terminal.selectionBackground#4a90e233
  • titleBar.activeBackground#0f1419
  • titleBar.activeForeground#e1e5e9
  • titleBar.border#2d3748
  • titleBar.inactiveBackground#0a0e14
  • titleBar.inactiveForeground#8892a0
  • tree.indentGuidesStroke#ff6b35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a9955italic
punctuation.definition.string.begin, punctuation.definition.string.end#86d17a—
string.quoted.single, string.quoted.double, string.quoted.triple#a6e3a1—
punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.template punctuation.definition.string.begin, string.template punctuation.definition.string.end#76c76c—
string.template, string.quoted.template#96d96b—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end#ff8c42—
meta.template.expression#e1e5e9—
constant.character.escape#66b366—
string.regexp#4ec9b0—
constant.numeric, constant.numeric.decimal, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#79d4fd—
keyword#ff7b54—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.return, keyword.control.throw, keyword.control.try, keyword.control.catch, keyword.control.finally#ff6b35—
storage.type.function#ff8c42—
storage.type#e94c4c—
storage.modifier#ff49ad—
keyword.other.new, keyword.operator.new#ff8c42—
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default#ff54ff—
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment, punctuation.separator, punctuation.terminator#d4d4d4—
keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.in, keyword.operator.of, keyword.operator.delete, keyword.operator.void#ff8c42—
storage.type.function.arrow#ff6b35—
entity.name.type, support.type, support.class, entity.name.class#4dd0e1—
support.type.primitive, support.type.builtin, entity.name.type.ts, entity.name.type.js#26c6da—
entity.name.type.interface#00e5ff—
entity.name.type.parameter, meta.type.parameters#80deea—
entity.name.function, support.function#ffd54f—
variable.function, meta.function-call#ffcc02—
meta.function-call.method#ffe082—
variable.other.readwrite, variable.other.object#7db3d1—
meta.function.parameters#a5c9e1—
variable.parameter#a5c9e1—
variable.other.constant, variable.other.enummember#4fc3f7—
variable.language, variable.language.this, variable.language.super, constant.language#ef5350italic
variable.object.property, support.variable.property#d4a5e8—
meta.object-literal.key, string.unquoted.label#ce93d8—
support.type.property-name.css#ba68c8—
entity.name.tag.tsx, entity.name.tag.jsx#f48fb1—
support.class.component.tsx, support.class.component.jsx#ff4081—
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#ffc1cc—
entity.name.tag.html#ef5350—
entity.other.attribute-name.html#90caf9—
punctuation.definition.tag.begin, punctuation.definition.tag.end#8892a0—
punctuation.definition.block, punctuation.definition.brackets, punctuation.definition.parameters, punctuation.definition.array#c9d1d9—
punctuation.decorator, meta.decorator#e91e63—
invalid, invalid.illegal#f44336—
Mantis by Daniel Ceron Claros - VS Code Theme