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#060b1d
  • activityBar.border#091230
  • activityBar.foreground#1b368c
  • activityBar.inactiveForeground#3f4a68
  • activityBarBadge.background#ffc72c
  • activityBarBadge.foreground#f1f1f2
  • badge.background#1b368c
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#cacdd4
  • breadcrumb.focusForeground#cacdd4
  • breadcrumb.foreground#3f4a68
  • button.background#1b368c
  • button.foreground#f1f1f2
  • button.hoverBackground#324a98
  • button.secondaryBackground#070e24
  • button.secondaryForeground#cacdd4
  • descriptionForeground#3f4a68
  • dropdown.background#060b1d
  • dropdown.border#091230
  • dropdown.foreground#cacdd4
  • editor.background#040916
  • editor.findMatchBackground#b163a366
  • editor.findMatchHighlightBackground#b163a333
  • editor.foreground#cacdd4
  • editor.inactiveSelectionBackground#1b368c26
  • editor.lineHighlightBackground#1b368c1a
  • editor.lineHighlightBorder#1b368c00
  • editor.selectionBackground#1b368c4d
  • editor.wordHighlightBackground#1b368c33
  • editorBracketMatch.background#1b368c40
  • editorBracketMatch.border#1b368c99
  • editorCursor.foreground#1b368c
  • editorError.foreground#dd4132
  • editorGroup.border#091230
  • editorGroupHeader.tabsBackground#060b1d
  • editorGroupHeader.tabsBorder#091230
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cacdd433
  • editorIndentGuide.background#cacdd414
  • editorInfo.foreground#ffc72c
  • editorLineNumber.activeForeground#cacdd4
  • editorLineNumber.foreground#3f4a68
  • editorRuler.foreground#cacdd414
  • editorSuggestWidget.selectedBackground#1b368c40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cacdd41a
  • editorWidget.background#060b1d
  • editorWidget.border#091230
  • focusBorder#1b368c99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#3f4a68
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#3f4a68
  • input.background#060b1d
  • input.border#091230
  • input.foreground#cacdd4
  • input.placeholderForeground#3f4a68
  • inputOption.activeBorder#1b368c
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ffc72c
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#1b368c4d
  • list.activeSelectionForeground#cacdd4
  • list.focusBackground#1b368c33
  • list.highlightForeground#1b368c
  • list.hoverBackground#1b368c26
  • list.inactiveSelectionBackground#1b368c26
  • minimap.background#040916
  • minimap.findMatchHighlight#b163a399
  • minimap.selectionHighlight#1b368c66
  • notificationLink.foreground#1b368c
  • notifications.background#070e24
  • notifications.foreground#cacdd4
  • panel.background#060b1d
  • panel.border#091230
  • panelTitle.activeBorder#1b368c
  • panelTitle.activeForeground#cacdd4
  • panelTitle.inactiveForeground#3f4a68
  • peekView.border#1b368c
  • peekViewEditor.background#060b1d
  • peekViewResult.background#070e24
  • peekViewTitle.background#060b1d
  • progressBar.background#1b368c
  • scrollbar.shadow#03050e45
  • scrollbarSlider.activeBackground#cacdd459
  • scrollbarSlider.background#cacdd41f
  • scrollbarSlider.hoverBackground#cacdd440
  • selection.background#1b368c4d
  • sideBar.background#070e24
  • sideBar.border#091230
  • sideBar.foreground#cacdd4
  • sideBarSectionHeader.background#1b368c26
  • sideBarSectionHeader.foreground#cacdd4
  • sideBarTitle.foreground#cacdd4
  • statusBar.background#102054
  • statusBar.border#091230
  • statusBar.debuggingBackground#ffc72c
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#7686ba
  • statusBar.noFolderBackground#060b1d
  • statusBarItem.hoverBackground#1b368c4d
  • statusBarItem.remoteBackground#1b368c
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#040916
  • tab.activeBorder#1b368c
  • tab.activeBorderTop#1b368c00
  • tab.activeForeground#cacdd4
  • tab.border#091230
  • tab.inactiveBackground#060b1d
  • tab.inactiveForeground#3f4a68
  • terminal.ansiBlack#040916
  • terminal.ansiBlue#154187
  • terminal.ansiBrightBlack#3f4a68
  • 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#cacdd4
  • terminal.ansiYellow#efc050
  • terminal.background#060b1d
  • terminal.foreground#cacdd4
  • terminalCursor.foreground#1b368c
  • textLink.activeForeground#ffcf4c
  • textLink.foreground#ffc72c
  • titleBar.activeBackground#060b1d
  • titleBar.activeForeground#cacdd4
  • titleBar.border#091230
  • titleBar.inactiveBackground#060b1d
  • titleBar.inactiveForeground#3f4a68

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#3f4a68italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#687bb3bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#687bb3bold
storage.type, storage.modifier#687bb3bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#ffc72c
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#687bb3
string.regexp#ffc72c
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#b163a3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#53b0aebold
variable.other.constant, variable.other.enummember#53b0aebold
constant.character.escape#687bb3
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#9bb7d4italic
entity.name.type.parameter#9bb7d4italic
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#cacdd4
variable.parameter#cacdd4italic
variable.language, variable.language.this, variable.language.self, variable.language.super#687bb3italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cacdd4
entity.name.class, entity.name.type.class, support.class#00b140bold italic
entity.other.inherited-class#00b140italic
entity.name.tag, punctuation.definition.tag#687bb3bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#687bb3
punctuation, punctuation.separator, punctuation.terminator, meta.brace#3f4a68
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#9bb7d4italic
support.type.property-name.css, support.type.vendored.property-name.css#9bb7d4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00b140bold
support.constant.property-value.css, support.constant.color.css#53b0ae
keyword.other.unit.css#b163a3
support.type.property-name.json#9bb7d4
markup.heading, markup.heading entity.name, entity.name.section.markdown#687bb3bold
markup.bold#53b0aebold
markup.italic#9bb7d4italic
markup.inline.raw, markup.raw#ffc72c
markup.underline.link#f7cac9
markup.quote#3f4a68italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050