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#1a2226
  • activityBar.border#2a363d
  • activityBar.foreground#7ba0b4
  • activityBar.inactiveForeground#658699
  • activityBarBadge.background#ffbe98
  • activityBarBadge.foreground#f2f4f6
  • badge.background#7ba0b4
  • badge.foreground#12181b
  • breadcrumb.activeSelectionForeground#d3dde2
  • breadcrumb.focusForeground#d3dde2
  • breadcrumb.foreground#658699
  • button.background#7ba0b4
  • button.foreground#12181b
  • button.hoverBackground#88aabc
  • button.secondaryBackground#202a2f
  • button.secondaryForeground#d3dde2
  • descriptionForeground#658699
  • dropdown.background#1a2226
  • dropdown.border#2a363d
  • dropdown.foreground#d3dde2
  • editor.background#141a1d
  • editor.findMatchBackground#4e9a2f66
  • editor.findMatchHighlightBackground#4e9a2f33
  • editor.foreground#d3dde2
  • editor.inactiveSelectionBackground#7ba0b426
  • editor.lineHighlightBackground#7ba0b41a
  • editor.lineHighlightBorder#7ba0b400
  • editor.selectionBackground#7ba0b44d
  • editor.wordHighlightBackground#7ba0b433
  • editorBracketMatch.background#7ba0b440
  • editorBracketMatch.border#7ba0b499
  • editorCursor.foreground#7ba0b4
  • editorError.foreground#dd4132
  • editorGroup.border#2a363d
  • editorGroupHeader.tabsBackground#1a2226
  • editorGroupHeader.tabsBorder#2a363d
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#d3dde233
  • editorIndentGuide.background#d3dde214
  • editorInfo.foreground#ffbe98
  • editorLineNumber.activeForeground#d3dde2
  • editorLineNumber.foreground#658699
  • editorRuler.foreground#d3dde214
  • editorSuggestWidget.selectedBackground#7ba0b440
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#d3dde21a
  • editorWidget.background#1a2226
  • editorWidget.border#2a363d
  • focusBorder#7ba0b499
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#658699
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#658699
  • input.background#1a2226
  • input.border#2a363d
  • input.foreground#d3dde2
  • input.placeholderForeground#658699
  • inputOption.activeBorder#7ba0b4
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ffbe98
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#7ba0b44d
  • list.activeSelectionForeground#d3dde2
  • list.focusBackground#7ba0b433
  • list.highlightForeground#7ba0b4
  • list.hoverBackground#7ba0b426
  • list.inactiveSelectionBackground#7ba0b426
  • minimap.background#141a1d
  • minimap.findMatchHighlight#4e9a2f99
  • minimap.selectionHighlight#7ba0b466
  • notificationLink.foreground#7ba0b4
  • notifications.background#202a2f
  • notifications.foreground#d3dde2
  • panel.background#1a2226
  • panel.border#2a363d
  • panelTitle.activeBorder#7ba0b4
  • panelTitle.activeForeground#d3dde2
  • panelTitle.inactiveForeground#658699
  • peekView.border#7ba0b4
  • peekViewEditor.background#1a2226
  • peekViewResult.background#202a2f
  • peekViewTitle.background#1a2226
  • progressBar.background#7ba0b4
  • scrollbar.shadow#0c101245
  • scrollbarSlider.activeBackground#d3dde259
  • scrollbarSlider.background#d3dde21f
  • scrollbarSlider.hoverBackground#d3dde240
  • selection.background#7ba0b44d
  • sideBar.background#202a2f
  • sideBar.border#2a363d
  • sideBar.foreground#d3dde2
  • sideBarSectionHeader.background#7ba0b426
  • sideBarSectionHeader.foreground#d3dde2
  • sideBarTitle.foreground#d3dde2
  • statusBar.background#4a606c
  • statusBar.border#2a363d
  • statusBar.debuggingBackground#ffbe98
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#b0c6d2
  • statusBar.noFolderBackground#1a2226
  • statusBarItem.hoverBackground#7ba0b44d
  • statusBarItem.remoteBackground#7ba0b4
  • statusBarItem.remoteForeground#12181b
  • tab.activeBackground#141a1d
  • tab.activeBorder#7ba0b4
  • tab.activeBorderTop#7ba0b400
  • tab.activeForeground#d3dde2
  • tab.border#2a363d
  • tab.inactiveBackground#1a2226
  • tab.inactiveForeground#658699
  • terminal.ansiBlack#141a1d
  • terminal.ansiBlue#45769b
  • terminal.ansiBrightBlack#658699
  • 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#d3dde2
  • terminal.ansiYellow#efc050
  • terminal.background#1a2226
  • terminal.foreground#d3dde2
  • terminalCursor.foreground#7ba0b4
  • textLink.activeForeground#ffc8a7
  • textLink.foreground#ffbe98
  • titleBar.activeBackground#1a2226
  • titleBar.activeForeground#d3dde2
  • titleBar.border#2a363d
  • titleBar.inactiveBackground#1a2226
  • titleBar.inactiveForeground#658699

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#658699italic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#7ba0b4bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#7ba0b4bold
storage.type, storage.modifier#7ba0b4bold
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#7ba0b4
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#8faebf
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#4d88e1italic
entity.name.type.parameter#4d88e1italic
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#d3dde2
variable.parameter#d3dde2italic
variable.language, variable.language.this, variable.language.self, variable.language.super#7ba0b4italic
variable.other.property, variable.other.object.property, meta.object-literal.key#d3dde2
entity.name.class, entity.name.type.class, support.class#ad6ab3bold italic
entity.other.inherited-class#ad6ab3italic
entity.name.tag, punctuation.definition.tag#7ba0b4bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#8faebf
punctuation, punctuation.separator, punctuation.terminator, meta.brace#658699
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4d88e1italic
support.type.property-name.css, support.type.vendored.property-name.css#4d88e1
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#4d88e1
markup.heading, markup.heading entity.name, entity.name.section.markdown#7ba0b4bold
markup.bold#8d7dacbold
markup.italic#4d88e1italic
markup.inline.raw, markup.raw#ffbe98
markup.underline.link#e8d4e2
markup.quote#658699italic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050