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