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#232738
• activityBar.foreground#EBEFC0
• activityBarBadge.background#795CCC
• activityBarBadge.foreground#1A1D2B
• badge.background#795CCC
• badge.foreground#1A1D2B
• button.background#232738
• button.foreground#EBEFC0
• button.secondaryBackground#1A1D2B
• button.secondaryForeground#F0F5C4
• checkbox.background#232738
• checkbox.foreground#EBEFC0
• descriptionForeground#EBEFC0
• disabledForeground#EBEFC080
• editor.background#0E101A
• editor.findMatchBackground#9A87DC
• editor.findMatchHighlightBackground#4D3191
• editor.foreground#EBEFC0
• editor.lineHighlightBackground#161926
• editor.selectionBackground#37382D
• editorBracketHighlight.foreground1#00A3CB
• editorBracketHighlight.foreground2#5DCD97
• editorBracketHighlight.foreground3#795CCC
• editorBracketHighlight.foreground4#00A3CB
• editorBracketHighlight.foreground5#5DCD97
• editorBracketHighlight.foreground6#795CCC
• editorBracketHighlight.unexpectedBracket.foreground#E03600
• editorCursor.foreground#EDF2C2
• editorError.foreground#E03600
• editorGroupHeader.tabsBackground#1A1D2B
• editorGutter.addedBackground#15251C
• editorGutter.deletedBackground#311C1A
• editorGutter.modifiedBackground#17232A
• editorHint.foreground#795CCC
• editorHoverWidget.background#222536
• editorHoverWidget.border#383C55
• editorHoverWidget.foreground#EBEFC0
• editorIndentGuide.activeBackground#51587Aa0
• editorIndentGuide.background#51587A50
• editorInfo.foreground#00A3CB
• editorLineNumber.activeForeground#EBEFC0
• editorLineNumber.foreground#51587A
• editorOverviewRuler.addedForeground#15251C
• editorOverviewRuler.deletedForeground#311C1A
• editorOverviewRuler.errorForeground#E03600
• editorOverviewRuler.findMatchForeground#4D3191
• editorOverviewRuler.infoForeground#00A3CB
• editorOverviewRuler.modifiedForeground#17232A
• editorOverviewRuler.selectionHighlightForeground#37382D
• editorOverviewRuler.warningForeground#E39500
• editorRuler.foreground#51587Aa0
• editorWarning.foreground#E39500
• editorWidget.background#1A1D2B
• editorWidget.border#232738
• editorWidget.foreground#F0F5C4
• errorForeground#E03600
• focusBorder#795CCC
• foreground#EBEFC0
• icon.foreground#EBEFC0a0
• input.background#0E101A
• input.foreground#EBEFC0
• input.placeholderForeground#5A5F7B
• inputOption.activeBorder#795CCC
• inputValidation.errorBorder#E03600
• inputValidation.infoBorder#00A3CB
• inputValidation.warningBorder#E39500
• keybindingLabel.background#232738
• keybindingLabel.border#222536
• keybindingLabel.bottomBorder#383C55
• keybindingLabel.foreground#EBEFC0
• list.activeSelectionBackground#383C55
• list.activeSelectionForeground#EBEFC0
• list.highlightForeground#795CCC
• list.hoverBackground#383C5550
• list.inactiveSelectionBackground#383C55a0
• minimap.errorHighlight#E03600
• minimap.findMatchHighlight#4D3191
• minimap.selectionHighlight#37382D
• minimap.warningHighlight#E39500
• minimapGutter.addedBackground#15251C
• minimapGutter.deletedBackground#311C1A
• minimapGutter.modifiedBackground#17232A
• notificationCenterHeader.background#1A1D2B
• notificationCenterHeader.foreground#F0F5C4
• notificationLink.foreground#795CCC
• notifications.background#0E101A
• notifications.foreground#EBEFC0
• notificationsErrorIcon.foreground#E03600
• notificationsInfoIcon.foreground#00A3CB
• notificationsWarningIcon.foreground#E39500
• panel.background#0E101A
• panel.border#51587Aa0
• panelTitle.activeBorder#51587Aa0
• panelTitle.activeForeground#EBEFC0
• panelTitle.inactiveForeground#EBEFC0a0
• pickerGroup.border#51587Aa0
• pickerGroup.foreground#F0F5C4
• problemsErrorIcon.foreground#E03600
• problemsInfoIcon.foreground#00A3CB
• problemsWarningIcon.foreground#E39500
• quickInput.background#1A1D2B
• quickInput.foreground#F0F5C4
• quickInputList.focusBackground#232738
• quickInputList.focusForeground#EBEFC0
• scrollbar.shadow#232738
• scrollbarSlider.activeBackground#4B5170
• scrollbarSlider.background#222536
• scrollbarSlider.hoverBackground#383C55
• selection.background#37382D
• sideBar.background#1A1D2B
• sideBar.foreground#F0F5C4
• sideBarSectionHeader.background#232738
• sideBarSectionHeader.foreground#EBEFC0
• statusBar.background#1A1D2B
• statusBar.debuggingBackground#1A1D2B
• statusBar.foreground#F0F5C4
• statusBar.noFolderBackground#1A1D2B
• statusBarItem.remoteBackground#232738
• statusBarItem.remoteForeground#EBEFC0
• tab.activeBackground#0E101A
• tab.activeForeground#EBEFC0
• tab.border#1A1D2B
• tab.inactiveBackground#232738
• tab.inactiveForeground#EBEFC0a0
• terminal.ansiBlack#0E101A
• terminal.ansiBlue#00A3CB
• terminal.ansiBrightBlack#2B2F46
• terminal.ansiBrightBlue#00B4E0
• terminal.ansiBrightCyan#00B4E0
• terminal.ansiBrightGreen#58DB9E
• terminal.ansiBrightMagenta#B3A1E6
• terminal.ansiBrightRed#FF4821
• terminal.ansiBrightWhite#B3B692
• terminal.ansiBrightYellow#F6A100
• terminal.ansiCyan#00A3CB
• terminal.ansiGreen#5DCD97
• terminal.ansiMagenta#795CCC
• terminal.ansiRed#E03600
• terminal.ansiWhite#EBEFC0
• terminal.ansiYellow#E39500
• terminalCursor.background#0E101A
• terminalCursor.foreground#EDF2C2
• textLink.activeForeground#795CCCd0
• textLink.foreground#795CCC
• widget.shadow#232738
• window.activeBorder#795CCC
• window.inactiveBorder#EBEFC0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...