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.background#000d23
  • activityBar.border#001538
  • activityBar.foreground#003da5
  • activityBar.inactiveForeground#374c6f
  • activityBarBadge.background#e8ae4e
  • activityBarBadge.foreground#f1f1f2
  • badge.background#003da5
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#c8cdd6
  • breadcrumb.focusForeground#c8cdd6
  • breadcrumb.foreground#374c6f
  • button.background#003da5
  • button.foreground#f1f1f2
  • button.hoverBackground#1a50ae
  • button.secondaryBackground#00102b
  • button.secondaryForeground#c8cdd6
  • descriptionForeground#374c6f
  • dropdown.background#000d23
  • dropdown.border#001538
  • dropdown.foreground#c8cdd6
  • editor.background#000a1a
  • editor.findMatchBackground#76ff7b66
  • editor.findMatchHighlightBackground#76ff7b33
  • editor.foreground#c8cdd6
  • editor.inactiveSelectionBackground#003da526
  • editor.lineHighlightBackground#003da51a
  • editor.lineHighlightBorder#003da500
  • editor.selectionBackground#003da54d
  • editor.wordHighlightBackground#003da533
  • editorBracketMatch.background#003da540
  • editorBracketMatch.border#003da599
  • editorCursor.foreground#003da5
  • editorError.foreground#dd4132
  • editorGroup.border#001538
  • editorGroupHeader.tabsBackground#000d23
  • editorGroupHeader.tabsBorder#001538
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#c8cdd633
  • editorIndentGuide.background#c8cdd614
  • editorInfo.foreground#e8ae4e
  • editorLineNumber.activeForeground#c8cdd6
  • editorLineNumber.foreground#374c6f
  • editorRuler.foreground#c8cdd614
  • editorSuggestWidget.selectedBackground#003da540
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#c8cdd61a
  • editorWidget.background#000d23
  • editorWidget.border#001538
  • focusBorder#003da599
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#374c6f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#374c6f
  • input.background#000d23
  • input.border#001538
  • input.foreground#c8cdd6
  • input.placeholderForeground#374c6f
  • inputOption.activeBorder#003da5
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#e8ae4e
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#003da54d
  • list.activeSelectionForeground#c8cdd6
  • list.focusBackground#003da533
  • list.highlightForeground#003da5
  • list.hoverBackground#003da526
  • list.inactiveSelectionBackground#003da526
  • minimap.background#000a1a
  • minimap.findMatchHighlight#76ff7b99
  • minimap.selectionHighlight#003da566
  • notificationLink.foreground#003da5
  • notifications.background#00102b
  • notifications.foreground#c8cdd6
  • panel.background#000d23
  • panel.border#001538
  • panelTitle.activeBorder#003da5
  • panelTitle.activeForeground#c8cdd6
  • panelTitle.inactiveForeground#374c6f
  • peekView.border#003da5
  • peekViewEditor.background#000d23
  • peekViewResult.background#00102b
  • peekViewTitle.background#000d23
  • progressBar.background#003da5
  • scrollbar.shadow#00061045
  • scrollbarSlider.activeBackground#c8cdd659
  • scrollbarSlider.background#c8cdd61f
  • scrollbarSlider.hoverBackground#c8cdd640
  • selection.background#003da54d
  • sideBar.background#00102b
  • sideBar.border#001538
  • sideBar.foreground#c8cdd6
  • sideBarSectionHeader.background#003da526
  • sideBarSectionHeader.foreground#c8cdd6
  • sideBarTitle.foreground#c8cdd6
  • statusBar.background#002563
  • statusBar.border#001538
  • statusBar.debuggingBackground#e8ae4e
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#668bc9
  • statusBar.noFolderBackground#000d23
  • statusBarItem.hoverBackground#003da54d
  • statusBarItem.remoteBackground#003da5
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#000a1a
  • tab.activeBorder#003da5
  • tab.activeBorderTop#003da500
  • tab.activeForeground#c8cdd6
  • tab.border#001538
  • tab.inactiveBackground#000d23
  • tab.inactiveForeground#374c6f
  • terminal.ansiBlack#000a1a
  • terminal.ansiBlue#084593
  • terminal.ansiBrightBlack#374c6f
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f1f1f2
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#c8cdd6
  • terminal.ansiYellow#efc050
  • terminal.background#000d23
  • terminal.foreground#c8cdd6
  • terminalCursor.foreground#003da5
  • textLink.activeForeground#ebba69
  • textLink.foreground#e8ae4e
  • titleBar.activeBackground#000d23
  • titleBar.activeForeground#c8cdd6
  • titleBar.border#001538
  • titleBar.inactiveBackground#000d23
  • titleBar.inactiveForeground#374c6f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#374c6fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#577fc4bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#577fc4bold
storage.type, storage.modifier#577fc4bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#e8ae4e
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#577fc4
string.regexp#e8ae4e
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#76ff7b
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8372a5bold
variable.other.constant, variable.other.enummember#8372a5bold
constant.character.escape#567ec4
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.name.type.alias, entity.name.type.module, support.type, support.type.builtin#688696italic
entity.name.type.parameter#688696italic
entity.name.function, meta.function entity.name.function#f7cac9bold
meta.function-call entity.name.function, support.function#f7cac9
meta.method-call entity.name.function, entity.name.function.member#f7cac9
variable, variable.other, variable.other.readwrite#c8cdd6
variable.parameter#c8cdd6italic
variable.language, variable.language.this, variable.language.self, variable.language.super#577fc4italic
variable.other.property, variable.other.object.property, meta.object-literal.key#c8cdd6
entity.name.class, entity.name.type.class, support.class#b163a3bold italic
entity.other.inherited-class#b163a3italic
entity.name.tag, punctuation.definition.tag#577fc4bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#567ec4
punctuation, punctuation.separator, punctuation.terminator, meta.brace#374c6f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#688696italic
support.type.property-name.css, support.type.vendored.property-name.css#688696
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#b163a3bold
support.constant.property-value.css, support.constant.color.css#8372a5
keyword.other.unit.css#76ff7b
support.type.property-name.json#688696
markup.heading, markup.heading entity.name, entity.name.section.markdown#577fc4bold
markup.bold#8372a5bold
markup.italic#688696italic
markup.inline.raw, markup.raw#e8ae4e
markup.underline.link#f7cac9
markup.quote#374c6fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050