Cocoa Butter
Publisher: Michael AndreuzzaThemes in package: 2
A VS Code theme inspired by artisan chocolate and toasted nuts
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.activeBorder#bbb1a7
- activityBar.background#211d20
- activityBar.dropBorder#3a3237
- activityBar.foreground#bbb1a7
- activityBar.inactiveForeground#ffffff50
- activityBarBadge.background#e6927a
- activityBarBadge.foreground#211d20
- badge.background#e6927a
- badge.foreground#211d20
- banner.background#2c262a
- banner.foreground#bbb1a7
- banner.iconForeground#ffffff50
- breadcrumb.activeSelectionForeground#e6927a
- breadcrumb.background#211d20
- breadcrumb.focusForeground#ffffff50
- breadcrumb.foreground#5B525B
- breadcrumbPicker.background#2c262a
- button.background#e6927a
- button.foreground#211d20
- button.hoverBackground#e6927ae6
- button.secondaryBackground#2c262a
- button.secondaryForeground#bbb1a7
- button.secondaryHoverBackground#3a3237
- charts.blue#7d96a8
- charts.foreground#bbb1a7
- charts.green#8c8f6e
- charts.lines#ffffff50
- charts.orange#588291
- charts.purple#847C98
- charts.red#dfb583
- charts.yellow#e6927a
- checkbox.background#2c262a
- checkbox.border#817c9c26
- checkbox.foreground#bbb1a7
- debugExceptionWidget.background#2c262a
- debugExceptionWidget.border#817c9c26
- debugIcon.breakpointCurrentStackframeForeground#ffffff50
- debugIcon.breakpointDisabledForeground#ffffff50
- debugIcon.breakpointForeground#ffffff50
- debugIcon.breakpointStackframeForeground#ffffff50
- debugIcon.breakpointUnverifiedForeground#ffffff50
- debugIcon.continueForeground#ffffff50
- debugIcon.disconnectForeground#ffffff50
- debugIcon.pauseForeground#ffffff50
- debugIcon.restartForeground#ffffff50
- debugIcon.startForeground#ffffff50
- debugIcon.stepBackForeground#ffffff50
- debugIcon.stepIntoForeground#ffffff50
- debugIcon.stepOutForeground#ffffff50
- debugIcon.stepOverForeground#ffffff50
- debugIcon.stopForeground#dfb583
- debugToolBar.background#2c262a
- debugToolBar.border#3a3237
- descriptionForeground#ffffff50
- diffEditor.border#3a3237
- diffEditor.diagonalFill#817c9c4d
- diffEditor.insertedTextBackground#847C9814
- diffEditor.insertedTextBorder#847C9880
- diffEditor.removedTextBackground#dfb58314
- diffEditor.removedTextBorder#dfb58380
- dropdown.background#2c262a
- dropdown.border#817c9c26
- dropdown.foreground#bbb1a7
- dropdown.listBackground#2c262a
- editor.background#211d20
- editor.findMatchBackground#817c9c4d
- editor.findMatchHighlightBackground#817c9c4d
- editor.findRangeHighlightBackground#817c9c4d
- editor.findRangeHighlightBorder#0000
- editor.focusedStackFrameHighlightBackground#817c9c26
- editor.foldBackground#2c262a
- editor.foreground#bbb1a7
- editor.hoverHighlightBackground#0000
- editor.inactiveSelectionBackground#817c9c14
- editor.inlineValuesBackground#0000
- editor.inlineValuesForeground#ffffff50
- editor.lineHighlightBackground#817c9c14
- editor.lineHighlightBorder#0000
- editor.linkedEditingBackground#2c262a
- editor.rangeHighlightBackground#817c9c14
- editor.rangeHighlightBorder#0000
- editor.selectionBackground#817c9c26
- editor.selectionForeground#bbb1a7
- editor.selectionHighlightBackground#817c9c26
- editor.selectionHighlightBorder#0000
- editor.snippetFinalTabstopHighlightBackground#817c9c26
- editor.snippetFinalTabstopHighlightBorder#2c262a
- editor.snippetTabstopHighlightBackground#817c9c26
- editor.snippetTabstopHighlightBorder#2c262a
- editor.stackFrameHighlightBackground#817c9c26
- editor.symbolHighlightBackground#817c9c26
- editor.symbolHighlightBorder#0000
- editor.wordHighlightBackground#817c9c26
- editor.wordHighlightBorder#0000
- editor.wordHighlightStrongBackground#817c9c26
- editor.wordHighlightStrongBorder#817c9c26
- editorBracketHighlight.foreground1#dfb58390
- editorBracketHighlight.foreground2#7d96a890
- editorBracketHighlight.foreground3#8c8f6e90
- editorBracketHighlight.foreground4#847C9890
- editorBracketHighlight.foreground5#e6927a90
- editorBracketHighlight.foreground6#58829190
- editorBracketMatch.background#0000
- editorBracketMatch.border#ffffff50
- editorBracketPairGuide.activeBackground1#7d96a8
- editorBracketPairGuide.activeBackground2#e6927a
- editorBracketPairGuide.activeBackground3#588291
- editorBracketPairGuide.activeBackground4#847C98
- editorBracketPairGuide.activeBackground5#8c8f6e
- editorBracketPairGuide.activeBackground6#dfb583
- editorBracketPairGuide.background1#7d96a880
- editorBracketPairGuide.background2#e6927a80
- editorBracketPairGuide.background3#58829180
- editorBracketPairGuide.background4#847C9880
- editorBracketPairGuide.background5#8c8f6e80
- editorBracketPairGuide.background6#dfb58380
- editorCodeLens.foreground#e6927a
- editorCursor.background#bbb1a7
- editorCursor.foreground#588291
- editorError.border#0000
- editorError.foreground#dfb583
- editorGhostText.foreground#ffffff50
- editorGroup.border#0000
- editorGroup.dropBackground#2c262a
- editorGroup.emptyBackground#0000
- editorGroup.focusedEmptyBorder#0000
- editorGroupHeader.noTabsBackground#0000
- editorGroupHeader.tabsBackground#0000
- editorGroupHeader.tabsBorder#0000
- editorGutter.addedBackground#847C98
- editorGutter.background#0000
- editorGutter.commentRangeForeground#ffffff50
- editorGutter.deletedBackground#dfb583
- editorGutter.foldingControlForeground#588291
- editorGutter.modifiedBackground#e6927a
- editorHint.border#0000
- editorHint.foreground#ffffff50
- editorHoverWidget.background#2c262a
- editorHoverWidget.border#5B525B80
- editorHoverWidget.foreground#ffffff50
- editorHoverWidget.highlightForeground#bbb1a7
- editorHoverWidget.statusBarBackground#0000
- editorIndentGuide.activeBackground#5B525B
- editorIndentGuide.background#817c9c4d
- editorInfo.border#3a3237
- editorInfo.foreground#847C98
- editorInlayHint.background#3a3237
- editorInlayHint.foreground#ffffff50
- editorInlayHint.parameterBackground#3a3237
- editorInlayHint.parameterForeground#588291
- editorInlayHint.typeBackground#3a3237
- editorInlayHint.typeForeground#847C98
- editorLightBulb.foreground#7d96a8
- editorLightBulbAutoFix.foreground#e6927a
- editorLineNumber.activeForeground#bbb1a7
- editorLineNumber.foreground#ffffff50
- editorLink.activeForeground#e6927a
- editorMarkerNavigation.background#2c262a
- editorMarkerNavigationError.background#2c262a
- editorMarkerNavigationInfo.background#2c262a
- editorMarkerNavigationWarning.background#2c262a
- editorOverviewRuler.addedForeground#847C9880
- editorOverviewRuler.background#211d20
- editorOverviewRuler.border#817c9c4d
- editorOverviewRuler.bracketMatchForeground#ffffff50
- editorOverviewRuler.commonContentForeground#817c9c14
- editorOverviewRuler.currentContentForeground#817c9c26
- editorOverviewRuler.deletedForeground#dfb58380
- editorOverviewRuler.errorForeground#dfb58380
- editorOverviewRuler.findMatchForeground#817c9c4d
- editorOverviewRuler.incomingContentForeground#58829180
- editorOverviewRuler.infoForeground#847C9880
- editorOverviewRuler.modifiedForeground#e6927a80
- editorOverviewRuler.rangeHighlightForeground#817c9c4d
- editorOverviewRuler.selectionHighlightForeground#817c9c4d
- editorOverviewRuler.warningForeground#8c8f6e80
- editorOverviewRuler.wordHighlightForeground#817c9c26
- editorOverviewRuler.wordHighlightStrongForeground#817c9c4d
- editorPane.background#0000
- editorRuler.foreground#817c9c4d
- editorSuggestWidget.background#2c262a
- editorSuggestWidget.border#0000
- editorSuggestWidget.focusHighlightForeground#e6927a
- editorSuggestWidget.foreground#ffffff50
- editorSuggestWidget.highlightForeground#e6927a
- editorSuggestWidget.selectedBackground#817c9c26
- editorSuggestWidget.selectedForeground#bbb1a7
- editorSuggestWidget.selectedIconForeground#bbb1a7
- editorUnnecessaryCode.border#0000
- editorUnnecessaryCode.opacity#00000080
- editorWarning.border#0000
- editorWarning.foreground#8c8f6e
- editorWhitespace.foreground#5B525B
- editorWidget.background#2c262a
- editorWidget.border#3a3237
- editorWidget.foreground#ffffff50
- editorWidget.resizeBorder#5B525B
- errorForeground#dfb583
- extensionBadge.remoteBackground#588291
- extensionBadge.remoteForeground#0Ffff1014
- extensionButton.prominentBackground#e6927a
- extensionButton.prominentForeground#211d20
- extensionButton.prominentHoverBackground#e6927ae6
- extensionIcon.starForeground#e6927a
- extensionIcon.verifiedForeground#588291
- focusBorder#817c9c26
- foreground#bbb1a7
- gitDecoration.addedResourceForeground#847C98
- gitDecoration.conflictingResourceForeground#dfb583
- gitDecoration.deletedResourceForeground#ffffff50
- gitDecoration.ignoredResourceForeground#5B525B
- gitDecoration.modifiedResourceForeground#e6927a
- gitDecoration.renamedResourceForeground#7d96a8
- gitDecoration.stageDeletedResourceForeground#847C98
- gitDecoration.stageModifiedResourceForeground#588291
- gitDecoration.submoduleResourceForeground#8c8f6e
- gitDecoration.untrackedResourceForeground#8c8f6e
- icon.foreground#ffffff50
- input.background#3a323780
- input.border#817c9c26
- input.foreground#bbb1a7
- input.placeholderForeground#ffffff50
- inputOption.activeBackground#e6927a
- inputOption.activeBorder#0000
- inputOption.activeForeground#211d20
- inputValidation.errorBackground#0000
- inputValidation.errorBorder#0000
- inputValidation.errorForeground#dfb583
- inputValidation.infoBackground#0000
- inputValidation.infoBorder#0000
- inputValidation.infoForeground#847C98
- inputValidation.warningBackground#0000
- inputValidation.warningBorder#0000
- inputValidation.warningForeground#847C9880
- keybindingLabel.background#3a3237
- keybindingLabel.border#817c9c4d
- keybindingLabel.bottomBorder#817c9c4d
- keybindingLabel.foreground#588291
- keybindingTable.headerBackground#3a3237
- keybindingTable.rowsBackground#2c262a
- list.activeSelectionBackground#817c9c26
- list.activeSelectionForeground#bbb1a7
- list.activeSelectionIconForeground#bbb1a7
- list.deemphasizedForeground#ffffff50
- list.dropBackground#2c262a
- list.errorForeground#dfb583
- list.filterMatchBackground#2c262a
- list.filterMatchBorder#e6927a
- list.focusBackground#817c9c4d
- list.focusForeground#bbb1a7
- list.focusOutline#817c9c26
- list.highlightForeground#e6927a
- list.hoverBackground#817c9c14
- list.hoverForeground#bbb1a7
- list.inactiveFocusBackground#817c9c14
- list.inactiveSelectionBackground#2c262a
- list.inactiveSelectionForeground#bbb1a7
- list.inactiveSelectionIconForeground#ffffff50
- list.invalidItemForeground#dfb583
- list.warningForeground#8c8f6e
- listFilterWidget.background#2c262a
- listFilterWidget.noMatchesOutline#dfb583
- listFilterWidget.outline#3a3237
- menu.background#2c262a
- menu.border#817c9c14
- menu.foreground#bbb1a7
- menu.selectionBackground#817c9c26
- menu.selectionBorder#3a3237
- menu.selectionForeground#bbb1a7
- menu.separatorBackground#bbb1a7
- menubar.selectionBackground#817c9c26
- menubar.selectionBorder#817c9c14
- menubar.selectionForeground#bbb1a7
- merge.border#3a3237
- merge.commonContentBackground#817c9c26
- merge.commonHeaderBackground#817c9c26
- merge.currentContentBackground#8c8f6e80
- merge.currentHeaderBackground#8c8f6e80
- merge.incomingContentBackground#847C9880
- merge.incomingHeaderBackground#847C9880
- minimap.background#2c262a
- minimap.errorHighlight#dfb58380
- minimap.findMatchHighlight#817c9c26
- minimap.selectionHighlight#817c9c26
- minimap.warningHighlight#8c8f6e80
- minimapGutter.addedBackground#847C98
- minimapGutter.deletedBackground#dfb583
- minimapGutter.modifiedBackground#e6927a
- minimapSlider.activeBackground#817c9c4d
- minimapSlider.background#817c9c26
- minimapSlider.hoverBackground#817c9c26
- notificationCenter.border#817c9c26
- notificationCenterHeader.background#2c262a
- notificationCenterHeader.foreground#ffffff50
- notificationLink.foreground#588291
- notifications.background#2c262a
- notifications.border#817c9c26
- notifications.foreground#bbb1a7
- notificationsErrorIcon.foreground#dfb583
- notificationsInfoIcon.foreground#847C98
- notificationsWarningIcon.foreground#8c8f6e
- notificationToast.border#817c9c26
- panel.background#211d20
- panel.border#3a3237
- panel.dropBorder#3a3237
- panelInput.border#211d20
- panelSection.dropBackground#817c9c26
- panelSectionHeader.background#211d20
- panelSectionHeader.foreground#bbb1a7
- panelTitle.activeBorder#817c9c4d
- panelTitle.activeForeground#bbb1a7
- panelTitle.inactiveForeground#ffffff50
- peekView.border#3a3237
- peekViewEditor.background#2c262a
- peekViewEditor.matchHighlightBackground#817c9c4d
- peekViewResult.background#2c262a
- peekViewResult.fileForeground#ffffff50
- peekViewResult.lineForeground#ffffff50
- peekViewResult.matchHighlightBackground#817c9c4d
- peekViewResult.selectionBackground#817c9c26
- peekViewResult.selectionForeground#bbb1a7
- peekViewTitle.background#3a3237
- peekViewTitleDescription.foreground#ffffff50
- pickerGroup.border#817c9c4d
- pickerGroup.foreground#588291
- ports.iconRunningProcessForeground#e6927a
- problemsErrorIcon.foreground#dfb583
- problemsInfoIcon.foreground#847C98
- problemsWarningIcon.foreground#8c8f6e
- progressBar.background#e6927a
- quickInput.background#2c262a
- quickInput.foreground#ffffff50
- quickInputList.focusBackground#817c9c26
- quickInputList.focusForeground#bbb1a7
- quickInputList.focusIconForeground#bbb1a7
- scrollbar.shadow#0000
- scrollbarSlider.activeBackground#817c9c4d
- scrollbarSlider.background#817c9c14
- scrollbarSlider.hoverBackground#817c9c26
- searchEditor.findMatchBackground#817c9c26
- selection.background#817c9c4d
- settings.focusedRowBackground#2c262a
- settings.focusedRowBorder#817c9c26
- settings.headerForeground#bbb1a7
- settings.modifiedItemIndicator#e6927a
- settings.rowHoverBackground#2c262a
- sideBar.background#211d20
- sideBar.border#3a3237
- sideBar.dropBackground#2c262a
- sideBar.foreground#ffffff50
- sideBarSectionHeader.background#0000
- sideBarSectionHeader.border#817c9c26
- statusBar.background#211d20
- statusBar.debuggingBackground#588291
- statusBar.debuggingForeground#211d20
- statusBar.foreground#ffffff50
- statusBar.noFolderBackground#211d20
- statusBar.noFolderForeground#ffffff50
- statusBarItem.activeBackground#817c9c4d
- statusBarItem.errorBackground#211d20
- statusBarItem.errorForeground#dfb583
- statusBarItem.hoverBackground#817c9c26
- statusBarItem.prominentBackground#3a3237
- statusBarItem.prominentForeground#bbb1a7
- statusBarItem.prominentHoverBackground#817c9c26
- statusBarItem.remoteBackground#211d20
- statusBarItem.remoteForeground#8c8f6e
- symbolIcon.arrayForeground#ffffff50
- symbolIcon.classForeground#ffffff50
- symbolIcon.colorForeground#ffffff50
- symbolIcon.constantForeground#ffffff50
- symbolIcon.constructorForeground#ffffff50
- symbolIcon.enumeratorForeground#ffffff50
- symbolIcon.enumeratorMemberForeground#ffffff50
- symbolIcon.eventForeground#ffffff50
- symbolIcon.fieldForeground#ffffff50
- symbolIcon.fileForeground#ffffff50
- symbolIcon.folderForeground#ffffff50
- symbolIcon.functionForeground#ffffff50
- symbolIcon.interfaceForeground#ffffff50
- symbolIcon.keyForeground#ffffff50
- symbolIcon.keywordForeground#ffffff50
- symbolIcon.methodForeground#ffffff50
- symbolIcon.moduleForeground#ffffff50
- symbolIcon.namespaceForeground#ffffff50
- symbolIcon.nullForeground#ffffff50
- symbolIcon.numberForeground#ffffff50
- symbolIcon.objectForeground#ffffff50
- symbolIcon.operatorForeground#ffffff50
- symbolIcon.packageForeground#ffffff50
- symbolIcon.propertyForeground#ffffff50
- symbolIcon.referenceForeground#ffffff50
- symbolIcon.snippetForeground#ffffff50
- symbolIcon.stringForeground#ffffff50
- symbolIcon.structForeground#ffffff50
- symbolIcon.textForeground#ffffff50
- symbolIcon.typeParameterForeground#ffffff50
- symbolIcon.unitForeground#ffffff50
- symbolIcon.variableForeground#ffffff50
- tab.activeBackground#817c9c10
- tab.activeBorderTop#588291
- tab.activeForeground#bbb1a7
- tab.activeModifiedBorder#847C98
- tab.border#0000
- tab.hoverBackground#817c9c26
- tab.inactiveBackground#0000
- tab.inactiveForeground#ffffff50
- tab.inactiveModifiedBorder#847C9880
- tab.lastPinnedBorder#5B525B
- tab.unfocusedActiveBackground#0000
- tab.unfocusedHoverBackground#0000
- tab.unfocusedInactiveBackground#0000
- tab.unfocusedInactiveModifiedBorder#847C9880
- terminal.ansiBlack#3a3237
- terminal.ansiBlue#847C98
- terminal.ansiBrightBlack#ffffff50
- terminal.ansiBrightBlue#847C98
- terminal.ansiBrightCyan#e6927a
- terminal.ansiBrightGreen#7d96a8
- terminal.ansiBrightMagenta#588291
- terminal.ansiBrightRed#dfb583
- terminal.ansiBrightWhite#bbb1a7
- terminal.ansiBrightYellow#8c8f6e
- terminal.ansiCyan#e6927a
- terminal.ansiGreen#7d96a8
- terminal.ansiMagenta#588291
- terminal.ansiRed#dfb583
- terminal.ansiWhite#bbb1a7
- terminal.ansiYellow#8c8f6e
- terminal.dropBackground#817c9c26
- terminal.foreground#bbb1a7
- terminal.selectionBackground#817c9c26
- terminal.tab.activeBorder#bbb1a7
- terminalCursor.background#bbb1a7
- terminalCursor.foreground#5B525B
- textBlockQuote.background#2c262a
- textBlockQuote.border#817c9c26
- textCodeBlock.background#2c262a
- textLink.activeForeground#588291e6
- textLink.foreground#588291
- textPreformat.foreground#8c8f6e
- textSeparator.foreground#ffffff50
- titleBar.activeBackground#211d20
- titleBar.activeForeground#ffffff50
- titleBar.border#3a3237
- titleBar.inactiveBackground#2c262a
- titleBar.inactiveForeground#ffffff50
- toolbar.activeBackground#817c9c4d
- toolbar.hoverBackground#817c9c26
- tree.indentGuidesStroke#ffffff50
- walkThrough.embeddedEditorBackground#211d20
- welcomePage.background#211d20
- welcomePage.buttonBackground#2c262a
- welcomePage.buttonHoverBackground#3a3237
- widget.shadow#1917244d
- window.activeBorder#2c262a
- window.inactiveBorder#2c262a
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #ffffff50 | italic |
| constant | #7d96a8 | — |
| constant.numeric, constant.language, constant.charcter.escape | #e6927a | — |
| entity.name | #e6927a | — |
| entity.name.section, entity.name.tag, entity.name.namespace, entity.name.type | #847C98 | — |
| entity.other.attribute-name, entity.other.inherited-class | #588291 | italic |
| invalid | #dfb583 | — |
| invalid.deprecated | #ffffff50 | — |
| keyword | #7d96a8 | — |
| meta.tag, meta.brace | #bbb1a7 | — |
| meta.import, meta.export | #7d96a8 | — |
| meta.directive.vue | #588291 | italic |
| meta.property-name.css | #847C98 | — |
| meta.property-value.css | #8c8f6e | — |
| meta.tag.other.html | #ffffff50 | — |
| punctuation | #ffffff50 | — |
| punctuation.accessor | #7d96a8 | — |
| punctuation.definition.string | #8c8f6e | — |
| punctuation.definition.tag | #5B525B | — |
| storage.type, storage.modifier | #7d96a8 | — |
| string | #8c8f6e | — |
| support | #847C98 | — |
| support.constant | #8c8f6e | — |
| support.function | #dfb583 | italic |
| variable | #e6927a | italic |
| variable.other, variable.language, variable.function, variable.argument | #bbb1a7 | — |
| variable.parameter | #588291 | — |