B150
Publisher: B150Themes in package: 2
A warm, earthy VS Code theme inspired by the B150 design system. Features creamy off-whites in light mode and refined darks with vivid accents.
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#000000
- activityBar.border#1a1a1a
- activityBar.foreground#ffffff
- activityBar.inactiveForeground#9d9d9d
- activityBarBadge.background#FA725A
- activityBarBadge.foreground#ffffff
- badge.background#FA725A
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#e0e0e0
- breadcrumb.background#121212
- breadcrumb.focusForeground#e0e0e0
- breadcrumb.foreground#666666
- breadcrumbPicker.background#1e1e1e
- button.background#ffffff
- button.foreground#000000
- button.hoverBackground#e0e0e0
- button.secondaryBackground#2a2a2a
- button.secondaryForeground#e0e0e0
- button.secondaryHoverBackground#333333
- diffEditor.insertedLineBackground#4bd39510
- diffEditor.insertedTextBackground#4bd39515
- diffEditor.removedLineBackground#f8717110
- diffEditor.removedTextBackground#f8717115
- dropdown.background#1e1e1e
- dropdown.border#333333
- dropdown.foreground#e0e0e0
- editor.background#121212
- editor.findMatchBackground#D4A52E44
- editor.findMatchBorder#D4A52E88
- editor.findMatchHighlightBackground#D4A52E22
- editor.foreground#e0e0e0
- editor.inactiveSelectionBackground#5c7cff1a
- editor.lineHighlightBackground#1e1e1e
- editor.lineHighlightBorder#1e1e1e00
- editor.selectionBackground#5c7cff33
- editor.selectionHighlightBackground#5c7cff22
- editor.wordHighlightBackground#5c7cff1a
- editor.wordHighlightStrongBackground#5c7cff26
- editorBracketMatch.background#5c7cff22
- editorBracketMatch.border#5c7cff66
- editorCursor.foreground#FA725A
- editorError.foreground#f87171
- editorGroup.border#2a2a2a
- editorGroupHeader.tabsBackground#0e0e0e
- editorGutter.background#121212
- editorHoverWidget.background#1e1e1e
- editorHoverWidget.border#333333
- editorIndentGuide.activeBackground#404040
- editorIndentGuide.background#2a2a2a
- editorInfo.foreground#5c7cff
- editorLineNumber.activeForeground#a0a0a0
- editorLineNumber.foreground#4a4a4a
- editorOverviewRuler.errorForeground#f87171
- editorOverviewRuler.infoForeground#5c7cff
- editorOverviewRuler.warningForeground#D4A52E
- editorRuler.foreground#2a2a2a
- editorSuggestWidget.background#1e1e1e
- editorSuggestWidget.border#333333
- editorSuggestWidget.highlightForeground#5c7cff
- editorSuggestWidget.selectedBackground#2a2a2a
- editorWarning.foreground#D4A52E
- editorWhitespace.foreground#333333
- editorWidget.background#1e1e1e
- editorWidget.border#333333
- focusBorder#5c7cff66
- gitDecoration.conflictingResourceForeground#D4A52E
- gitDecoration.deletedResourceForeground#f87171
- gitDecoration.ignoredResourceForeground#4a4a4a
- gitDecoration.modifiedResourceForeground#5c7cff
- gitDecoration.stageDeletedResourceForeground#f87171
- gitDecoration.stageModifiedResourceForeground#5c7cff
- gitDecoration.untrackedResourceForeground#4bd395
- input.background#1e1e1e
- input.border#333333
- input.foreground#e0e0e0
- input.placeholderForeground#666666
- inputOption.activeBackground#5c7cff33
- inputOption.activeBorder#5c7cff
- inputOption.activeForeground#ffffff
- list.activeSelectionBackground#2a2a2a
- list.activeSelectionForeground#ffffff
- list.errorForeground#f87171
- list.focusBackground#2a2a2a
- list.highlightForeground#5c7cff
- list.hoverBackground#1a1a1a
- list.inactiveSelectionBackground#1e1e1e
- list.inactiveSelectionForeground#e0e0e0
- list.warningForeground#D4A52E
- minimap.errorHighlight#f87171cc
- minimap.findMatchHighlight#D4A52E66
- minimap.selectionHighlight#5c7cff44
- minimap.warningHighlight#D4A52Ecc
- notifications.background#1e1e1e
- notifications.border#333333
- notifications.foreground#e0e0e0
- notificationsErrorIcon.foreground#f87171
- notificationsInfoIcon.foreground#5c7cff
- notificationsWarningIcon.foreground#D4A52E
- panel.background#0e0e0e
- panel.border#1a1a1a
- panelTitle.activeBorder#FA725A
- panelTitle.activeForeground#e0e0e0
- panelTitle.inactiveForeground#666666
- peekView.border#5c7cff44
- peekViewEditor.background#1a1a1a
- peekViewEditor.matchHighlightBackground#D4A52E33
- peekViewResult.background#0e0e0e
- peekViewResult.selectionBackground#2a2a2a
- peekViewTitle.background#1e1e1e
- peekViewTitleDescription.foreground#a0a0a0
- peekViewTitleLabel.foreground#e0e0e0
- progressBar.background#5c7cff
- quickInput.background#1e1e1e
- quickInput.foreground#e0e0e0
- quickInputList.focusBackground#2a2a2a
- quickInputTitle.background#1e1e1e
- scrollbar.shadow#00000044
- scrollbarSlider.activeBackground#ffffff35
- scrollbarSlider.background#ffffff15
- scrollbarSlider.hoverBackground#ffffff25
- selection.background#5c7cff44
- sideBar.background#0e0e0e
- sideBar.border#1a1a1a
- sideBar.foreground#cccccc
- sideBarSectionHeader.background#0e0e0e
- sideBarSectionHeader.border#1a1a1a
- sideBarSectionHeader.foreground#a0a0a0
- sideBarTitle.foreground#e0e0e0
- statusBar.background#000000
- statusBar.border#1a1a1a
- statusBar.debuggingBackground#FA725A
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#a0a0a0
- statusBar.noFolderBackground#121212
- statusBarItem.hoverBackground#1e1e1e
- statusBarItem.remoteBackground#5c7cff
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#1e1e1e
- tab.activeBorderTop#FA725A
- tab.activeForeground#e0e0e0
- tab.border#0e0e0e
- tab.hoverBackground#1a1a1a
- tab.inactiveBackground#0e0e0e
- tab.inactiveForeground#666666
- tab.unfocusedActiveBorderTop#FA725A44
- terminal.ansiBlack#1e1e1e
- terminal.ansiBlue#5c7cff
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#7d9aff
- terminal.ansiBrightCyan#8de4ef
- terminal.ansiBrightGreen#6de4b0
- terminal.ansiBrightMagenta#c4a8ff
- terminal.ansiBrightRed#ff8a70
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#e6c54d
- terminal.ansiCyan#67d4e2
- terminal.ansiGreen#4bd395
- terminal.ansiMagenta#a78bfa
- terminal.ansiRed#f87171
- terminal.ansiWhite#e0e0e0
- terminal.ansiYellow#D4A52E
- terminal.background#0e0e0e
- terminal.foreground#e0e0e0
- terminal.selectionBackground#5c7cff33
- terminalCursor.foreground#FA725A
- titleBar.activeBackground#000000
- titleBar.activeForeground#e0e0e0
- titleBar.border#1a1a1a
- titleBar.inactiveBackground#000000
- titleBar.inactiveForeground#666666
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #555555 | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier | #5c7cff | — |
| keyword.control.flow, keyword.control.return, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.conditional, keyword.control.loop | #5c7cff | — |
| string, string.quoted, string.template | #4bd395 | — |
| punctuation.definition.template-expression, string.template punctuation.definition.template-expression | #ff8a70 | — |
| constant.numeric, constant.numeric.decimal, constant.numeric.integer, constant.numeric.float, constant.numeric.hex | #ff8a70 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #ff8a70 | — |
| entity.name.function, meta.function-call, support.function | #a78bfa | — |
| variable.parameter, meta.parameters | #e0e0e0 | italic |
| variable, variable.other, variable.other.readwrite | #e0e0e0 | — |
| variable.other.property, variable.other.object.property, meta.object-literal.key | #cccccc | — |
| entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class | #D4A52E | — |
| meta.type.annotation, entity.name.type.alias | #D4A52E | — |
| entity.name.type.interface | #D4A52E | — |
| entity.name.type.enum | #D4A52E | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic | #94a3ad | — |
| punctuation, punctuation.definition.block, punctuation.definition.parameters, meta.brace | #808080 | — |
| entity.name.tag, support.class.component | #f87171 | — |
| entity.other.attribute-name | #D4A52E | italic |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #D4A52E | — |
| support.type.property-name.css | #5c7cff | — |
| support.constant.property-value.css, constant.other.color.rgb-value.hex.css, constant.numeric.css | #ff8a70 | — |
| entity.name.tag.css | #f87171 | — |
| support.function.css, support.constant.media.css | #a78bfa | — |
| string.regexp, constant.other.character-class.regexp | #67d4e2 | — |
| markup.heading, entity.name.section.markdown | #5c7cff | bold |
| markup.bold | #e0e0e0 | bold |
| markup.italic | #e0e0e0 | italic |
| markup.inline.raw, markup.fenced_code.block | #4bd395 | — |
| markup.underline.link | #a78bfa | — |
| support.type.property-name.json | #5c7cff | — |
| string.quoted.double.json | #4bd395 | — |
| entity.name.tag.yaml | #5c7cff | — |
| meta.decorator, meta.decorator punctuation.decorator | #D4A52E | — |
| variable.other.readwrite.alias, meta.import variable.other.readwrite | #e0e0e0 | — |
| string.quoted.module | #4bd395 | — |
| variable.language.this, variable.language.self, variable.language.super | #f87171 | italic |
| variable.other.constant, variable.other.enummember | #ff8a70 | — |
| support.constant, support.variable | #67d4e2 | — |
| constant.character.escape | #67d4e2 | — |