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#051727
  • activityBar.border#062137
  • activityBar.foreground#0f4c81
  • activityBar.inactiveForeground#6b7f90
  • activityBarBadge.background#decdbe
  • activityBarBadge.foreground#f6f7f7
  • badge.background#0f4c81
  • badge.foreground#f6f7f7
  • breadcrumb.activeSelectionForeground#d8dce0
  • breadcrumb.focusForeground#d8dce0
  • breadcrumb.foreground#6b7f90
  • button.background#0f4c81
  • button.foreground#f6f7f7
  • button.hoverBackground#275e8e
  • button.secondaryBackground#051b2d
  • button.secondaryForeground#d8dce0
  • descriptionForeground#6b7f90
  • dropdown.background#051727
  • dropdown.border#062137
  • dropdown.foreground#d8dce0
  • editor.background#041320
  • editor.findMatchBackground#9e4fa566
  • editor.findMatchHighlightBackground#9e4fa533
  • editor.foreground#d8dce0
  • editor.inactiveSelectionBackground#0f4c8126
  • editor.lineHighlightBackground#0f4c811a
  • editor.lineHighlightBorder#0f4c8100
  • editor.selectionBackground#0f4c814d
  • editor.wordHighlightBackground#0f4c8133
  • editorBracketMatch.background#0f4c8140
  • editorBracketMatch.border#0f4c8199
  • editorCursor.foreground#0f4c81
  • editorError.foreground#dd4132
  • editorGroup.border#062137
  • editorGroupHeader.tabsBackground#051727
  • editorGroupHeader.tabsBorder#062137
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d8dce033
  • editorIndentGuide.background#d8dce014
  • editorInfo.foreground#decdbe
  • editorLineNumber.activeForeground#d8dce0
  • editorLineNumber.foreground#6b7f90
  • editorRuler.foreground#d8dce014
  • editorSuggestWidget.selectedBackground#0f4c8140
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d8dce01a
  • editorWidget.background#051727
  • editorWidget.border#062137
  • focusBorder#0f4c8199
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#6b7f90
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#6b7f90
  • input.background#051727
  • input.border#062137
  • input.foreground#d8dce0
  • input.placeholderForeground#6b7f90
  • inputOption.activeBorder#0f4c81
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#decdbe
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#0f4c814d
  • list.activeSelectionForeground#d8dce0
  • list.focusBackground#0f4c8133
  • list.highlightForeground#0f4c81
  • list.hoverBackground#0f4c8126
  • list.inactiveSelectionBackground#0f4c8126
  • minimap.background#041320
  • minimap.findMatchHighlight#9e4fa599
  • minimap.selectionHighlight#0f4c8166
  • notificationLink.foreground#0f4c81
  • notifications.background#051b2d
  • notifications.foreground#d8dce0
  • panel.background#051727
  • panel.border#062137
  • panelTitle.activeBorder#0f4c81
  • panelTitle.activeForeground#d8dce0
  • panelTitle.inactiveForeground#6b7f90
  • peekView.border#0f4c81
  • peekViewEditor.background#051727
  • peekViewResult.background#051b2d
  • peekViewTitle.background#051727
  • progressBar.background#0f4c81
  • scrollbar.shadow#01080d45
  • scrollbarSlider.activeBackground#d8dce059
  • scrollbarSlider.background#d8dce01f
  • scrollbarSlider.hoverBackground#d8dce040
  • selection.background#0f4c814d
  • sideBar.background#051b2d
  • sideBar.border#062137
  • sideBar.foreground#d8dce0
  • sideBarSectionHeader.background#0f4c8126
  • sideBarSectionHeader.foreground#d8dce0
  • sideBarTitle.foreground#d8dce0
  • statusBar.background#092e4d
  • statusBar.border#062137
  • statusBar.debuggingBackground#decdbe
  • statusBar.debuggingForeground#f6f7f7
  • statusBar.foreground#6f94b3
  • statusBar.noFolderBackground#051727
  • statusBarItem.hoverBackground#0f4c814d
  • statusBarItem.remoteBackground#0f4c81
  • statusBarItem.remoteForeground#f6f7f7
  • tab.activeBackground#041320
  • tab.activeBorder#0f4c81
  • tab.activeBorderTop#0f4c8100
  • tab.activeForeground#d8dce0
  • tab.border#062137
  • tab.inactiveBackground#051727
  • tab.inactiveForeground#6b7f90
  • terminal.ansiBlack#041320
  • terminal.ansiBlue#0f4c81
  • terminal.ansiBrightBlack#6b7f90
  • terminal.ansiBrightBlue#4b79a1
  • terminal.ansiBrightCyan#61c0b7
  • terminal.ansiBrightGreen#9abc66
  • terminal.ansiBrightMagenta#bd7ab1
  • terminal.ansiBrightRed#e25e51
  • terminal.ansiBrightWhite#f6f7f7
  • terminal.ansiBrightYellow#f1c96a
  • terminal.ansiCyan#45b5aa
  • terminal.ansiGreen#88b04b
  • terminal.ansiMagenta#b163a3
  • terminal.ansiRed#dd4132
  • terminal.ansiWhite#d8dce0
  • terminal.ansiYellow#efc050
  • terminal.background#051727
  • terminal.foreground#d8dce0
  • terminalCursor.foreground#0f4c81
  • textLink.activeForeground#e3d5c8
  • textLink.foreground#decdbe
  • titleBar.activeBackground#051727
  • titleBar.activeForeground#d8dce0
  • titleBar.border#062137
  • titleBar.inactiveBackground#051727
  • titleBar.inactiveForeground#6b7f90

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#6b7f90italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#6188acbold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#6188acbold
storage.type, storage.modifier#6188acbold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#decdbe
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#6188ac
string.regexp#decdbe
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#ad6ab3
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#009473bold
variable.other.constant, variable.other.enummember#009473bold
constant.character.escape#6088ac
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#b0d7e1italic
entity.name.type.parameter#b0d7e1italic
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#d8dce0
variable.parameter#d8dce0italic
variable.language, variable.language.this, variable.language.self, variable.language.super#6188acitalic
variable.other.property, variable.other.object.property, meta.object-literal.key#d8dce0
entity.name.class, entity.name.type.class, support.class#76ff7bbold italic
entity.other.inherited-class#76ff7bitalic
entity.name.tag, punctuation.definition.tag#6188acbold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#6088ac
punctuation, punctuation.separator, punctuation.terminator, meta.brace#6b7f90
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#b0d7e1italic
support.type.property-name.css, support.type.vendored.property-name.css#b0d7e1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#76ff7bbold
support.constant.property-value.css, support.constant.color.css#009473
keyword.other.unit.css#ad6ab3
support.type.property-name.json#b0d7e1
markup.heading, markup.heading entity.name, entity.name.section.markdown#6188acbold
markup.bold#009473bold
markup.italic#b0d7e1italic
markup.inline.raw, markup.raw#decdbe
markup.underline.link#e8d4e2
markup.quote#6b7f90italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050