Mocaccino Light

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.

• actionBar.toggledBackground#DDD0C0
• activityBar.background#EDE3D4
• activityBar.foreground#6B5344
• activityBar.inactiveForeground#A99888
• activityBarBadge.background#9B6842
• activityBarBadge.foreground#FAF4E8
• banner.background#EDE3D4
• banner.foreground#6B5344
• banner.iconForeground#9B6842
• breadcrumb.activeSelectionForeground#6B5344
• breadcrumb.focusForeground#6B5344
• breadcrumb.foreground#9A8878
• breadcrumbPicker.background#F3E8DA
• button.background#9B6842
• button.foreground#FAF4E8
• button.hoverBackground#A8704A
• button.secondaryBackground#DDD0C0
• button.secondaryForeground#6B5344
• charts.blue#5A8AAA
• charts.foreground#6B5344
• charts.green#7A9A5A
• charts.lines#9A8878
• charts.orange#A8704A
• charts.purple#9A7ABB
• charts.red#B86B5C
• charts.yellow#B89A4A
• commandCenter.activeBackground#DDD0C0
• commandCenter.activeBorder#CBAE78
• commandCenter.activeForeground#6B5344
• commandCenter.background#EDE3D4
• commandCenter.border#DDD0C0
• commandCenter.foreground#6B5344
• commandCenter.inactiveBorder#DDD0C0
• commandCenter.inactiveForeground#A99888
• commentsView.resolvedIcon#7A9A5A
• commentsView.unresolvedIcon#B89A4A
• debugConsole.errorForeground#B86B5C
• debugConsole.infoForeground#5A8AAA
• debugConsole.warningForeground#B89A4A
• debugIcon.breakpointForeground#B86B5C
• debugIcon.pauseForeground#B89A4A
• debugIcon.startForeground#7A9A5A
• debugIcon.stopForeground#B86B5C
• debugToolBar.background#EDE3D4
• diffEditor.diagonalFill#DDD0C0
• diffEditor.insertedLineBackground#7A9A5A15
• diffEditor.insertedTextBackground#7A9A5A20
• diffEditor.removedLineBackground#B86B5C15
• diffEditor.removedTextBackground#B86B5C20
• diffEditorGutter.insertedLineBackground#7A9A5A40
• diffEditorGutter.removedLineBackground#B86B5C40
• dropdown.background#FFFDF8
• dropdown.border#DDD0C0
• dropdown.foreground#6B5344
• editor.background#FAF4E8
• editor.findMatchBackground#D4BE8A
• editor.findMatchHighlightBackground#E6D9B8
• editor.foreground#6B5344
• editor.lineHighlightBackground#F3E8DA
• editor.selectionBackground#DDD0C0
• editor.selectionHighlightBackground#E8DDCC
• editor.wordHighlightBackground#E8DDCC
• editorBracketHighlight.foreground1#9B6842
• editorBracketHighlight.foreground2#B89A4A
• editorBracketHighlight.foreground3#7A9A5A
• editorBracketHighlight.foreground4#5A8AAA
• editorBracketHighlight.foreground5#9A7ABB
• editorBracketHighlight.foreground6#6A9A9A
• editorBracketMatch.background#E6D9B8
• editorBracketMatch.border#9B6842
• editorCursor.foreground#9B6842
• editorError.background#B86B5C15
• editorError.foreground#B86B5C
• editorGroup.border#DDD0C0
• editorGroupHeader.tabsBackground#EDE3D4
• editorGutter.addedBackground#7A9A5A
• editorGutter.deletedBackground#B86B5C
• editorGutter.modifiedBackground#5A8AAA
• editorHint.foreground#7A9A5A
• editorHoverWidget.background#F3E8DA
• editorHoverWidget.border#DDD0C0
• editorHoverWidget.foreground#6B5344
• editorIndentGuide.activeBackground1#CBAE78
• editorIndentGuide.background1#E8DDCC
• editorInfo.background#5A8AAA15
• editorInfo.foreground#5A8AAA
• editorInlayHint.background#EDE3D4
• editorInlayHint.foreground#9A8878
• editorInlayHint.parameterForeground#7D5A3C
• editorInlayHint.typeForeground#9A7ABB
• editorLineNumber.activeForeground#6B5344
• editorLineNumber.foreground#B8A890
• editorOverviewRuler.addedForeground#7A9A5A
• editorOverviewRuler.deletedForeground#B86B5C
• editorOverviewRuler.errorForeground#B86B5C
• editorOverviewRuler.infoForeground#5A8AAA
• editorOverviewRuler.modifiedForeground#5A8AAA
• editorOverviewRuler.warningForeground#B89A4A
• editorStickyScroll.background#F3E8DA
• editorStickyScrollHover.background#EDE3D4
• editorSuggestWidget.background#F3E8DA
• editorSuggestWidget.border#DDD0C0
• editorSuggestWidget.focusHighlightForeground#9B6842
• editorSuggestWidget.highlightForeground#9B6842
• editorSuggestWidget.selectedBackground#DDD0C0
• editorWarning.background#B89A4A15
• editorWarning.foreground#B89A4A
• editorWhitespace.foreground#DDD0C0
• editorWidget.background#F3E8DA
• editorWidget.border#DDD0C0
• editorWidget.foreground#6B5344
• extensionBadge.remoteBackground#9B6842
• extensionBadge.remoteForeground#FAF4E8
• extensionIcon.preReleaseForeground#B89A4A
• extensionIcon.sponsorForeground#9A7ABB
• extensionIcon.starForeground#B89A4A
• extensionIcon.verifiedForeground#7A9A5A
• focusBorder#9B6842
• gitDecoration.addedResourceForeground#7A9A5A
• gitDecoration.deletedResourceForeground#B86B5C
• gitDecoration.ignoredResourceForeground#A99888
• gitDecoration.modifiedResourceForeground#B89A4A
• gitDecoration.untrackedResourceForeground#6A9A9A
• input.background#FFFDF8
• input.border#DDD0C0
• input.foreground#6B5344
• input.placeholderForeground#A99888
• inputOption.activeBackground#E6D9B8
• inputOption.activeBorder#9B6842
• keybindingLabel.background#EDE3D4
• keybindingLabel.border#DDD0C0
• keybindingLabel.bottomBorder#CBAE78
• keybindingLabel.foreground#6B5344
• list.activeSelectionBackground#D4BE8A
• list.activeSelectionForeground#5C4636
• list.focusBackground#DDD0C0
• list.hoverBackground#EDE3D4
• list.inactiveSelectionBackground#E6D9B8
• merge.currentContentBackground#7A9A5A20
• merge.currentHeaderBackground#7A9A5A40
• merge.incomingContentBackground#5A8AAA20
• merge.incomingHeaderBackground#5A8AAA40
• minimap.background#F3E8DA
• minimap.selectionHighlight#D4BE8A
• notebook.cellBorderColor#DDD0C0
• notebook.cellEditorBackground#FAF4E8
• notebook.cellHoverBackground#F3E8DA
• notebook.cellInsertionIndicator#9B6842
• notebook.cellStatusBarItemHoverBackground#DDD0C0
• notebook.cellToolbarSeparator#DDD0C0
• notebook.focusedCellBorder#9B6842
• notebook.focusedEditorBorder#9B6842
• notebook.inactiveFocusedCellBorder#CBAE78
• notebook.outputContainerBackgroundColor#F3E8DA
• notebook.selectedCellBackground#E8DDCC
• notebook.selectedCellBorder#CBAE78
• notebookStatusErrorIcon.foreground#B86B5C
• notebookStatusRunningIcon.foreground#7A9A5A
• notebookStatusSuccessIcon.foreground#7A9A5A
• notificationCenter.border#DDD0C0
• notifications.background#F3E8DA
• notifications.foreground#6B5344
• panel.background#F3E8DA
• panel.border#DDD0C0
• panelTitle.activeBorder#9B6842
• panelTitle.activeForeground#6B5344
• panelTitle.inactiveForeground#A99888
• peekView.border#9B6842
• peekViewEditor.background#FAF4E8
• peekViewResult.background#F3E8DA
• peekViewTitle.background#EDE3D4
• ports.iconRunningProcessForeground#7A9A5A
• problemsErrorIcon.foreground#B86B5C
• problemsInfoIcon.foreground#5A8AAA
• problemsWarningIcon.foreground#B89A4A
• profileBadge.background#9B6842
• profileBadge.foreground#FAF4E8
• quickInput.background#F3E8DA
• quickInput.foreground#6B5344
• quickInputList.focusBackground#DDD0C0
• quickInputTitle.background#EDE3D4
• scrollbar.shadow#DDD0C0
• scrollbarSlider.activeBackground#A9988860
• scrollbarSlider.background#CBAE7860
• scrollbarSlider.hoverBackground#CBAE7890
• searchEditor.findMatchBackground#D4BE8A50
• searchEditor.textInputBorder#DDD0C0
• settings.checkboxBackground#FFFDF8
• settings.checkboxBorder#DDD0C0
• settings.checkboxForeground#6B5344
• settings.dropdownBackground#FFFDF8
• settings.dropdownBorder#DDD0C0
• settings.dropdownForeground#6B5344
• settings.focusedRowBackground#E8DDCC
• settings.focusedRowBorder#CBAE78
• settings.headerForeground#6B5344
• settings.modifiedItemIndicator#5A8AAA
• settings.numberInputBackground#FFFDF8
• settings.numberInputBorder#DDD0C0
• settings.numberInputForeground#6B5344
• settings.rowHoverBackground#F3E8DA
• settings.textInputBackground#FFFDF8
• settings.textInputBorder#DDD0C0
• settings.textInputForeground#6B5344
• sideBar.background#F3E8DA
• sideBar.foreground#6B5344
• sideBarSectionHeader.background#EDE3D4
• sideBarSectionHeader.foreground#6B5344
• sideBarTitle.foreground#7D5A3C
• statusBar.background#7D5A3C
• statusBar.debuggingBackground#A8704A
• statusBar.foreground#FAF4E8
• statusBar.noFolderBackground#9B6842
• symbolIcon.arrayForeground#6A9A9A
• symbolIcon.booleanForeground#B07868
• symbolIcon.classForeground#A88A3A
• symbolIcon.colorForeground#9A7ABB
• symbolIcon.constantForeground#B07868
• symbolIcon.constructorForeground#5A8AAA
• symbolIcon.enumeratorForeground#A88A3A
• symbolIcon.enumeratorMemberForeground#B07868
• symbolIcon.eventForeground#B89A4A
• symbolIcon.fieldForeground#6A9A9A
• symbolIcon.fileForeground#9A8878
• symbolIcon.folderForeground#9B6842
• symbolIcon.functionForeground#5A8AAA
• symbolIcon.interfaceForeground#9A7ABB
• symbolIcon.keyForeground#9B6842
• symbolIcon.keywordForeground#9B6842
• symbolIcon.methodForeground#5A8AAA
• symbolIcon.moduleForeground#9B6842
• symbolIcon.namespaceForeground#9B6842
• symbolIcon.nullForeground#B07868
• symbolIcon.numberForeground#A8894A
• symbolIcon.objectForeground#A88A3A
• symbolIcon.operatorForeground#7D5A3C
• symbolIcon.packageForeground#9B6842
• symbolIcon.propertyForeground#6A9A9A
• symbolIcon.referenceForeground#6A9A9A
• symbolIcon.snippetForeground#7A9A5A
• symbolIcon.stringForeground#7A9A5A
• symbolIcon.structForeground#A88A3A
• symbolIcon.textForeground#6B5344
• symbolIcon.typeParameterForeground#9A7ABB
• symbolIcon.unitForeground#A8894A
• symbolIcon.variableForeground#6B5344
• tab.activeBackground#FAF4E8
• tab.activeBorderTop#9B6842
• tab.activeForeground#6B5344
• tab.border#DDD0C0
• tab.inactiveBackground#EDE3D4
• tab.inactiveForeground#A99888
• terminal.ansiBlack#6B5344
• terminal.ansiBlue#5A8AAA
• terminal.ansiBrightBlack#9A8878
• terminal.ansiBrightBlue#7AAACC
• terminal.ansiBrightCyan#8ABBBB
• terminal.ansiBrightGreen#99B87A
• terminal.ansiBrightMagenta#BB99CC
• terminal.ansiBrightRed#CC8878
• terminal.ansiBrightWhite#FFFDF8
• terminal.ansiBrightYellow#CCAA5A
• terminal.ansiCyan#6A9A9A
• terminal.ansiGreen#7A9A5A
• terminal.ansiMagenta#9A7ABB
• terminal.ansiRed#B86B5C
• terminal.ansiWhite#FAF4E8
• terminal.ansiYellow#B89A4A
• terminal.background#F3E8DA
• terminal.foreground#6B5344
• testing.iconErrored#B86B5C
• testing.iconFailed#B86B5C
• testing.iconPassed#7A9A5A
• testing.iconQueued#B89A4A
• testing.iconSkipped#9A8878
• textLink.activeForeground#4A7A9A
• textLink.foreground#5A8AAA
• titleBar.activeBackground#EDE3D4
• titleBar.activeForeground#6B5344
• titleBar.inactiveBackground#F3E8DA
• titleBar.inactiveForeground#A99888
• walkThrough.embeddedEditorBackground#F3E8DA
• walkthrough.stepTitle.foreground#6B5344
• welcomePage.background#FAF4E8
• welcomePage.progress.background#DDD0C0
• welcomePage.progress.foreground#9B6842
• welcomePage.tileBackground#F3E8DA
• welcomePage.tileBorder#DDD0C0
• welcomePage.tileHoverBackground#EDE3D4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).