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#2A2D3F
• activityBar.foreground#EBEFC0
• activityBarBadge.background#795CCC
• activityBarBadge.foreground#202331
• badge.background#795CCC
• badge.foreground#202331
• button.background#2A2D3F
• button.foreground#EBEFC0
• button.secondaryBackground#202331
• button.secondaryForeground#F0F5C4
• checkbox.background#2A2D3F
• checkbox.foreground#EBEFC0
• descriptionForeground#EBEFC0
• disabledForeground#EBEFC080
• editor.background#151722
• editor.findMatchBackground#A190DF
• editor.findMatchHighlightBackground#55369F
• editor.foreground#EBEFC0
• editor.lineHighlightBackground#1C1F2C
• editor.selectionBackground#3D3F33
• 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#202331
• editorGutter.addedBackground#1A2C22
• editorGutter.deletedBackground#3A2120
• editorGutter.modifiedBackground#1B2A31
• editorHint.foreground#795CCC
• editorHoverWidget.background#262939
• editorHoverWidget.border#3C4158
• editorHoverWidget.foreground#EBEFC0
• editorIndentGuide.activeBackground#575D7Ca0
• editorIndentGuide.background#575D7C50
• editorInfo.foreground#00A3CB
• editorLineNumber.activeForeground#EBEFC0
• editorLineNumber.foreground#575D7C
• editorOverviewRuler.addedForeground#1A2C22
• editorOverviewRuler.deletedForeground#3A2120
• editorOverviewRuler.errorForeground#E03600
• editorOverviewRuler.findMatchForeground#55369F
• editorOverviewRuler.infoForeground#00A3CB
• editorOverviewRuler.modifiedForeground#1B2A31
• editorOverviewRuler.selectionHighlightForeground#3D3F33
• editorOverviewRuler.warningForeground#E39500
• editorRuler.foreground#575D7Ca0
• editorWarning.foreground#E39500
• editorWidget.background#202331
• editorWidget.border#2A2D3F
• editorWidget.foreground#F0F5C4
• errorForeground#E03600
• focusBorder#795CCC
• foreground#EBEFC0
• icon.foreground#EBEFC0a0
• input.background#151722
• input.foreground#EBEFC0
• input.placeholderForeground#60647E
• inputOption.activeBorder#795CCC
• inputValidation.errorBorder#E03600
• inputValidation.infoBorder#00A3CB
• inputValidation.warningBorder#E39500
• keybindingLabel.background#2A2D3F
• keybindingLabel.border#262939
• keybindingLabel.bottomBorder#3C4158
• keybindingLabel.foreground#EBEFC0
• list.activeSelectionBackground#3C4158
• list.activeSelectionForeground#EBEFC0
• list.highlightForeground#795CCC
• list.hoverBackground#3C415850
• list.inactiveSelectionBackground#3C4158a0
• minimap.errorHighlight#E03600
• minimap.findMatchHighlight#55369F
• minimap.selectionHighlight#3D3F33
• minimap.warningHighlight#E39500
• minimapGutter.addedBackground#1A2C22
• minimapGutter.deletedBackground#3A2120
• minimapGutter.modifiedBackground#1B2A31
• notificationCenterHeader.background#202331
• notificationCenterHeader.foreground#F0F5C4
• notificationLink.foreground#795CCC
• notifications.background#151722
• notifications.foreground#EBEFC0
• notificationsErrorIcon.foreground#E03600
• notificationsInfoIcon.foreground#00A3CB
• notificationsWarningIcon.foreground#E39500
• panel.background#151722
• panel.border#575D7Ca0
• panelTitle.activeBorder#575D7Ca0
• panelTitle.activeForeground#EBEFC0
• panelTitle.inactiveForeground#EBEFC0a0
• pickerGroup.border#575D7Ca0
• pickerGroup.foreground#F0F5C4
• problemsErrorIcon.foreground#E03600
• problemsInfoIcon.foreground#00A3CB
• problemsWarningIcon.foreground#E39500
• quickInput.background#202331
• quickInput.foreground#F0F5C4
• quickInputList.focusBackground#2A2D3F
• quickInputList.focusForeground#EBEFC0
• scrollbar.shadow#2A2D3F
• scrollbarSlider.activeBackground#505673
• scrollbarSlider.background#262939
• scrollbarSlider.hoverBackground#3C4158
• selection.background#3D3F33
• sideBar.background#202331
• sideBar.foreground#F0F5C4
• sideBarSectionHeader.background#2A2D3F
• sideBarSectionHeader.foreground#EBEFC0
• statusBar.background#202331
• statusBar.debuggingBackground#202331
• statusBar.foreground#F0F5C4
• statusBar.noFolderBackground#202331
• statusBarItem.remoteBackground#2A2D3F
• statusBarItem.remoteForeground#EBEFC0
• tab.activeBackground#151722
• tab.activeForeground#EBEFC0
• tab.border#202331
• tab.inactiveBackground#2A2D3F
• 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#151722
• terminalCursor.foreground#EDF2C2
• textLink.activeForeground#795CCCd0
• textLink.foreground#795CCC
• widget.shadow#2A2D3F
• 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...