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#101723
  • activityBar.border#192638
  • activityBar.foreground#4a6fa5
  • activityBar.inactiveForeground#4d5b6f
  • activityBarBadge.background#b9a384
  • activityBarBadge.foreground#f1f1f2
  • badge.background#4a6fa5
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#cdd1d6
  • breadcrumb.focusForeground#cdd1d6
  • breadcrumb.foreground#4d5b6f
  • button.background#4a6fa5
  • button.foreground#f1f1f2
  • button.hoverBackground#5c7dae
  • button.secondaryBackground#131d2b
  • button.secondaryForeground#cdd1d6
  • descriptionForeground#4d5b6f
  • dropdown.background#101723
  • dropdown.border#192638
  • dropdown.foreground#cdd1d6
  • editor.background#0c121a
  • editor.findMatchBackground#b163a366
  • editor.findMatchHighlightBackground#b163a333
  • editor.foreground#cdd1d6
  • editor.inactiveSelectionBackground#4a6fa526
  • editor.lineHighlightBackground#4a6fa51a
  • editor.lineHighlightBorder#4a6fa500
  • editor.selectionBackground#4a6fa54d
  • editor.wordHighlightBackground#4a6fa533
  • editorBracketMatch.background#4a6fa540
  • editorBracketMatch.border#4a6fa599
  • editorCursor.foreground#4a6fa5
  • editorError.foreground#dd4132
  • editorGroup.border#192638
  • editorGroupHeader.tabsBackground#101723
  • editorGroupHeader.tabsBorder#192638
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cdd1d633
  • editorIndentGuide.background#cdd1d614
  • editorInfo.foreground#b9a384
  • editorLineNumber.activeForeground#cdd1d6
  • editorLineNumber.foreground#4d5b6f
  • editorRuler.foreground#cdd1d614
  • editorSuggestWidget.selectedBackground#4a6fa540
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cdd1d61a
  • editorWidget.background#101723
  • editorWidget.border#192638
  • focusBorder#4a6fa599
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#4d5b6f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#4d5b6f
  • input.background#101723
  • input.border#192638
  • input.foreground#cdd1d6
  • input.placeholderForeground#4d5b6f
  • inputOption.activeBorder#4a6fa5
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#b9a384
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#4a6fa54d
  • list.activeSelectionForeground#cdd1d6
  • list.focusBackground#4a6fa533
  • list.highlightForeground#4a6fa5
  • list.hoverBackground#4a6fa526
  • list.inactiveSelectionBackground#4a6fa526
  • minimap.background#0c121a
  • minimap.findMatchHighlight#b163a399
  • minimap.selectionHighlight#4a6fa566
  • notificationLink.foreground#4a6fa5
  • notifications.background#131d2b
  • notifications.foreground#cdd1d6
  • panel.background#101723
  • panel.border#192638
  • panelTitle.activeBorder#4a6fa5
  • panelTitle.activeForeground#cdd1d6
  • panelTitle.inactiveForeground#4d5b6f
  • peekView.border#4a6fa5
  • peekViewEditor.background#101723
  • peekViewResult.background#131d2b
  • peekViewTitle.background#101723
  • progressBar.background#4a6fa5
  • scrollbar.shadow#070b1045
  • scrollbarSlider.activeBackground#cdd1d659
  • scrollbarSlider.background#cdd1d61f
  • scrollbarSlider.hoverBackground#cdd1d640
  • selection.background#4a6fa54d
  • sideBar.background#131d2b
  • sideBar.border#192638
  • sideBar.foreground#cdd1d6
  • sideBarSectionHeader.background#4a6fa526
  • sideBarSectionHeader.foreground#cdd1d6
  • sideBarTitle.foreground#cdd1d6
  • statusBar.background#2c4363
  • statusBar.border#192638
  • statusBar.debuggingBackground#b9a384
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#92a9c9
  • statusBar.noFolderBackground#101723
  • statusBarItem.hoverBackground#4a6fa54d
  • statusBarItem.remoteBackground#4a6fa5
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#0c121a
  • tab.activeBorder#4a6fa5
  • tab.activeBorderTop#4a6fa500
  • tab.activeForeground#cdd1d6
  • tab.border#192638
  • tab.inactiveBackground#101723
  • tab.inactiveForeground#4d5b6f
  • terminal.ansiBlack#0c121a
  • terminal.ansiBlue#2d5e93
  • terminal.ansiBrightBlack#4d5b6f
  • 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#cdd1d6
  • terminal.ansiYellow#efc050
  • terminal.background#101723
  • terminal.foreground#cdd1d6
  • terminalCursor.foreground#4a6fa5
  • textLink.activeForeground#c4b196
  • textLink.foreground#b9a384
  • titleBar.activeBackground#101723
  • titleBar.activeForeground#cdd1d6
  • titleBar.border#192638
  • titleBar.inactiveBackground#101723
  • titleBar.inactiveForeground#4d5b6f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4d5b6fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#6586b3bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#6586b3bold
storage.type, storage.modifier#6586b3bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#b9a384
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#6586b3
string.regexp#b9a384
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#b163a3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#45b5aabold
variable.other.constant, variable.other.enummember#45b5aabold
constant.character.escape#6585b3
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#0085caitalic
entity.name.type.parameter#0085caitalic
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#cdd1d6
variable.parameter#cdd1d6italic
variable.language, variable.language.this, variable.language.self, variable.language.super#6586b3italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cdd1d6
entity.name.class, entity.name.type.class, support.class#76ff7bbold italic
entity.other.inherited-class#76ff7bitalic
entity.name.tag, punctuation.definition.tag#6586b3bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6585b3
punctuation, punctuation.separator, punctuation.terminator, meta.brace#4d5b6f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#0085caitalic
support.type.property-name.css, support.type.vendored.property-name.css#0085ca
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#76ff7bbold
support.constant.property-value.css, support.constant.color.css#45b5aa
keyword.other.unit.css#b163a3
support.type.property-name.json#0085ca
markup.heading, markup.heading entity.name, entity.name.section.markdown#6586b3bold
markup.bold#45b5aabold
markup.italic#0085caitalic
markup.inline.raw, markup.raw#b9a384
markup.underline.link#f7cac9
markup.quote#4d5b6fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050