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#101d2f
  • activityBar.border#1a2e4d
  • activityBar.foreground#4d88e1
  • activityBar.inactiveForeground#4e6381
  • activityBarBadge.background#b9a384
  • activityBarBadge.foreground#f1f1f2
  • badge.background#4d88e1
  • badge.foreground#0c1422
  • breadcrumb.activeSelectionForeground#cdd2da
  • breadcrumb.focusForeground#cdd2da
  • breadcrumb.foreground#4e6381
  • button.background#4d88e1
  • button.foreground#0c1422
  • button.hoverBackground#5f94e4
  • button.secondaryBackground#14233b
  • button.secondaryForeground#cdd2da
  • descriptionForeground#4e6381
  • dropdown.background#101d2f
  • dropdown.border#1a2e4d
  • dropdown.foreground#cdd2da
  • editor.background#0c1624
  • editor.findMatchBackground#b163a366
  • editor.findMatchHighlightBackground#b163a333
  • editor.foreground#cdd2da
  • editor.inactiveSelectionBackground#4d88e126
  • editor.lineHighlightBackground#4d88e11a
  • editor.lineHighlightBorder#4d88e100
  • editor.selectionBackground#4d88e14d
  • editor.wordHighlightBackground#4d88e133
  • editorBracketMatch.background#4d88e140
  • editorBracketMatch.border#4d88e199
  • editorCursor.foreground#4d88e1
  • editorError.foreground#dd4132
  • editorGroup.border#1a2e4d
  • editorGroupHeader.tabsBackground#101d2f
  • editorGroupHeader.tabsBorder#1a2e4d
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cdd2da33
  • editorIndentGuide.background#cdd2da14
  • editorInfo.foreground#b9a384
  • editorLineNumber.activeForeground#cdd2da
  • editorLineNumber.foreground#4e6381
  • editorRuler.foreground#cdd2da14
  • editorSuggestWidget.selectedBackground#4d88e140
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cdd2da1a
  • editorWidget.background#101d2f
  • editorWidget.border#1a2e4d
  • focusBorder#4d88e199
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#4e6381
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#4e6381
  • input.background#101d2f
  • input.border#1a2e4d
  • input.foreground#cdd2da
  • input.placeholderForeground#4e6381
  • inputOption.activeBorder#4d88e1
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#b9a384
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#4d88e14d
  • list.activeSelectionForeground#cdd2da
  • list.focusBackground#4d88e133
  • list.highlightForeground#4d88e1
  • list.hoverBackground#4d88e126
  • list.inactiveSelectionBackground#4d88e126
  • minimap.background#0c1624
  • minimap.findMatchHighlight#b163a399
  • minimap.selectionHighlight#4d88e166
  • notificationLink.foreground#4d88e1
  • notifications.background#14233b
  • notifications.foreground#cdd2da
  • panel.background#101d2f
  • panel.border#1a2e4d
  • panelTitle.activeBorder#4d88e1
  • panelTitle.activeForeground#cdd2da
  • panelTitle.inactiveForeground#4e6381
  • peekView.border#4d88e1
  • peekViewEditor.background#101d2f
  • peekViewResult.background#14233b
  • peekViewTitle.background#101d2f
  • progressBar.background#4d88e1
  • scrollbar.shadow#080e1645
  • scrollbarSlider.activeBackground#cdd2da59
  • scrollbarSlider.background#cdd2da1f
  • scrollbarSlider.hoverBackground#cdd2da40
  • selection.background#4d88e14d
  • sideBar.background#14233b
  • sideBar.border#1a2e4d
  • sideBar.foreground#cdd2da
  • sideBarSectionHeader.background#4d88e126
  • sideBarSectionHeader.foreground#cdd2da
  • sideBarTitle.foreground#cdd2da
  • statusBar.background#2e5287
  • statusBar.border#1a2e4d
  • statusBar.debuggingBackground#b9a384
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#94b8ed
  • statusBar.noFolderBackground#101d2f
  • statusBarItem.hoverBackground#4d88e14d
  • statusBarItem.remoteBackground#4d88e1
  • statusBarItem.remoteForeground#0c1422
  • tab.activeBackground#0c1624
  • tab.activeBorder#4d88e1
  • tab.activeBorderTop#4d88e100
  • tab.activeForeground#cdd2da
  • tab.border#1a2e4d
  • tab.inactiveBackground#101d2f
  • tab.inactiveForeground#4e6381
  • terminal.ansiBlack#0c1624
  • terminal.ansiBlue#2e6ab1
  • terminal.ansiBrightBlack#4e6381
  • 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#cdd2da
  • terminal.ansiYellow#efc050
  • terminal.background#101d2f
  • terminal.foreground#cdd2da
  • terminalCursor.foreground#4d88e1
  • textLink.activeForeground#c4b196
  • textLink.foreground#b9a384
  • titleBar.activeBackground#101d2f
  • titleBar.activeForeground#cdd2da
  • titleBar.border#1a2e4d
  • titleBar.inactiveBackground#101d2f
  • titleBar.inactiveForeground#4e6381

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#4e6381italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#4d88e1bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#4d88e1bold
storage.type, storage.modifier#4d88e1bold
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#4d88e1
string.regexp#b9a384
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#b76faa
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#00a499bold
variable.other.constant, variable.other.enummember#00a499bold
constant.character.escape#689ae6
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#7ba0b4italic
entity.name.type.parameter#7ba0b4italic
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#cdd2da
variable.parameter#cdd2daitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#4d88e1italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cdd2da
entity.name.class, entity.name.type.class, support.class#76ff7bbold italic
entity.other.inherited-class#76ff7bitalic
entity.name.tag, punctuation.definition.tag#4d88e1bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#689ae6
punctuation, punctuation.separator, punctuation.terminator, meta.brace#4e6381
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#7ba0b4italic
support.type.property-name.css, support.type.vendored.property-name.css#7ba0b4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#76ff7bbold
support.constant.property-value.css, support.constant.color.css#00a499
keyword.other.unit.css#b76faa
support.type.property-name.json#7ba0b4
markup.heading, markup.heading entity.name, entity.name.section.markdown#4d88e1bold
markup.bold#00a499bold
markup.italic#7ba0b4italic
markup.inline.raw, markup.raw#b9a384
markup.underline.link#f7cac9
markup.quote#4e6381italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050