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#00252a
  • activityBar.border#003d44
  • activityBar.foreground#00b2c9
  • activityBar.inactiveForeground#408c9f
  • activityBarBadge.background#ff8272
  • activityBarBadge.foreground#f2f4f6
  • badge.background#00b2c9
  • badge.foreground#001b1e
  • breadcrumb.activeSelectionForeground#cbdee3
  • breadcrumb.focusForeground#cbdee3
  • breadcrumb.foreground#408c9f
  • button.background#00b2c9
  • button.foreground#001b1e
  • button.hoverBackground#1abace
  • button.secondaryBackground#002e34
  • button.secondaryForeground#cbdee3
  • descriptionForeground#408c9f
  • dropdown.background#00252a
  • dropdown.border#003d44
  • dropdown.foreground#cbdee3
  • editor.background#001c20
  • editor.findMatchBackground#5c068c66
  • editor.findMatchHighlightBackground#5c068c33
  • editor.foreground#cbdee3
  • editor.inactiveSelectionBackground#00b2c926
  • editor.lineHighlightBackground#00b2c91a
  • editor.lineHighlightBorder#00b2c900
  • editor.selectionBackground#00b2c94d
  • editor.wordHighlightBackground#00b2c933
  • editorBracketMatch.background#00b2c940
  • editorBracketMatch.border#00b2c999
  • editorCursor.foreground#00b2c9
  • editorError.foreground#dd4132
  • editorGroup.border#003d44
  • editorGroupHeader.tabsBackground#00252a
  • editorGroupHeader.tabsBorder#003d44
  • editorGutter.addedBackground#88b04b
  • editorGutter.deletedBackground#dd4132
  • editorGutter.modifiedBackground#efc050
  • editorIndentGuide.activeBackground#cbdee333
  • editorIndentGuide.background#cbdee314
  • editorInfo.foreground#ff8272
  • editorLineNumber.activeForeground#cbdee3
  • editorLineNumber.foreground#408c9f
  • editorRuler.foreground#cbdee314
  • editorSuggestWidget.selectedBackground#00b2c940
  • editorWarning.foreground#efc050
  • editorWhitespace.foreground#cbdee31a
  • editorWidget.background#00252a
  • editorWidget.border#003d44
  • focusBorder#00b2c999
  • gitDecoration.addedResourceForeground#88b04b
  • gitDecoration.conflictingResourceForeground#ff6f61
  • gitDecoration.deletedResourceForeground#dd4132
  • gitDecoration.ignoredResourceForeground#408c9f
  • gitDecoration.modifiedResourceForeground#efc050
  • gitDecoration.untrackedResourceForeground#88b04b
  • icon.foreground#408c9f
  • input.background#00252a
  • input.border#003d44
  • input.foreground#cbdee3
  • input.placeholderForeground#408c9f
  • inputOption.activeBorder#00b2c9
  • inputValidation.errorBorder#dd4132
  • inputValidation.infoBorder#ff8272
  • inputValidation.warningBorder#efc050
  • list.activeSelectionBackground#00b2c94d
  • list.activeSelectionForeground#cbdee3
  • list.focusBackground#00b2c933
  • list.highlightForeground#00b2c9
  • list.hoverBackground#00b2c926
  • list.inactiveSelectionBackground#00b2c926
  • minimap.background#001c20
  • minimap.findMatchHighlight#5c068c99
  • minimap.selectionHighlight#00b2c966
  • notificationLink.foreground#00b2c9
  • notifications.background#002e34
  • notifications.foreground#cbdee3
  • panel.background#00252a
  • panel.border#003d44
  • panelTitle.activeBorder#00b2c9
  • panelTitle.activeForeground#cbdee3
  • panelTitle.inactiveForeground#408c9f
  • peekView.border#00b2c9
  • peekViewEditor.background#00252a
  • peekViewResult.background#002e34
  • peekViewTitle.background#00252a
  • progressBar.background#00b2c9
  • scrollbar.shadow#00121445
  • scrollbarSlider.activeBackground#cbdee359
  • scrollbarSlider.background#cbdee31f
  • scrollbarSlider.hoverBackground#cbdee340
  • selection.background#00b2c94d
  • sideBar.background#002e34
  • sideBar.border#003d44
  • sideBar.foreground#cbdee3
  • sideBarSectionHeader.background#00b2c926
  • sideBarSectionHeader.foreground#cbdee3
  • sideBarTitle.foreground#cbdee3
  • statusBar.background#006b79
  • statusBar.border#003d44
  • statusBar.debuggingBackground#ff8272
  • statusBar.debuggingForeground#f2f4f6
  • statusBar.foreground#66d1df
  • statusBar.noFolderBackground#00252a
  • statusBarItem.hoverBackground#00b2c94d
  • statusBarItem.remoteBackground#00b2c9
  • statusBarItem.remoteForeground#001b1e
  • tab.activeBackground#001c20
  • tab.activeBorder#00b2c9
  • tab.activeBorderTop#00b2c900
  • tab.activeForeground#cbdee3
  • tab.border#003d44
  • tab.inactiveBackground#00252a
  • tab.inactiveForeground#408c9f
  • terminal.ansiBlack#001c20
  • terminal.ansiBlue#087fa5
  • terminal.ansiBrightBlack#408c9f
  • 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#cbdee3
  • terminal.ansiYellow#efc050
  • terminal.background#00252a
  • terminal.foreground#cbdee3
  • terminalCursor.foreground#00b2c9
  • textLink.activeForeground#ff9587
  • textLink.foreground#ff8272
  • titleBar.activeBackground#00252a
  • titleBar.activeForeground#cbdee3
  • titleBar.border#003d44
  • titleBar.inactiveBackground#00252a
  • titleBar.inactiveForeground#408c9f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#408c9fitalic
keyword, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from#00b2c9bold
keyword.operator.new, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.logical, keyword.operator.delete#00b2c9bold
storage.type, storage.modifier#00b2c9bold
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.quoted.other#ff8272
string.interpolated, punctuation.definition.template-expression, punctuation.section.embedded#00b2c9
string.regexp#ff8272
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex#a474bf
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#7f87acbold
variable.other.constant, variable.other.enummember#7f87acbold
constant.character.escape#26bed1
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#4886b5italic
entity.name.type.parameter#4886b5italic
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#cbdee3
variable.parameter#cbdee3italic
variable.language, variable.language.this, variable.language.self, variable.language.super#00b2c9italic
variable.other.property, variable.other.object.property, meta.object-literal.key#cbdee3
entity.name.class, entity.name.type.class, support.class#4e9a2fbold italic
entity.other.inherited-class#4e9a2fitalic
entity.name.tag, punctuation.definition.tag#00b2c9bold
entity.other.attribute-name#e8d4e2italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.ternary#26bed1
punctuation, punctuation.separator, punctuation.terminator, meta.brace#408c9f
meta.decorator, meta.decorator entity.name.function, punctuation.decorator#4886b5italic
support.type.property-name.css, support.type.vendored.property-name.css#4886b5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4e9a2fbold
support.constant.property-value.css, support.constant.color.css#7f87ac
keyword.other.unit.css#a474bf
support.type.property-name.json#4886b5
markup.heading, markup.heading entity.name, entity.name.section.markdown#00b2c9bold
markup.bold#7f87acbold
markup.italic#4886b5italic
markup.inline.raw, markup.raw#ff8272
markup.underline.link#e8d4e2
markup.quote#408c9fitalic
markup.inserted#88b04b
markup.deleted#dd4132
markup.changed#efc050