Zenbones Themes

Color themes

• 

  Zenbones Dark

• 

  Zenbones Dark Stark

• 

  Zenbones Dark Warm

• 

  Zenbones Duckbones Dark

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#3B3633
• activityBar.foreground#B4BDC3
• activityBarBadge.background#B279A7
• activityBarBadge.foreground#2D2927
• badge.background#B279A7
• badge.foreground#2D2927
• button.background#3B3633
• button.foreground#B4BDC3
• button.secondaryBackground#2D2927
• button.secondaryForeground#CAD0D4
• checkbox.background#3B3633
• checkbox.foreground#B4BDC3
• descriptionForeground#B4BDC3
• disabledForeground#B4BDC380
• editor.background#221F1D
• editor.findMatchBackground#C598BB
• editor.findMatchHighlightBackground#6E4966
• editor.foreground#B4BDC3
• editor.lineHighlightBackground#2B2725
• editor.selectionBackground#444749
• editorBracketHighlight.foreground1#6099C0
• editorBracketHighlight.foreground2#819B69
• editorBracketHighlight.foreground3#B279A7
• editorBracketHighlight.foreground4#6099C0
• editorBracketHighlight.foreground5#819B69
• editorBracketHighlight.foreground6#B279A7
• editorBracketHighlight.unexpectedBracket.foreground#DE6E7C
• editorCursor.foreground#C4CACF
• editorError.foreground#DE6E7C
• editorGroupHeader.tabsBackground#2D2927
• editorGutter.addedBackground#29341F
• editorGutter.deletedBackground#47272B
• editorGutter.modifiedBackground#22323E
• editorHint.foreground#B279A7
• editorHoverWidget.background#37322F
• editorHoverWidget.border#4F4844
• editorHoverWidget.foreground#B4BDC3
• editorIndentGuide.activeBackground#6D645Fa0
• editorIndentGuide.background#6D645F50
• editorInfo.foreground#6099C0
• editorLineNumber.activeForeground#B4BDC3
• editorLineNumber.foreground#6D645F
• editorOverviewRuler.addedForeground#29341F
• editorOverviewRuler.deletedForeground#47272B
• editorOverviewRuler.errorForeground#DE6E7C
• editorOverviewRuler.findMatchForeground#6E4966
• editorOverviewRuler.infoForeground#6099C0
• editorOverviewRuler.modifiedForeground#22323E
• editorOverviewRuler.selectionHighlightForeground#444749
• editorOverviewRuler.warningForeground#B77E64
• editorRuler.foreground#6D645Fa0
• editorWarning.foreground#B77E64
• editorWidget.background#2D2927
• editorWidget.border#3B3633
• editorWidget.foreground#CAD0D4
• errorForeground#DE6E7C
• focusBorder#B279A7
• foreground#B4BDC3
• icon.foreground#B4BDC3a0
• input.background#221F1D
• input.foreground#B4BDC3
• input.placeholderForeground#706966
• inputOption.activeBorder#B279A7
• inputValidation.errorBorder#DE6E7C
• inputValidation.infoBorder#6099C0
• inputValidation.warningBorder#B77E64
• keybindingLabel.background#3B3633
• keybindingLabel.border#37322F
• keybindingLabel.bottomBorder#4F4844
• keybindingLabel.foreground#B4BDC3
• list.activeSelectionBackground#4F4844
• list.activeSelectionForeground#B4BDC3
• list.highlightForeground#B279A7
• list.hoverBackground#4F484450
• list.inactiveSelectionBackground#4F4844a0
• minimap.errorHighlight#DE6E7C
• minimap.findMatchHighlight#6E4966
• minimap.selectionHighlight#444749
• minimap.warningHighlight#B77E64
• minimapGutter.addedBackground#29341F
• minimapGutter.deletedBackground#47272B
• minimapGutter.modifiedBackground#22323E
• notificationCenterHeader.background#2D2927
• notificationCenterHeader.foreground#CAD0D4
• notificationLink.foreground#B279A7
• notifications.background#221F1D
• notifications.foreground#B4BDC3
• notificationsErrorIcon.foreground#DE6E7C
• notificationsInfoIcon.foreground#6099C0
• notificationsWarningIcon.foreground#B77E64
• panel.background#221F1D
• panel.border#6D645Fa0
• panelTitle.activeBorder#6D645Fa0
• panelTitle.activeForeground#B4BDC3
• panelTitle.inactiveForeground#B4BDC3a0
• pickerGroup.border#6D645Fa0
• pickerGroup.foreground#CAD0D4
• problemsErrorIcon.foreground#DE6E7C
• problemsInfoIcon.foreground#6099C0
• problemsWarningIcon.foreground#B77E64
• quickInput.background#2D2927
• quickInput.foreground#CAD0D4
• quickInputList.focusBackground#3B3633
• quickInputList.focusForeground#B4BDC3
• scrollbar.shadow#3B3633
• scrollbarSlider.activeBackground#655D58
• scrollbarSlider.background#37322F
• scrollbarSlider.hoverBackground#4F4844
• selection.background#444749
• sideBar.background#2D2927
• sideBar.foreground#CAD0D4
• sideBarSectionHeader.background#3B3633
• sideBarSectionHeader.foreground#B4BDC3
• statusBar.background#2D2927
• statusBar.debuggingBackground#2D2927
• statusBar.foreground#CAD0D4
• statusBar.noFolderBackground#2D2927
• statusBarItem.remoteBackground#3B3633
• statusBarItem.remoteForeground#B4BDC3
• tab.activeBackground#221F1D
• tab.activeForeground#B4BDC3
• tab.border#2D2927
• tab.inactiveBackground#3B3633
• tab.inactiveForeground#B4BDC3a0
• terminal.ansiBlack#1C1917
• terminal.ansiBlue#6099C0
• terminal.ansiBrightBlack#403833
• terminal.ansiBrightBlue#61ABDA
• terminal.ansiBrightCyan#65B8C1
• terminal.ansiBrightGreen#8BAE68
• terminal.ansiBrightMagenta#CF86C1
• terminal.ansiBrightRed#E8838F
• terminal.ansiBrightWhite#888F94
• terminal.ansiBrightYellow#D68C67
• terminal.ansiCyan#66A5AD
• terminal.ansiGreen#819B69
• terminal.ansiMagenta#B279A7
• terminal.ansiRed#DE6E7C
• terminal.ansiWhite#B4BDC3
• terminal.ansiYellow#B77E64
• terminalCursor.background#221F1D
• terminalCursor.foreground#C4CACF
• textLink.activeForeground#B279A7d0
• textLink.foreground#B279A7
• widget.shadow#3B3633
• window.activeBorder#B279A7
• window.inactiveBorder#B4BDC3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...