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#131a1e
  • activityBar.border#1f2a30
  • activityBar.foreground#5b7b8d
  • activityBar.inactiveForeground#5b7b8d
  • activityBarBadge.background#ffbe98
  • activityBarBadge.foreground#f2f4f6
  • badge.background#5b7b8d
  • badge.foreground#0e1215
  • breadcrumb.activeSelectionForeground#d1dadf
  • breadcrumb.focusForeground#d1dadf
  • breadcrumb.foreground#5b7b8d
  • button.background#5b7b8d
  • button.foreground#0e1215
  • button.hoverBackground#6b8898
  • button.secondaryBackground#182025
  • button.secondaryForeground#d1dadf
  • descriptionForeground#5b7b8d
  • dropdown.background#131a1e
  • dropdown.border#1f2a30
  • dropdown.foreground#d1dadf
  • editor.background#0f1417
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#d1dadf
  • editor.inactiveSelectionBackground#5b7b8d26
  • editor.lineHighlightBackground#5b7b8d1a
  • editor.lineHighlightBorder#5b7b8d00
  • editor.selectionBackground#5b7b8d4d
  • editor.wordHighlightBackground#5b7b8d33
  • editorBracketMatch.background#5b7b8d40
  • editorBracketMatch.border#5b7b8d99
  • editorCursor.foreground#5b7b8d
  • editorError.foreground#dd4132
  • editorGroup.border#1f2a30
  • editorGroupHeader.tabsBackground#131a1e
  • editorGroupHeader.tabsBorder#1f2a30
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d1dadf33
  • editorIndentGuide.background#d1dadf14
  • editorInfo.foreground#ffbe98
  • editorLineNumber.activeForeground#d1dadf
  • editorLineNumber.foreground#5b7b8d
  • editorRuler.foreground#d1dadf14
  • editorSuggestWidget.selectedBackground#5b7b8d40
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d1dadf1a
  • editorWidget.background#131a1e
  • editorWidget.border#1f2a30
  • focusBorder#5b7b8d99
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#5b7b8d
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#5b7b8d
  • input.background#131a1e
  • input.border#1f2a30
  • input.foreground#d1dadf
  • input.placeholderForeground#5b7b8d
  • inputOption.activeBorder#5b7b8d
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ffbe98
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#5b7b8d4d
  • list.activeSelectionForeground#d1dadf
  • list.focusBackground#5b7b8d33
  • list.highlightForeground#5b7b8d
  • list.hoverBackground#5b7b8d26
  • list.inactiveSelectionBackground#5b7b8d26
  • minimap.background#0f1417
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#5b7b8d66
  • notificationLink.foreground#5b7b8d
  • notifications.background#182025
  • notifications.foreground#d1dadf
  • panel.background#131a1e
  • panel.border#1f2a30
  • panelTitle.activeBorder#5b7b8d
  • panelTitle.activeForeground#d1dadf
  • panelTitle.inactiveForeground#5b7b8d
  • peekView.border#5b7b8d
  • peekViewEditor.background#131a1e
  • peekViewResult.background#182025
  • peekViewTitle.background#131a1e
  • progressBar.background#5b7b8d
  • scrollbar.shadow#090c0e45
  • scrollbarSlider.activeBackground#d1dadf59
  • scrollbarSlider.background#d1dadf1f
  • scrollbarSlider.hoverBackground#d1dadf40
  • selection.background#5b7b8d4d
  • sideBar.background#182025
  • sideBar.border#1f2a30
  • sideBar.foreground#d1dadf
  • sideBarSectionHeader.background#5b7b8d26
  • sideBarSectionHeader.foreground#d1dadf
  • sideBarTitle.foreground#d1dadf
  • statusBar.background#374a55
  • statusBar.border#1f2a30
  • statusBar.debuggingBackground#ffbe98
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#9db0bb
  • statusBar.noFolderBackground#131a1e
  • statusBarItem.hoverBackground#5b7b8d4d
  • statusBarItem.remoteBackground#5b7b8d
  • statusBarItem.remoteForeground#0e1215
  • tab.activeBackground#0f1417
  • tab.activeBorder#5b7b8d
  • tab.activeBorderTop#5b7b8d00
  • tab.activeForeground#d1dadf
  • tab.border#1f2a30
  • tab.inactiveBackground#131a1e
  • tab.inactiveForeground#5b7b8d
  • terminal.ansiBlack#0f1417
  • terminal.ansiBlue#356487
  • terminal.ansiBrightBlack#5b7b8d
  • 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#d1dadf
  • terminal.ansiYellow#efc050
  • terminal.background#131a1e
  • terminal.foreground#d1dadf
  • terminalCursor.foreground#5b7b8d
  • textLink.activeForeground#ffc8a7
  • textLink.foreground#ffbe98
  • titleBar.activeBackground#131a1e
  • titleBar.activeForeground#d1dadf
  • titleBar.border#1f2a30
  • titleBar.inactiveBackground#131a1e
  • titleBar.inactiveForeground#5b7b8d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#5b7b8ditalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#688696bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#688696bold
storage.type, storage.modifier#688696bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#ffbe98
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#688696
string.regexp#ffbe98
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#748f9e
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#577fc4italic
entity.name.type.parameter#577fc4italic
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#d1dadf
variable.parameter#d1dadfitalic
variable.language, variable.language.this, variable.language.self, variable.language.super#688696italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d1dadf
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#688696bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#748f9e
punctuation, punctuation.separator, punctuation.terminator, meta.brace#5b7b8d
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#577fc4italic
support.type.property-name.css, support.type.vendored.property-name.css#577fc4
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#577fc4
markup.heading, markup.heading entity.name, entity.name.section.markdown#688696bold
markup.bold#8d7dacbold
markup.italic#577fc4italic
markup.inline.raw, markup.raw#ffbe98
markup.underline.link#e8d4e2
markup.quote#5b7b8ditalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050