Postrboard
Publisher: Burke HollandThemes in package: 2
A VS Code theme in light and dark variants, inspired by the PostrBoard.com color palette — coral, azure, and sage with WCAG AA accessible contrast.
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#13141c
- activityBar.border#2a2d3d
- activityBar.foreground#e2e8f0
- activityBar.inactiveForeground#7c8da3
- activityBarBadge.background#4fb6e8
- activityBarBadge.foreground#ffffff
- badge.background#4fb6e8
- badge.foreground#ffffff
- banner.background#13141c
- banner.foreground#e2e8f0
- breadcrumb.activeSelectionForeground#e2e8f0
- breadcrumb.focusForeground#e2e8f0
- breadcrumb.foreground#7c8da3
- breadcrumbPicker.background#16171f
- button.background#4fb6e8
- button.foreground#ffffff
- button.hoverBackground#3a9fd4
- button.secondaryBackground#2a2d3d
- button.secondaryForeground#e2e8f0
- chat.requestBackground#1a2540
- chat.requestBubbleBackground#1a2540
- chat.requestBubbleHoverBackground#1e2d4d
- debugConsole.errorForeground#f87171
- debugConsole.infoForeground#4fb6e8
- debugConsole.warningForeground#fbbf24
- debugIcon.breakpointForeground#f87171
- debugIcon.startForeground#84cc16
- debugToolBar.background#16171f
- descriptionForeground#7c8da3
- diffEditor.border#2a2d3d
- diffEditor.insertedTextBackground#84cc1620
- diffEditor.removedTextBackground#f8717120
- dropdown.background#1e1f2b
- dropdown.border#363a4f
- dropdown.foreground#e2e8f0
- editor.background#1a1b26
- editor.findMatchBackground#fb8a4d50
- editor.findMatchHighlightBackground#fb923c30
- editor.foreground#e2e8f0
- editor.lineHighlightBackground#16171f20
- editor.lineHighlightBorder#2a2d3d60
- editor.rangeHighlightBackground#fbbf2415
- editor.selectionBackground#fb8a4d40
- editor.selectionHighlightBackground#fb923c30
- editor.wordHighlightBackground#fb8a4d30
- editor.wordHighlightStrongBackground#fb8a4d50
- editorBracketHighlight.foreground1#4fb6e8
- editorBracketHighlight.foreground2#fb8a4d
- editorBracketHighlight.foreground3#84cc16
- editorBracketHighlight.foreground4#4fb6e8
- editorBracketHighlight.foreground5#fb8a4d
- editorBracketHighlight.foreground6#84cc16
- editorBracketMatch.background#4fb6e830
- editorBracketMatch.border#4fb6e8
- editorCursor.foreground#4fb6e8
- editorGhostText.foreground#4e5668
- editorGroup.border#2a2d3d
- editorGroupHeader.tabsBackground#16171f
- editorGutter.addedBackground#84cc16
- editorGutter.deletedBackground#f87171
- editorGutter.modifiedBackground#4fb6e8
- editorHoverWidget.background#16171f
- editorHoverWidget.border#363a4f
- editorIndentGuide.activeBackground#4e5668
- editorIndentGuide.background#2a2d3d
- editorInlayHint.background#16171f
- editorInlayHint.foreground#7c8da3
- editorLightBulb.foreground#fbbf24
- editorLineNumber.activeForeground#94a3b8
- editorLineNumber.foreground#4e5668
- editorStickyScroll.background#16171f
- editorStickyScrollHover.background#1e1f2b
- editorSuggestWidget.background#16171f
- editorSuggestWidget.border#363a4f
- editorSuggestWidget.selectedBackground#fb8a4d30
- editorWidget.background#16171f
- editorWidget.border#363a4f
- errorForeground#f87171
- focusBorder#4fb6e8
- foreground#e2e8f0
- gitDecoration.addedResourceForeground#84cc16
- gitDecoration.conflictingResourceForeground#fbbf24
- gitDecoration.deletedResourceForeground#f87171
- gitDecoration.ignoredResourceForeground#4e5668
- gitDecoration.modifiedResourceForeground#4fb6e8
- gitDecoration.untrackedResourceForeground#a3e635
- input.background#1e1f2b
- input.border#363a4f
- input.foreground#e2e8f0
- input.placeholderForeground#4e5668
- inputOption.activeBackground#4fb6e840
- inputOption.activeBorder#4fb6e8
- inputValidation.errorBackground#450a0a
- inputValidation.errorBorder#f87171
- inputValidation.infoBackground#0c1e3a
- inputValidation.infoBorder#4fb6e8
- inputValidation.warningBackground#451a03
- inputValidation.warningBorder#fbbf24
- list.activeSelectionBackground#4fb6e840
- list.activeSelectionForeground#e2e8f0
- list.activeSelectionIconForeground#e2e8f0
- list.errorForeground#f87171
- list.focusBackground#4fb6e830
- list.focusForeground#e2e8f0
- list.highlightForeground#4fb6e8
- list.hoverBackground#1e1f2b
- list.hoverForeground#e2e8f0
- list.inactiveSelectionBackground#2a2d3d
- list.warningForeground#fbbf24
- merge.border#2a2d3d
- merge.currentContentBackground#4fb6e820
- merge.currentHeaderBackground#4fb6e840
- merge.incomingContentBackground#84cc1620
- merge.incomingHeaderBackground#84cc1640
- minimap.errorHighlight#f87171
- minimap.findMatchHighlight#fb8a4d50
- minimap.selectionHighlight#4fb6e840
- minimap.warningHighlight#fbbf24
- notification.background#16171f
- notification.foreground#e2e8f0
- notificationCenter.border#2a2d3d
- notificationLink.foreground#4fb6e8
- panel.background#16171f
- panel.border#2a2d3d
- panelTitle.activeBorder#4fb6e8
- panelTitle.activeForeground#e2e8f0
- panelTitle.inactiveForeground#7c8da3
- peekView.border#4fb6e8
- peekViewEditor.background#1e1f2b
- peekViewEditor.matchHighlightBackground#fb8a4d40
- peekViewResult.background#16171f
- peekViewResult.matchHighlightBackground#fb923c30
- peekViewResult.selectionBackground#4fb6e840
- peekViewTitle.background#13141c
- quickInput.background#16171f
- quickInputList.focusBackground#4fb6e830
- scrollbarSlider.activeBackground#4e566870
- scrollbarSlider.background#4e566830
- scrollbarSlider.hoverBackground#4e566850
- sideBar.background#16171f
- sideBar.border#2a2d3d
- sideBar.foreground#e2e8f0
- sideBarSectionHeader.background#13141c
- sideBarSectionHeader.foreground#e2e8f0
- sideBarTitle.foreground#e2e8f0
- statusBar.background#13141c
- statusBar.border#2a2d3d
- statusBar.debuggingBackground#fb8a4d
- statusBar.debuggingBorder#ea580c
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#e2e8f0
- statusBar.noFolderBackground#16171f
- statusBarItem.activeBackground#2a2d3d
- statusBarItem.hoverBackground#2a2d3d80
- statusBarItem.prominentBackground#38bdf812
- statusBarItem.prominentHoverBackground#38bdf820
- tab.activeBackground#1a1b26
- tab.activeBorder#1a1b26
- tab.activeBorderTop#4fb6e8
- tab.activeForeground#e2e8f0
- tab.border#2a2d3d
- tab.inactiveBackground#16171f
- tab.inactiveForeground#7c8da3
- terminal.ansiBlack#1e1f2b
- terminal.ansiBlue#4fb6e8
- terminal.ansiBrightBlack#7c8da3
- terminal.ansiBrightBlue#60a5fa
- terminal.ansiBrightCyan#67e8f9
- terminal.ansiBrightGreen#a3e635
- terminal.ansiBrightMagenta#d8b4fe
- terminal.ansiBrightRed#fca5a5
- terminal.ansiBrightWhite#f8fafc
- terminal.ansiBrightYellow#fde68a
- terminal.ansiCyan#22d3ee
- terminal.ansiGreen#84cc16
- terminal.ansiMagenta#c084fc
- terminal.ansiRed#f87171
- terminal.ansiWhite#e2e8f0
- terminal.ansiYellow#fbbf24
- terminal.background#16171f
- terminal.foreground#e2e8f0
- testing.iconErrored#f87171
- testing.iconFailed#f87171
- testing.iconPassed#84cc16
- testing.iconQueued#7c8da3
- testing.iconSkipped#4e5668
- titleBar.activeBackground#16171f
- titleBar.activeForeground#e2e8f0
- titleBar.border#2a2d3d
- titleBar.inactiveBackground#16171f
- titleBar.inactiveForeground#7c8da3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7c8da3 | italic |
| comment.block.preprocessor | #7c8da3 | |
| comment.documentation, comment.block.documentation | #84cc16 | — |
| keyword, storage | #4fb6e8 | — |
| keyword.operator | #7c8da3 | — |
| keyword.operator.new, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.expression.void, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of | #4fb6e8 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.control.as | #4fb6e8 | — |
| storage.type | #60a5fa | — |
| storage.modifier, storage.modifier.async | #4fb6e8 | — |
| entity.name.type, entity.other.inherited-class, support.class | #60a5fa | bold |
| entity.name.type.interface | #60a5fa | italic |
| entity.name.type.enum | #60a5fa | — |
| entity.name.type.type-parameter | #60a5fa | italic |
| entity.name.type.namespace, entity.name.type.module | #60a5fa | — |
| support.type | #60a5fa | — |
| entity.name.function, support.function | #fb8a4d | — |
| meta.function-call | #fb8a4d | — |
| variable, support.variable | #e2e8f0 | — |
| variable.other.property, variable.other.object.property | #e2e8f0 | — |
| variable.other.enummember | #fb923c | — |
| variable.language | #4fb6e8 | italic |
| constant.numeric, constant.character, constant | #fb923c | — |
| constant.language | #fb923c | — |
| support.constant | #fb923c | — |
| string | #84cc16 | — |
| string.template, string.quoted.template | #84cc16 | — |
| punctuation.definition.template-expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #4fb6e8 | — |
| constant.character.escape | #7c8da3 | — |
| string.regexp | #4fb6e8 | — |
| meta.decorator, punctuation.decorator | #fb8a4d | italic |
| meta.decorator entity.name.function | #fb8a4d | italic |
| punctuation | #7c8da3 | — |
| meta.object-literal.key | #4fb6e8 | — |
| support.type.property-name.json | #4fb6e8 | — |
| constant.language.json | #fb923c | — |
| entity.name.tag.yaml | #4fb6e8 | — |
| entity.name.tag | #4fb6e8 | — |
| support.class.component, support.class.component.jsx, support.class.component.tsx | #60a5fa | — |
| meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.jsx, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.tsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx | #4e5668 | — |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #fb8a4d | italic |
| constant.character.entity, punctuation.definition.entity | #fb923c | — |
| meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html | #7c8da3 | — |
| meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #60a5fa | — |
| meta.property-name, support.type.property-name, support.type.property-name.css | #4fb6e8 | — |
| meta.property-value, meta.property-value constant.other, support.constant.property-value, support.constant.property-value.css | #84cc16 | — |
| keyword.other.important | #4fb6e8 | bold |
| markup.heading | #fb8a4d | bold |
| markup.bold | #e2e8f0 | bold |
| markup.italic | #e2e8f0 | italic |
| markup.underline | — | underline |
| markup.inline.raw | #fb923c | — |
| markup.list | #4fb6e8 | — |
| markup.quote | #7c8da3 | italic |
| markup.link, meta.link | #4fb6e8 | — |
| markup.changed | #fbbf24 | — |
| markup.deleted | #f87171 | — |
| markup.inserted | #84cc16 | — |
| markup.error | #f87171 | — |
| markup.output, markup.raw | #7c8da3 | — |
| markup.prompt | #7c8da3 | — |
| markup.traceback | #f87171 | — |
| meta.diff.range, meta.diff.index, meta.separator | #7c8da3 | — |
| meta.diff.header.from-file | #f87171 | — |
| meta.diff.header.to-file | #84cc16 | — |
| invalid.illegal | #f87171 | — |
| entity.name.exception | #f87171 | — |
| entity.name.section | — | bold |
| constant.other.symbol | #fb923c | — |