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#080d20
  • activityBar.border#0c122e
  • activityBar.foreground#1b2a6b
  • activityBar.inactiveForeground#3f475e
  • activityBarBadge.background#f5df4d
  • activityBarBadge.foreground#f1f1f2
  • badge.background#1b2a6b
  • badge.foreground#f1f1f2
  • breadcrumb.activeSelectionForeground#caccd2
  • breadcrumb.focusForeground#caccd2
  • breadcrumb.foreground#3f475e
  • button.background#1b2a6b
  • button.foreground#f1f1f2
  • button.hoverBackground#323f7a
  • button.secondaryBackground#090f25
  • button.secondaryForeground#caccd2
  • descriptionForeground#3f475e
  • dropdown.background#080d20
  • dropdown.border#0c122e
  • dropdown.foreground#caccd2
  • editor.background#070b1b
  • editor.findMatchBackground#00b14066
  • editor.findMatchHighlightBackground#00b14033
  • editor.foreground#caccd2
  • editor.inactiveSelectionBackground#1b2a6b26
  • editor.lineHighlightBackground#1b2a6b1a
  • editor.lineHighlightBorder#1b2a6b00
  • editor.selectionBackground#1b2a6b4d
  • editor.wordHighlightBackground#1b2a6b33
  • editorBracketMatch.background#1b2a6b40
  • editorBracketMatch.border#1b2a6b99
  • editorCursor.foreground#1b2a6b
  • editorError.foreground#dd4132
  • editorGroup.border#0c122e
  • editorGroupHeader.tabsBackground#080d20
  • editorGroupHeader.tabsBorder#0c122e
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#caccd233
  • editorIndentGuide.background#caccd214
  • editorInfo.foreground#f5df4d
  • editorLineNumber.activeForeground#caccd2
  • editorLineNumber.foreground#3f475e
  • editorRuler.foreground#caccd214
  • editorSuggestWidget.selectedBackground#1b2a6b40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#caccd21a
  • editorWidget.background#080d20
  • editorWidget.border#0c122e
  • focusBorder#1b2a6b99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#3f475e
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#3f475e
  • input.background#080d20
  • input.border#0c122e
  • input.foreground#caccd2
  • input.placeholderForeground#3f475e
  • inputOption.activeBorder#1b2a6b
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#f5df4d
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#1b2a6b4d
  • list.activeSelectionForeground#caccd2
  • list.focusBackground#1b2a6b33
  • list.highlightForeground#1b2a6b
  • list.hoverBackground#1b2a6b26
  • list.inactiveSelectionBackground#1b2a6b26
  • minimap.background#070b1b
  • minimap.findMatchHighlight#00b14099
  • minimap.selectionHighlight#1b2a6b66
  • notificationLink.foreground#1b2a6b
  • notifications.background#090f25
  • notifications.foreground#caccd2
  • panel.background#080d20
  • panel.border#0c122e
  • panelTitle.activeBorder#1b2a6b
  • panelTitle.activeForeground#caccd2
  • panelTitle.inactiveForeground#3f475e
  • peekView.border#1b2a6b
  • peekViewEditor.background#080d20
  • peekViewResult.background#090f25
  • peekViewTitle.background#080d20
  • progressBar.background#1b2a6b
  • scrollbar.shadow#03040b45
  • scrollbarSlider.activeBackground#caccd259
  • scrollbarSlider.background#caccd21f
  • scrollbarSlider.hoverBackground#caccd240
  • selection.background#1b2a6b4d
  • sideBar.background#090f25
  • sideBar.border#0c122e
  • sideBar.foreground#caccd2
  • sideBarSectionHeader.background#1b2a6b26
  • sideBarSectionHeader.foreground#caccd2
  • sideBarTitle.foreground#caccd2
  • statusBar.background#101940
  • statusBar.border#0c122e
  • statusBar.debuggingBackground#f5df4d
  • statusBar.debuggingForeground#f1f1f2
  • statusBar.foreground#767fa6
  • statusBar.noFolderBackground#080d20
  • statusBarItem.hoverBackground#1b2a6b4d
  • statusBarItem.remoteBackground#1b2a6b
  • statusBarItem.remoteForeground#f1f1f2
  • tab.activeBackground#070b1b
  • tab.activeBorder#1b2a6b
  • tab.activeBorderTop#1b2a6b00
  • tab.activeForeground#caccd2
  • tab.border#0c122e
  • tab.inactiveBackground#080d20
  • tab.inactiveForeground#3f475e
  • terminal.ansiBlack#070b1b
  • terminal.ansiBlue#153b76
  • terminal.ansiBrightBlack#3f475e
  • 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#caccd2
  • terminal.ansiYellow#efc050
  • terminal.background#080d20
  • terminal.foreground#caccd2
  • terminalCursor.foreground#1b2a6b
  • textLink.activeForeground#f7e468
  • textLink.foreground#f5df4d
  • titleBar.activeBackground#080d20
  • titleBar.activeForeground#caccd2
  • titleBar.border#0c122e
  • titleBar.inactiveBackground#080d20
  • titleBar.inactiveForeground#3f475e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#3f475eitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#747da5bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#747da5bold
storage.type, storage.modifier#747da5bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#f5df4d
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#747da5
string.regexp#f5df4d
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#00b140
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#278592bold
variable.other.constant, variable.other.enummember#278592bold
constant.character.escape#747ca5
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#caccd2
variable.parameter#caccd2italic
variable.language, variable.language.this, variable.language.self, variable.language.super#747da5italic
variable.other.property, variable.other.object.property, meta.object-literal.key#caccd2
entity.name.class, entity.name.type.class, support.class#b163a3bold italic
entity.other.inherited-class#b163a3italic
entity.name.tag, punctuation.definition.tag#747da5bold
entity.other.attribute-name#f7cac9italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#747ca5
punctuation, punctuation.separator, punctuation.terminator, meta.brace#3f475e
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#b163a3bold
support.constant.property-value.css, support.constant.color.css#278592
keyword.other.unit.css#00b140
support.type.property-name.json#9bb7d4
markup.heading, markup.heading entity.name, entity.name.section.markdown#747da5bold
markup.bold#278592bold
markup.italic#9bb7d4italic
markup.inline.raw, markup.raw#f5df4d
markup.underline.link#f7cac9
markup.quote#3f475eitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050