Utilitybend Creme
Publisher: Brecht De RuyteThemes in package: 1
A warm creme light theme based on the utilitybend.com Prism palette.
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#eae3d2
- activityBar.border#d8cfbc
- activityBar.foreground#222222
- activityBar.inactiveForeground#8a7e66
- activityBarBadge.background#eb007d
- activityBarBadge.foreground#ffffff
- badge.background#bc0376
- badge.foreground#ffffff
- button.background#bc0376
- button.foreground#ffffff
- button.hoverBackground#a00263
- button.secondaryBackground#e5dcc5
- button.secondaryForeground#222222
- debugIcon.breakpointForeground#eb007d
- debugToolBar.background#eae3d2
- descriptionForeground#6b6355
- diffEditor.insertedTextBackground#5d8a1c1a
- diffEditor.removedTextBackground#d8373718
- dropdown.background#f6f3ec
- dropdown.border#c5ba9f
- dropdown.foreground#222222
- editor.background#f6f3ec
- editor.findMatchBackground#a24c0544
- editor.findMatchHighlightBackground#a24c0522
- editor.foreground#222222
- editor.inactiveSelectionBackground#bc03761a
- editor.lineHighlightBackground#0000000a
- editor.lineHighlightBorder#00000000
- editor.selectionBackground#bc037633
- editor.selectionHighlightBackground#bc037622
- editor.wordHighlightBackground#05618f22
- editor.wordHighlightStrongBackground#05618f33
- editorBracketHighlight.foreground1#7b5296
- editorBracketHighlight.foreground2#05618f
- editorBracketHighlight.foreground3#a24c05
- editorBracketHighlight.foreground4#eb007d
- editorBracketHighlight.foreground5#f93d04
- editorBracketHighlight.foreground6#5d8a1c
- editorBracketMatch.background#7b529622
- editorBracketMatch.border#7b529666
- editorCursor.foreground#bc0376
- editorError.foreground#d83737
- editorGutter.addedBackground#5d8a1c
- editorGutter.deletedBackground#d83737
- editorGutter.modifiedBackground#05618f
- editorHoverWidget.background#f6f3ec
- editorHoverWidget.border#c5ba9f
- editorIndentGuide.activeBackground#00000025
- editorIndentGuide.background#00000010
- editorInfo.foreground#05618f
- editorLineNumber.activeForeground#6b6355
- editorLineNumber.foreground#a39a85
- editorOverviewRuler.addedForeground#5d8a1c
- editorOverviewRuler.deletedForeground#d83737
- editorOverviewRuler.modifiedForeground#05618f
- editorSuggestWidget.background#f6f3ec
- editorSuggestWidget.foreground#222222
- editorSuggestWidget.highlightForeground#bc0376
- editorSuggestWidget.selectedBackground#bc037622
- editorWarning.foreground#a24c05
- editorWhitespace.foreground#00000015
- editorWidget.background#f6f3ec
- editorWidget.border#c5ba9f
- editorWidget.foreground#222222
- focusBorder#bc037666
- foreground#222222
- gitDecoration.addedResourceForeground#5d8a1c
- gitDecoration.conflictingResourceForeground#f93d04
- gitDecoration.deletedResourceForeground#d83737
- gitDecoration.ignoredResourceForeground#a39a85
- gitDecoration.modifiedResourceForeground#05618f
- gitDecoration.untrackedResourceForeground#5d8a1caa
- icon.foreground#6b6355
- input.background#f6f3ec
- input.border#c5ba9f
- input.foreground#222222
- input.placeholderForeground#8a7e66
- inputOption.activeBorder#bc0376
- list.activeSelectionBackground#bc037622
- list.activeSelectionForeground#222222
- list.focusOutline#bc037666
- list.highlightForeground#bc0376
- list.hoverBackground#0000000a
- list.inactiveSelectionBackground#bc037615
- minimap.findMatchHighlight#a24c0544
- minimap.selectionHighlight#bc037644
- minimapGutter.addedBackground#5d8a1c
- minimapGutter.deletedBackground#d83737
- minimapGutter.modifiedBackground#05618f
- notificationCenterHeader.background#eae3d2
- notifications.background#f6f3ec
- notifications.border#c5ba9f
- notifications.foreground#222222
- panel.background#ede7d9
- panel.border#d8cfbc
- panelTitle.activeBorder#bc0376
- panelTitle.activeForeground#222222
- panelTitle.inactiveForeground#8a7e66
- peekView.border#bc0376
- peekViewEditor.background#efeadd
- peekViewEditor.matchHighlightBackground#a24c0533
- peekViewResult.background#eae3d2
- peekViewResult.fileForeground#222222
- peekViewResult.lineForeground#6b6355
- peekViewResult.matchHighlightBackground#a24c0533
- peekViewResult.selectionBackground#bc037622
- peekViewTitle.background#eae3d2
- peekViewTitleDescription.foreground#6b6355
- peekViewTitleLabel.foreground#222222
- quickInput.background#f6f3ec
- quickInput.foreground#222222
- quickInputList.focusBackground#bc037622
- scrollbar.shadow#00000022
- scrollbarSlider.activeBackground#00000038
- scrollbarSlider.background#00000018
- scrollbarSlider.hoverBackground#00000028
- selection.background#bc037644
- sideBar.background#efeadd
- sideBar.border#d8cfbc
- sideBar.foreground#3a332a
- sideBarSectionHeader.background#e5dcc5
- sideBarSectionHeader.foreground#222222
- sideBarTitle.foreground#222222
- statusBar.background#eae3d2
- statusBar.border#d8cfbc
- statusBar.debuggingBackground#eb007d
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#3a332a
- statusBar.noFolderBackground#f6f3ec
- tab.activeBackground#f6f3ec
- tab.activeBorderTop#bc0376
- tab.activeForeground#222222
- tab.border#d8cfbc
- tab.inactiveBackground#eae3d2
- tab.inactiveForeground#8a7e66
- terminal.ansiBlack#3a332a
- terminal.ansiBlue#05618f
- terminal.ansiBrightBlack#6b6355
- terminal.ansiBrightBlue#05618f
- terminal.ansiBrightCyan#05618f
- terminal.ansiBrightGreen#5d8a1c
- terminal.ansiBrightMagenta#bc0376
- terminal.ansiBrightRed#d83737
- terminal.ansiBrightWhite#222222
- terminal.ansiBrightYellow#a24c05
- terminal.ansiCyan#05618f
- terminal.ansiGreen#5d8a1c
- terminal.ansiMagenta#7b5296
- terminal.ansiRed#d83737
- terminal.ansiWhite#3a332a
- terminal.ansiYellow#a24c05
- terminal.background#f6f3ec
- terminal.foreground#222222
- terminalCursor.foreground#bc0376
- titleBar.activeBackground#eae3d2
- titleBar.activeForeground#222222
- titleBar.border#d8cfbc
- titleBar.inactiveBackground#eae3d2
- titleBar.inactiveForeground#8a7e66
- widget.shadow#00000022
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #616161 | italic |
| meta.tag.sgml.doctype, meta.tag.sgml, comment.block.html | #8a7e66 | — |
| punctuation, meta.brace, punctuation.definition.tag, punctuation.separator, punctuation.terminator, punctuation.section | #bc0376 | — |
| keyword, keyword.control, keyword.other, storage.type, storage.modifier | #7b5296 | — |
| entity.name.function, support.function, support.function.misc.css, support.function.calc.css, support.function.gradient.css, support.function.url.css, meta.function-call | #7b5296 | — |
| constant.language, constant.language.boolean, constant.other.symbol, support.constant | #7b5296 | — |
| string, string.quoted, string.template | #5d8a1c | — |
| meta.attribute string, string.quoted.double.html, string.quoted.single.html | #5d8a1c | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.spread, keyword.operator.rest, keyword.operator.ternary | #05618f | — |
| support.type.property-name, support.type.property-name.css, variable.other.property, variable.other.object.property, meta.object-literal.key | #05618f | — |
| string.unquoted.cdata, constant.character, markup.inserted | #05618f | — |
| entity.name.tag, support.class.component | #eb007d | — |
| entity.other.attribute-name | #a24c05 | — |
| support.class.builtin, entity.name.type, support.type, entity.name.class, entity.name.namespace | #a24c05 | — |
| constant.numeric, keyword.other.unit | #f93d04 | — |
| keyword.control.at-rule, entity.name.function.scss, meta.at-rule support.type.property-name | #f93d04 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #ff00d6 | — |
| entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element | #5d8a1c | — |
| string.regexp, constant.other.color.rgb-value, support.constant.color | #6d3a00 | — |
| variable.css, variable.argument.css, variable.parameter.misc.css, support.type.custom-property.css, variable.other.custom-property.css, source.css variable, source.scss variable, source.sass variable | #05618f | — |
| variable.language, variable.parameter | #d83737 | — |
| variable, variable.other | #d83737 | — |
| markup.deleted, constant.character.entity, invalid.deprecated | #d83737 | — |
| markup.underline.link, string.other.link | #d83737 | — |
| keyword.other.important, markup.bold | #7b5296 | bold |
| markup.italic | — | italic |
| markup.heading, entity.name.section | #eb007d | bold |
| punctuation.definition.template-expression, punctuation.section.embedded | #eb007d | — |
| meta.template.expression, meta.embedded | #222222 | — |
| support.type.property-name.json | #05618f | — |
| string.quoted.double.json | #5d8a1c | — |
| entity.name.tag.yaml | #05618f | — |
| markup.inline.raw, markup.fenced_code.block | #f93d04 | — |
| markup.list, punctuation.definition.list | #a24c05 | — |
| markup.quote | #6b6355 | italic |
| support.type.primitive, entity.name.type.alias, entity.name.type.interface, entity.name.type.enum | #a24c05 | — |
| meta.decorator, punctuation.decorator | #f93d04 | — |
| support.constant.property-value.css, meta.property-value.css | #f93d04 | — |