BBBThemes
Publisher: cmjchrisjonesThemes in package: 10
A selection of themes with a twist for BaldBeardedBuilder on Twitch!
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#222223
- activityBar.border#222223
- activityBar.foreground#e6e6e6
- activityBarBadge.background#19f9d8
- activityBarBadge.foreground#242526
- badge.background#6fc1ff
- badge.foreground#676b79
- button.background#292a2b
- button.foreground#292a2b
- button.hoverBackground#292a2b
- debugToolBar.background#292a2b
- diffEditor.insertedTextBackground#292a2b66
- diffEditor.removedTextBackground#292a2b
- editor.background#292a2b
- editor.findMatchBackground#292a2b
- editor.findMatchHighlightBackground#292a2b
- editor.findRangeHighlightBackground#292a2b
- editor.foreground#e6e6e6
- editor.inactiveSelectionBackground#292a2b
- editor.lineHighlightBackground#292a2b
- editor.selectionBackground#292a2b
- editor.selectionHighlightBackground#292a2b
- editor.wordHighlightBackground#292a2b
- editor.wordHighlightStrongBackground#292a2b
- editorBracketMatch.border#292a2b
- editorCodeLens.foreground#292a2b
- editorCursor.background#292a2b
- editorCursor.foreground#292a2b
- editorError.border#ff4b82
- editorError.foreground#ff4b82
- editorGroupHeader.noTabsBackground#292a2b
- editorGroupHeader.tabsBackground#292a2b
- editorGutter.addedBackground#292a2b
- editorGutter.deletedBackground#ff4b82
- editorGutter.modifiedBackground#ffcc95
- editorHoverWidget.background#31353a
- editorOverviewRuler.addedForeground#292a2b
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#ff4b82
- editorOverviewRuler.errorForeground#ff4b82
- editorOverviewRuler.findMatchForeground#292a2b
- editorOverviewRuler.infoForeground#6fc1ff
- editorOverviewRuler.modifiedForeground#ffcc95
- editorOverviewRuler.warningForeground#ffcc95
- editorRuler.foreground#b084eb60
- editorSuggestWidget.selectedBackground#292a2b99
- editorWarning.border#ffcc95
- editorWarning.foreground#ffcc95
- editorWhitespace.foreground#292a2b
- editorWidget.background#292a2b
- editorWidget.border#292a2b
- errorForeground#ff4b82
- extensionButton.prominentBackground#45a9f9
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#676b79
- foreground#e6e6e6
- input.background#3c3c3c
- input.foreground#e6e6e6
- input.placeholderForeground#e6e6e680
- inputOption.activeBackground#0e639c66
- inputOption.activeBorder#007acc00
- inputValidation.errorBackground#5a1d1d
- inputValidation.errorBorder#be1100
- inputValidation.infoBackground#063b49
- inputValidation.infoBorder#007acc
- inputValidation.warningBackground#352a05
- inputValidation.warningBorder#b89500
- list.activeSelectionBackground#292a2b
- list.activeSelectionForeground#fff
- list.focusBackground#292a2b
- list.focusForeground#19F9D8
- list.highlightForeground#6fc1ff
- list.hoverBackground#292a2b
- list.hoverForeground#cdcdcd
- list.inactiveSelectionBackground#292a2b
- list.inactiveSelectionForeground#CCA700
- menu.background#3c3c3c
- menu.foreground#f0f0f0
- menu.selectionBackground#292a2b
- menu.selectionForeground#19f9d8
- menu.separatorBackground#bbbbbb
- menubar.selectionBackground#ffffff1a
- menubar.selectionForeground#e6e6e6
- merge.currentContentBackground#b084eb40
- merge.currentHeaderBackground#b084eb90
- merge.incomingContentBackground#ffb86c40
- merge.incomingHeaderBackground#45a9f990
- minimap.errorHighlight#292a2b
- minimap.findMatchHighlight#292a2b
- minimap.selectionHighlight#292a2b
- minimap.warningHighlight#292a2b
- minimapGutter.addedBackground#292a2b
- minimapGutter.deletedBackground#292a2b
- minimapGutter.modifiedBackground#292a2b
- notificationCenterHeader.background#37393b
- notificationLink.foreground#292a2b
- notifications.background#292a2b
- notifications.border#292a2b
- notifications.foreground#292a2b
- notificationsErrorIcon.foreground#292a2b
- notificationsInfoIcon.foreground#292a2b
- notificationsWarningIcon.foreground#292a2b
- progressBar.background#b084eb
- quickInput.background#242526
- quickInput.foreground#bbbbbb
- scrollbar.shadow#222223
- scrollbarSlider.activeBackground#292a2b
- scrollbarSlider.background#292a2b
- scrollbarSlider.hoverBackground#292a2b
- searchEditor.findMatchBackground#292a2b
- settings.textInputBackground#292a2b
- sideBar.background#292a2b
- sideBar.border#292a2b
- sideBar.foreground#bbbbbb
- statusBar.background#222223
- statusBar.debuggingBackground#b084eb
- statusBar.debuggingForeground#e6e6e6
- statusBar.foreground#e6e6e6
- statusBar.noFolderBackground#292a2b
- statusBar.noFolderForeground#e6e6e6
- tab.activeBackground#292a2b
- tab.activeBorder#292a2b
- tab.activeForeground#e6e6e6
- tab.border#292a2b
- tab.inactiveBackground#292a2b
- tab.inactiveForeground#e6e6e6
- terminal.ansiBlue#45a9f9
- terminal.ansiBrightBlack#757575
- terminal.ansiBrightBlue#6fc1ff
- terminal.ansiBrightCyan#bcaafe
- terminal.ansiBrightGreen#292a2b
- terminal.ansiBrightMagenta#ff9ac1
- terminal.ansiBrightRed#ff2c6d
- terminal.ansiBrightWhite#e6e6e6
- terminal.ansiBrightYellow#ffcc95
- terminal.ansiCyan#b084eb
- terminal.ansiGreen#292a2b
- terminal.ansiMagenta#ff75b5
- terminal.ansiRed#ff2c6d
- terminal.ansiWhite#cdcdcd
- terminal.ansiYellow#ffb86c
- terminalCursor.background#292a2b
- terminalCursor.foreground#292a2b
- titleBar.activeBackground#292a2b
- titleBar.activeForeground#e6e6e6
- titleBar.inactiveBackground#292a2b
- titleBar.inactiveForeground#e6e6e6
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #676B79 | italic |
| keyword | #FF75B5 | — |
| keyword.control, keyword.operator.new | #FF75B5 | — |
| keyword.operator | #E6E6E6 | — |
| keyword.operator.logical, keyword.operator.comparison | #FFCC95 | — |
| storage | #FFB86C | — |
| constant | #FFB86C | — |
| constant.character.escape | #45A9F9 | — |
| variable | #E6E6E6 | — |
| variable.parameter | #BBBBBB | — |
| meta.object-binding-pattern-variable.js variable | #FFCC95 | — |
| variable.other.constant, variable.language.this, variable.interpolation | #FF9AC1 | — |
| variable.other.object | #FF9AC1 | — |
| variable.other.property | #E6E6E6 | — |
| invalid.illegal | — | — |
| invalid.deprecated | — | — |
| string | #19f9d8 | — |
| punctuation.definition.template-expression | #FFCC95 | — |
| support | #FFCC95 | — |
| support.class | #FFCC95 | — |
| support.type.object.module.js | #B084EB | — |
| support.function | #6FC1FF | — |
| entity.name.function | #6FC1FF | — |
| entity.other.inherited-class | #FF9AC1 | — |
| entity.name.tag.yaml | #FFCC95 | — |
| meta.decorator punctuation.decorator | #FFB86C | — |
| meta.decorator variable | #6FC1FF | — |
| keyword.other.special-method | #45A9F9 | — |
| keyword.control.at-rule | #B084EB | — |
| keyword.other.important | #FF4B82 | — |
| variable.interpolation | #FF75B5 | — |
| meta.source.handlebars entity.name.tag | #6FC1FF | — |
| punctuation.definition.expression, punctuation.definition.subexpression, punctuation.definition.block.unescaped, punctuation.definition.tag | #FFCC95 | italic |
| entity.name.function.expression | #FF75B5 | — |
| entity.unescaped.expression | #B084EB | — |
| constant.other.symbol | #4097ee | — |
| entity.expression variable.parameter.name | #FFB86C | — |
| entity.expression variable.parameter.value | #6FC1FF | — |
| entity.expression support.function.builtin | #FF9AC1 | — |
| entity.name.tag.html | #FFCC95 | — |
| entity.other.attribute-name.handlebars | #FFCC95 | — |
| support.class.component | #FF75B5 | italic |
| meta.tag.js entity.name.tag | #FFCC95 | — |
| entity.other.attribute-name | #FFB86C | — |
| markup.bold | #FFB86C | — |
| punctuation.definition.bold.markdown | #FFCC95 | — |
| markup.changed | #FF75B5 | — |
| markup.deleted | #FF2C6D | — |
| markup.italic | #FF9AC1 | italic |
| punctuation.definition.italic.markdown | #FF75B5 | italic |
| markup.inserted | #292a2b | — |
| punctuation.definition.heading | #292a2b | — |
| entity.name.section.markdown | #BBBBBB | — |
| markup.quote | #FFB86C | — |
| markup.inline.raw | #292a2b | italic |
| beginning.punctuation.definition.list | #FF75B5 | — |
| markup.fenced_code.block.markdown punctuation.definition.markdown | #757575 | — |
| fenced_code.block.language | #BBBBBB | italic |
| string.other.link | #BBBBBB | normal |
| meta.link.inline.markdown | #45A9F9 | italic |
| text.html.markdown punctuation.definition.string | #FFCC95 | — |
| entity.name.type.class.js | #6FC1FF | — |
| keyword.control.as.js | #FF9AC1 | — |
| keyword.control.from.js.jsx | #FF9AC1 | — |
| keyword.control.export.js | #B084EB | — |
| entity.name.tag.js.jsx, support.class.component.js.jsx | #FF2C6D | — |
| variable.language.super.js.jsx | #45A9F9 | — |
| meta.tag.structure.any.html, meta.tag.other.html, entity.name.tag.html, meta.tag.metadata.script.html, entity.name.tag.jade | #FF2C6D | — |
| entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html | #FF2C6D | — |
| entity.name.tag.css | #FF2C6D | — |
| support.type.property-name.css | #E6E6E6 | — |
| variable.scss | #FF9AC1 | — |
| entity.name.tag.reference.scss | #FF2C6D | — |
| keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css | #FFB86C | — |
| string.regexp | #6FC1FF | — |
| string.regexp keyword, string.regexp keyword.control | #FF75B5 | normal |
| string.regexp keyword.operator | #FF9AC1 | — |
| comment.block.documentation | — | normal |
| entity.name.type.instance.jsdoc punctuation.definition | #FFCC95 | italic |
| entity.name.type.instance.jsdoc | #CDCDCD | italic |
| comment.block storage | #FFCC95 | — |
| comment.block storage.custom, variable.other.jsdoc, variable.other.jsdoc punctuation.definition.string | #FF9AC1 | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...