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#001c2a
  • activityBar.border#002d45
  • activityBar.foreground#0085ca
  • activityBar.inactiveForeground#407e9f
  • activityBarBadge.background#fe5000
  • activityBarBadge.foreground#f2f4f6
  • badge.background#0085ca
  • badge.foreground#00141e
  • breadcrumb.activeSelectionForeground#cbdbe3
  • breadcrumb.focusForeground#cbdbe3
  • breadcrumb.foreground#407e9f
  • button.background#0085ca
  • button.foreground#00141e
  • button.hoverBackground#1a91cf
  • button.secondaryBackground#002335
  • button.secondaryForeground#cbdbe3
  • descriptionForeground#407e9f
  • dropdown.background#001c2a
  • dropdown.border#002d45
  • dropdown.foreground#cbdbe3
  • editor.background#001520
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#cbdbe3
  • editor.inactiveSelectionBackground#0085ca26
  • editor.lineHighlightBackground#0085ca1a
  • editor.lineHighlightBorder#0085ca00
  • editor.selectionBackground#0085ca4d
  • editor.wordHighlightBackground#0085ca33
  • editorBracketMatch.background#0085ca40
  • editorBracketMatch.border#0085ca99
  • editorCursor.foreground#0085ca
  • editorError.foreground#dd4132
  • editorGroup.border#002d45
  • editorGroupHeader.tabsBackground#001c2a
  • editorGroupHeader.tabsBorder#002d45
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cbdbe333
  • editorIndentGuide.background#cbdbe314
  • editorInfo.foreground#fe5000
  • editorLineNumber.activeForeground#cbdbe3
  • editorLineNumber.foreground#407e9f
  • editorRuler.foreground#cbdbe314
  • editorSuggestWidget.selectedBackground#0085ca40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cbdbe31a
  • editorWidget.background#001c2a
  • editorWidget.border#002d45
  • focusBorder#0085ca99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#407e9f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#407e9f
  • input.background#001c2a
  • input.border#002d45
  • input.foreground#cbdbe3
  • input.placeholderForeground#407e9f
  • inputOption.activeBorder#0085ca
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#fe5000
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#0085ca4d
  • list.activeSelectionForeground#cbdbe3
  • list.focusBackground#0085ca33
  • list.highlightForeground#0085ca
  • list.hoverBackground#0085ca26
  • list.inactiveSelectionBackground#0085ca26
  • minimap.background#001520
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#0085ca66
  • notificationLink.foreground#0085ca
  • notifications.background#002335
  • notifications.foreground#cbdbe3
  • panel.background#001c2a
  • panel.border#002d45
  • panelTitle.activeBorder#0085ca
  • panelTitle.activeForeground#cbdbe3
  • panelTitle.inactiveForeground#407e9f
  • peekView.border#0085ca
  • peekViewEditor.background#001c2a
  • peekViewResult.background#002335
  • peekViewTitle.background#001c2a
  • progressBar.background#0085ca
  • scrollbar.shadow#000d1445
  • scrollbarSlider.activeBackground#cbdbe359
  • scrollbarSlider.background#cbdbe31f
  • scrollbarSlider.hoverBackground#cbdbe340
  • selection.background#0085ca4d
  • sideBar.background#002335
  • sideBar.border#002d45
  • sideBar.foreground#cbdbe3
  • sideBarSectionHeader.background#0085ca26
  • sideBarSectionHeader.foreground#cbdbe3
  • sideBarTitle.foreground#cbdbe3
  • statusBar.background#005079
  • statusBar.border#002d45
  • statusBar.debuggingBackground#fe5000
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#66b6df
  • statusBar.noFolderBackground#001c2a
  • statusBarItem.hoverBackground#0085ca4d
  • statusBarItem.remoteBackground#0085ca
  • statusBarItem.remoteForeground#00141e
  • tab.activeBackground#001520
  • tab.activeBorder#0085ca
  • tab.activeBorderTop#0085ca00
  • tab.activeForeground#cbdbe3
  • tab.border#002d45
  • tab.inactiveBackground#001c2a
  • tab.inactiveForeground#407e9f
  • terminal.ansiBlack#001520
  • terminal.ansiBlue#0869a6
  • terminal.ansiBrightBlack#407e9f
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f2f4f6
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#cbdbe3
  • terminal.ansiYellow#efc050
  • terminal.background#001c2a
  • terminal.foreground#cbdbe3
  • terminalCursor.foreground#0085ca
  • textLink.activeForeground#fe6a26
  • textLink.foreground#fe5000
  • titleBar.activeBackground#001c2a
  • titleBar.activeForeground#cbdbe3
  • titleBar.border#002d45
  • titleBar.inactiveBackground#001c2a
  • titleBar.inactiveForeground#407e9f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#407e9fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#0085cabold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#0085cabold
storage.type, storage.modifier#0085cabold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#fe5000
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#0085ca
string.regexp#fe5000
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#4e9a2f
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#8d7dacbold
variable.other.constant, variable.other.enummember#8d7dacbold
constant.character.escape#2697d2
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#6586b3italic
entity.name.type.parameter#6586b3italic
entity.name.function, meta.function entity.name.function#e8d4e2bold
meta.function-call entity.name.function, support.function#e8d4e2
meta.method-call entity.name.function, entity.name.function.member#e8d4e2
variable, variable.other, variable.other.readwrite#cbdbe3
variable.parameter#cbdbe3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#0085caitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#cbdbe3
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#0085cabold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#2697d2
punctuation, punctuation.separator, punctuation.terminator, meta.brace#407e9f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#6586b3italic
support.type.property-name.css, support.type.vendored.property-name.css#6586b3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad6ab3bold
support.constant.property-value.css, support.constant.color.css#8d7dac
keyword.other.unit.css#4e9a2f
support.type.property-name.json#6586b3
markup.heading, markup.heading entity.name, entity.name.section.markdown#0085cabold
markup.bold#8d7dacbold
markup.italic#6586b3italic
markup.inline.raw, markup.raw#fe5000
markup.underline.link#e8d4e2
markup.quote#407e9fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050