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#e2e8f0
- activityBar.border#cbd5e1
- activityBar.foreground#111827
- activityBar.inactiveForeground#64748b
- activityBarBadge.background#0284c7
- activityBarBadge.foreground#ffffff
- badge.background#0284c7
- badge.foreground#ffffff
- banner.background#e2e8f0
- banner.foreground#111827
- breadcrumb.activeSelectionForeground#111827
- breadcrumb.focusForeground#111827
- breadcrumb.foreground#64748b
- breadcrumbPicker.background#f1f5f9
- button.background#0284c7
- button.foreground#ffffff
- button.hoverBackground#0369a1
- button.secondaryBackground#e2e8f0
- button.secondaryForeground#111827
- chat.requestBackground#bae6fd
- chat.requestBubbleBackground#bae6fd
- chat.requestBubbleHoverBackground#7dd3fc
- debugConsole.errorForeground#dc2626
- debugConsole.infoForeground#0284c7
- debugConsole.warningForeground#d97706
- debugIcon.breakpointForeground#dc2626
- debugIcon.startForeground#4d7c0f
- debugToolBar.background#f1f5f9
- descriptionForeground#64748b
- diffEditor.border#e2e8f0
- diffEditor.insertedTextBackground#d9f99d50
- diffEditor.removedTextBackground#fecaca50
- dropdown.background#ffffff
- dropdown.border#cbd5e1
- dropdown.foreground#111827
- editor.background#fafafa
- editor.findMatchBackground#fed7aa
- editor.findMatchHighlightBackground#fef3c7
- editor.foreground#111827
- editor.lineHighlightBackground#f1f5f920
- editor.lineHighlightBorder#e2e8f060
- editor.rangeHighlightBackground#fef3c720
- editor.selectionBackground#fed7aa60
- editor.selectionHighlightBackground#fef3c750
- editor.wordHighlightBackground#fed7aa40
- editor.wordHighlightStrongBackground#fed7aa60
- editorBracketHighlight.foreground1#0284c7
- editorBracketHighlight.foreground2#c2410c
- editorBracketHighlight.foreground3#4d7c0f
- editorBracketHighlight.foreground4#0284c7
- editorBracketHighlight.foreground5#c2410c
- editorBracketHighlight.foreground6#4d7c0f
- editorBracketMatch.background#bae6fd40
- editorBracketMatch.border#0284c7
- editorCursor.foreground#0284c7
- editorGhostText.foreground#94a3b8
- editorGroup.border#e2e8f0
- editorGroupHeader.tabsBackground#f1f5f9
- editorGutter.addedBackground#84cc16
- editorGutter.deletedBackground#dc2626
- editorGutter.modifiedBackground#0ea5e9
- editorHoverWidget.background#f1f5f9
- editorHoverWidget.border#cbd5e1
- editorIndentGuide.activeBackground#94a3b8
- editorIndentGuide.background#e2e8f0
- editorInlayHint.background#f1f5f9
- editorInlayHint.foreground#64748b
- editorLightBulb.foreground#d97706
- editorLineNumber.activeForeground#475569
- editorLineNumber.foreground#94a3b8
- editorStickyScroll.background#f1f5f9
- editorStickyScrollHover.background#e2e8f0
- editorSuggestWidget.background#f1f5f9
- editorSuggestWidget.border#cbd5e1
- editorSuggestWidget.selectedBackground#fed7aa50
- editorWidget.background#f1f5f9
- editorWidget.border#cbd5e1
- errorForeground#dc2626
- focusBorder#0284c7
- foreground#111827
- gitDecoration.addedResourceForeground#4d7c0f
- gitDecoration.conflictingResourceForeground#d97706
- gitDecoration.deletedResourceForeground#dc2626
- gitDecoration.ignoredResourceForeground#94a3b8
- gitDecoration.modifiedResourceForeground#0369a1
- gitDecoration.untrackedResourceForeground#84cc16
- input.background#ffffff
- input.border#cbd5e1
- input.foreground#111827
- input.placeholderForeground#94a3b8
- inputOption.activeBackground#bae6fd40
- inputOption.activeBorder#0284c7
- inputValidation.errorBackground#fef2f2
- inputValidation.errorBorder#dc2626
- inputValidation.infoBackground#f0f9ff
- inputValidation.infoBorder#0284c7
- inputValidation.warningBackground#fffbeb
- inputValidation.warningBorder#d97706
- list.activeSelectionBackground#bae6fd80
- list.activeSelectionForeground#111827
- list.activeSelectionIconForeground#111827
- list.errorForeground#dc2626
- list.focusBackground#bae6fd60
- list.focusForeground#111827
- list.highlightForeground#0284c7
- list.hoverBackground#f1f5f9
- list.hoverForeground#111827
- list.inactiveSelectionBackground#e2e8f0
- list.warningForeground#d97706
- merge.border#e2e8f0
- merge.currentContentBackground#bae6fd30
- merge.currentHeaderBackground#bae6fd60
- merge.incomingContentBackground#d9f99d30
- merge.incomingHeaderBackground#d9f99d60
- minimap.errorHighlight#dc2626
- minimap.findMatchHighlight#fed7aa
- minimap.selectionHighlight#bae6fd80
- minimap.warningHighlight#d97706
- notification.background#f1f5f9
- notification.foreground#111827
- notificationCenter.border#e2e8f0
- notificationLink.foreground#0284c7
- panel.background#f1f5f9
- panel.border#e2e8f0
- panelTitle.activeBorder#0284c7
- panelTitle.activeForeground#111827
- panelTitle.inactiveForeground#64748b
- peekView.border#0284c7
- peekViewEditor.background#f8fafc
- peekViewEditor.matchHighlightBackground#fed7aa
- peekViewResult.background#f1f5f9
- peekViewResult.matchHighlightBackground#fef3c7
- peekViewResult.selectionBackground#bae6fd60
- peekViewTitle.background#e2e8f0
- quickInput.background#f1f5f9
- quickInputList.focusBackground#bae6fd50
- scrollbarSlider.activeBackground#94a3b870
- scrollbarSlider.background#94a3b830
- scrollbarSlider.hoverBackground#94a3b850
- sideBar.background#f1f5f9
- sideBar.border#e2e8f0
- sideBar.foreground#111827
- sideBarSectionHeader.background#e2e8f0
- sideBarSectionHeader.foreground#111827
- sideBarTitle.foreground#111827
- statusBar.background#e2e8f0
- statusBar.border#cbd5e1
- statusBar.debuggingBackground#ff7f50
- statusBar.debuggingBorder#ea580c
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#111827
- statusBar.noFolderBackground#f1f5f9
- statusBarItem.activeBackground#cbd5e1
- statusBarItem.hoverBackground#cbd5e180
- statusBarItem.prominentBackground#0284c710
- statusBarItem.prominentHoverBackground#0284c71a
- tab.activeBackground#fafafa
- tab.activeBorder#fafafa
- tab.activeBorderTop#0284c7
- tab.activeForeground#111827
- tab.border#e2e8f0
- tab.inactiveBackground#f1f5f9
- tab.inactiveForeground#64748b
- terminal.ansiBlack#1e293b
- terminal.ansiBlue#0369a1
- terminal.ansiBrightBlack#64748b
- terminal.ansiBrightBlue#0ea5e9
- terminal.ansiBrightCyan#22d3ee
- terminal.ansiBrightGreen#84cc16
- terminal.ansiBrightMagenta#a855f7
- terminal.ansiBrightRed#ef4444
- terminal.ansiBrightWhite#f8fafc
- terminal.ansiBrightYellow#f59e0b
- terminal.ansiCyan#0284c7
- terminal.ansiGreen#4d7c0f
- terminal.ansiMagenta#9333ea
- terminal.ansiRed#dc2626
- terminal.ansiWhite#e2e8f0
- terminal.ansiYellow#d97706
- terminal.background#f1f5f9
- terminal.foreground#111827
- testing.iconErrored#dc2626
- testing.iconFailed#dc2626
- testing.iconPassed#4d7c0f
- testing.iconQueued#64748b
- testing.iconSkipped#94a3b8
- titleBar.activeBackground#f1f5f9
- titleBar.activeForeground#111827
- titleBar.border#e2e8f0
- titleBar.inactiveBackground#f1f5f9
- titleBar.inactiveForeground#64748b
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #64748b | italic |
| comment.block.preprocessor | #64748b | |
| comment.documentation, comment.block.documentation | #4d7c0f | — |
| keyword, storage | #0369a1 | — |
| keyword.operator | #64748b | — |
| 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 | #0369a1 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, keyword.control.as | #0369a1 | — |
| storage.type | #0c4a6e | — |
| storage.modifier, storage.modifier.async | #0369a1 | — |
| entity.name.type, entity.other.inherited-class, support.class | #0c4a6e | bold |
| entity.name.type.interface | #0c4a6e | italic |
| entity.name.type.enum | #0c4a6e | — |
| entity.name.type.type-parameter | #0c4a6e | italic |
| entity.name.type.namespace, entity.name.type.module | #0c4a6e | — |
| support.type | #0c4a6e | — |
| entity.name.function, support.function | #c2410c | — |
| meta.function-call | #c2410c | — |
| variable, support.variable | #111827 | — |
| variable.other.property, variable.other.object.property | #111827 | — |
| variable.other.enummember | #9a3412 | — |
| variable.language | #0369a1 | italic |
| constant.numeric, constant.character, constant | #9a3412 | — |
| constant.language | #9a3412 | — |
| support.constant | #9a3412 | — |
| string | #4d7c0f | — |
| string.template, string.quoted.template | #4d7c0f | — |
| punctuation.definition.template-expression, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end | #0369a1 | — |
| constant.character.escape | #64748b | — |
| string.regexp | #0369a1 | — |
| meta.decorator, punctuation.decorator | #c2410c | italic |
| meta.decorator entity.name.function | #c2410c | italic |
| punctuation | #64748b | — |
| meta.object-literal.key | #0369a1 | — |
| support.type.property-name.json | #0369a1 | — |
| constant.language.json | #9a3412 | — |
| entity.name.tag.yaml | #0369a1 | — |
| entity.name.tag | #0369a1 | — |
| support.class.component, support.class.component.jsx, support.class.component.tsx | #0c4a6e | — |
| 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 | #94a3b8 | — |
| entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx | #c2410c | italic |
| constant.character.entity, punctuation.definition.entity | #9a3412 | — |
| meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html | #64748b | — |
| 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 | #0c4a6e | — |
| meta.property-name, support.type.property-name, support.type.property-name.css | #0369a1 | — |
| meta.property-value, meta.property-value constant.other, support.constant.property-value, support.constant.property-value.css | #4d7c0f | — |
| keyword.other.important | #0369a1 | bold |
| markup.heading | #c2410c | bold |
| markup.bold | #111827 | bold |
| markup.italic | #111827 | italic |
| markup.underline | — | underline |
| markup.inline.raw | #9a3412 | — |
| markup.list | #0369a1 | — |
| markup.quote | #64748b | italic |
| markup.link, meta.link | #0284c7 | — |
| markup.changed | #d97706 | — |
| markup.deleted | #dc2626 | — |
| markup.inserted | #4d7c0f | — |
| markup.error | #dc2626 | — |
| markup.output, markup.raw | #64748b | — |
| markup.prompt | #64748b | — |
| markup.traceback | #dc2626 | — |
| meta.diff.range, meta.diff.index, meta.separator | #64748b | — |
| meta.diff.header.from-file | #dc2626 | — |
| meta.diff.header.to-file | #4d7c0f | — |
| invalid.illegal | #dc2626 | — |
| entity.name.exception | #dc2626 | — |
| entity.name.section | — | bold |
| constant.other.symbol | #9a3412 | — |