Maccarone For VSCode

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.

• badge.backgroundred
• badge.foreground#fff
• button.background#cb90ffff
• button.border#cb90ffff
• button.foreground#ffffff
• button.hoverBackground#d39
• button.secondaryBackground#d99
• button.secondaryForeground#d99
• button.secondaryHoverBackground#222
• button.separator#d39
• checkbox.background#ffffff
• checkbox.border#ff7ef4ff
• checkbox.disabled.background#7e7e7e
• checkbox.disabled.foreground#7e7e7e
• checkbox.foreground#ffffff
• checkbox.selectBackground#ff7ef4ff
• checkbox.selectBorder#ff7ef4ff
• descriptionForeground#D39
• disabledForeground#ff588aff
• dropdown.background#51576d
• dropdown.border#cb90ffff
• dropdown.foreground#ffffff
• dropdown.listBackground#51576d
• editor.background#303446
• editorActionList.background#d39
• editorActionList.focusBackground#d39
• editorActionList.focusForeground#d39
• editorActionList.foreground#d39
• errorForeground#D39111
• focusBorder#139928
• foreground#ff7ef4ff
• icon.foreground#999
• input.background#414559
• input.border#cb90ffff
• input.foreground#ffffff
• input.placeholderForeground#7d849f
• inputOption.activeBackground#cb90ffff
• inputOption.activeBorder#cb90ffff
• inputOption.activeForeground#d39
• inputOption.hoverBackground#fff
• inputValidation.errorBackground#e78284
• inputValidation.errorBorder#cb90ffff
• inputValidation.errorForeground#ffffff
• inputValidation.infoBackground#fff
• inputValidation.infoBorder#fff
• inputValidation.infoForeground#333
• inputValidation.warningBackgroundyellow
• inputValidation.warningBorderyellow
• inputValidation.warningForegroundyellow
• list.activeSelectionBackground#414559
• list.activeSelectionForeground#ffffff
• list.activeSelectionIconForeground#ffffff
• list.dropBackground#fff
• list.hoverBackground#353 94b
• progressBar.background#cb90ffff
• radio.activeBackground#d39
• radio.activeBorder#d39
• radio.activeForeground#ff7ef4ff
• radio.inactiveBackground#e0bcffff
• radio.inactiveBorder#d39
• radio.inactiveForeground#cb90ffff
• radio.inactiveHoverBackground#e0bcffff
• sash.hoverBorder#399
• scrollbar.background#292c3c
• scrollbar.shadow#cb90ffff
• scrollbarSlider.activeBackground#cb90ffff
• scrollbarSlider.background#fff
• scrollbarSlider.hoverBackground#a475ceff
• selection.background#FFAA88
• sideBar.background#292c3c
• tab.unfocusedActiveBackground#333333
• textBlockQuote.background#eeeeee
• textBlockQuote.border#D39
• textCodeBlock.background#eeeeee
• textLink.activeForeground#D39FFF
• textLink.foreground#506affff
• textPreformat.background#ffb7bdff
• textPreformat.foreground#d39
• textSeparator.foreground#d39
• toolbar.activeBackground#e0bcffff
• toolbar.hoverBackground#e0bcffff
• toolbar.hoverOutline#e47575ce
• widget.border#e0bcffff
• widget.shadow#e0bcffff
• window.activeBorder#7e7e7e
• window.inactiveBorder#333

tokenColors

TextMate scopes and font styles (syntax highlighting rules).