Zenbones Themes

Color themes

• 

  Zenbones Duckbones Dark Stark

• 

  Zenbones Duckbones Dark Warm

• 

  Zenbones Forestbones Dark

• 

  Zenbones Forestbones Dark Stark

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#3E4850
• activityBar.foreground#E7DCC4
• activityBarBadge.background#D69AB7
• activityBarBadge.foreground#353F46
• badge.background#D69AB7
• badge.foreground#353F46
• button.background#3E4850
• button.foreground#E7DCC4
• button.secondaryBackground#353F46
• button.secondaryForeground#EDE5D4
• checkbox.background#3E4850
• checkbox.foreground#E7DCC4
• descriptionForeground#E7DCC4
• disabledForeground#E7DCC480
• editor.background#2C343A
• editor.findMatchBackground#DFB2C7
• editor.findMatchHighlightBackground#9E5179
• editor.foreground#E7DCC4
• editor.lineHighlightBackground#313A41
• editor.selectionBackground#615B51
• editorBracketHighlight.foreground1#7FBCB4
• editorBracketHighlight.foreground2#A9C181
• editorBracketHighlight.foreground3#D69AB7
• editorBracketHighlight.foreground4#7FBCB4
• editorBracketHighlight.foreground5#A9C181
• editorBracketHighlight.foreground6#D69AB7
• editorBracketHighlight.unexpectedBracket.foreground#E67C7F
• editorCursor.foreground#EBE2CF
• editorError.foreground#E67C7F
• editorGroupHeader.tabsBackground#353F46
• editorGutter.addedBackground#3E482D
• editorGutter.deletedBackground#643839
• editorGutter.modifiedBackground#304946
• editorHint.foreground#D69AB7
• editorHoverWidget.background#3B464E
• editorHoverWidget.border#4E5B65
• editorHoverWidget.foreground#E7DCC4
• editorIndentGuide.activeBackground#667783a0
• editorIndentGuide.background#66778350
• editorInfo.foreground#7FBCB4
• editorLineNumber.activeForeground#E7DCC4
• editorLineNumber.foreground#667783
• editorOverviewRuler.addedForeground#3E482D
• editorOverviewRuler.deletedForeground#643839
• editorOverviewRuler.errorForeground#E67C7F
• editorOverviewRuler.findMatchForeground#9E5179
• editorOverviewRuler.infoForeground#7FBCB4
• editorOverviewRuler.modifiedForeground#304946
• editorOverviewRuler.selectionHighlightForeground#615B51
• editorOverviewRuler.warningForeground#DDBD7F
• editorRuler.foreground#667783a0
• editorWarning.foreground#DDBD7F
• editorWidget.background#353F46
• editorWidget.border#3E4850
• editorWidget.foreground#EDE5D4
• errorForeground#E67C7F
• focusBorder#D69AB7
• foreground#E7DCC4
• icon.foreground#E7DCC4a0
• input.background#2C343A
• input.foreground#E7DCC4
• input.placeholderForeground#6E7B85
• inputOption.activeBorder#D69AB7
• inputValidation.errorBorder#E67C7F
• inputValidation.infoBorder#7FBCB4
• inputValidation.warningBorder#DDBD7F
• keybindingLabel.background#3E4850
• keybindingLabel.border#3B464E
• keybindingLabel.bottomBorder#4E5B65
• keybindingLabel.foreground#E7DCC4
• list.activeSelectionBackground#4E5B65
• list.activeSelectionForeground#E7DCC4
• list.highlightForeground#D69AB7
• list.hoverBackground#4E5B6550
• list.inactiveSelectionBackground#4E5B65a0
• minimap.errorHighlight#E67C7F
• minimap.findMatchHighlight#9E5179
• minimap.selectionHighlight#615B51
• minimap.warningHighlight#DDBD7F
• minimapGutter.addedBackground#3E482D
• minimapGutter.deletedBackground#643839
• minimapGutter.modifiedBackground#304946
• notificationCenterHeader.background#353F46
• notificationCenterHeader.foreground#EDE5D4
• notificationLink.foreground#D69AB7
• notifications.background#2C343A
• notifications.foreground#E7DCC4
• notificationsErrorIcon.foreground#E67C7F
• notificationsInfoIcon.foreground#7FBCB4
• notificationsWarningIcon.foreground#DDBD7F
• panel.background#2C343A
• panel.border#667783a0
• panelTitle.activeBorder#667783a0
• panelTitle.activeForeground#E7DCC4
• panelTitle.inactiveForeground#E7DCC4a0
• pickerGroup.border#667783a0
• pickerGroup.foreground#EDE5D4
• problemsErrorIcon.foreground#E67C7F
• problemsInfoIcon.foreground#7FBCB4
• problemsWarningIcon.foreground#DDBD7F
• quickInput.background#353F46
• quickInput.foreground#EDE5D4
• quickInputList.focusBackground#3E4850
• quickInputList.focusForeground#E7DCC4
• scrollbar.shadow#3E4850
• scrollbarSlider.activeBackground#606F7B
• scrollbarSlider.background#3B464E
• scrollbarSlider.hoverBackground#4E5B65
• selection.background#615B51
• sideBar.background#353F46
• sideBar.foreground#EDE5D4
• sideBarSectionHeader.background#3E4850
• sideBarSectionHeader.foreground#E7DCC4
• statusBar.background#353F46
• statusBar.debuggingBackground#353F46
• statusBar.foreground#EDE5D4
• statusBar.noFolderBackground#353F46
• statusBarItem.remoteBackground#3E4850
• statusBarItem.remoteForeground#E7DCC4
• tab.activeBackground#2C343A
• tab.activeForeground#E7DCC4
• tab.border#353F46
• tab.inactiveBackground#3E4850
• tab.inactiveForeground#E7DCC4a0
• terminal.ansiBlack#2C343A
• terminal.ansiBlue#7FBCB4
• terminal.ansiBrightBlack#45525C
• terminal.ansiBrightBlue#7AC9C0
• terminal.ansiBrightCyan#7DD093
• terminal.ansiBrightGreen#B0CE7B
• terminal.ansiBrightMagenta#E5A7C4
• terminal.ansiBrightRed#ED9294
• terminal.ansiBrightWhite#B2A790
• terminal.ansiBrightYellow#EDC77A
• terminal.ansiCyan#83C193
• terminal.ansiGreen#A9C181
• terminal.ansiMagenta#D69AB7
• terminal.ansiRed#E67C7F
• terminal.ansiWhite#E7DCC4
• terminal.ansiYellow#DDBD7F
• terminalCursor.background#2C343A
• terminalCursor.foreground#EBE2CF
• textLink.activeForeground#D69AB7d0
• textLink.foreground#D69AB7
• widget.shadow#3E4850
• window.activeBorder#D69AB7
• window.inactiveBorder#E7DCC4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...