Zenbones Themes

Color themes

• 

  Zenbones Nordbones Dark

• 

  Zenbones Nordbones Dark Stark

• 

  Zenbones Nordbones Dark Warm

• 

  Zenbones Rosebones 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#312E43
• activityBar.foreground#E1D4D4
• activityBarBadge.background#C4A7E7
• activityBarBadge.foreground#242232
• badge.background#C4A7E7
• badge.foreground#242232
• button.background#312E43
• button.foreground#E1D4D4
• button.secondaryBackground#242232
• button.secondaryForeground#E9E0E0
• checkbox.background#312E43
• checkbox.foreground#E1D4D4
• descriptionForeground#E1D4D4
• disabledForeground#E1D4D480
• editor.background#1A1825
• editor.findMatchBackground#B48DE0
• editor.findMatchHighlightBackground#673592
• editor.foreground#E1D4D4
• editor.lineHighlightBackground#222030
• editor.selectionBackground#523A39
• editorBracketHighlight.foreground1#9CCFD8
• editorBracketHighlight.foreground2#317490
• editorBracketHighlight.foreground3#C4A7E7
• editorBracketHighlight.foreground4#9CCFD8
• editorBracketHighlight.foreground5#317490
• editorBracketHighlight.foreground6#C4A7E7
• editorBracketHighlight.unexpectedBracket.foreground#EB7193
• editorCursor.foreground#E7DDDD
• editorError.foreground#EB7193
• editorGroupHeader.tabsBackground#242232
• editorGutter.addedBackground#1D2C34
• editorGutter.deletedBackground#3D2229
• editorGutter.modifiedBackground#1C2D2F
• editorHint.foreground#C4A7E7
• editorHoverWidget.background#2D2A3D
• editorHoverWidget.border#45415D
• editorHoverWidget.foreground#E1D4D4
• editorIndentGuide.activeBackground#625D7Fa0
• editorIndentGuide.background#625D7F50
• editorInfo.foreground#9CCFD8
• editorLineNumber.activeForeground#E1D4D4
• editorLineNumber.foreground#625D7F
• editorOverviewRuler.addedForeground#1D2C34
• editorOverviewRuler.deletedForeground#3D2229
• editorOverviewRuler.errorForeground#EB7193
• editorOverviewRuler.findMatchForeground#673592
• editorOverviewRuler.infoForeground#9CCFD8
• editorOverviewRuler.modifiedForeground#1C2D2F
• editorOverviewRuler.selectionHighlightForeground#523A39
• editorOverviewRuler.warningForeground#F6C074
• editorRuler.foreground#625D7Fa0
• editorWarning.foreground#F6C074
• editorWidget.background#242232
• editorWidget.border#312E43
• editorWidget.foreground#E9E0E0
• errorForeground#EB7193
• focusBorder#C4A7E7
• foreground#E1D4D4
• icon.foreground#E1D4D4a0
• input.background#1A1825
• input.foreground#E1D4D4
• input.placeholderForeground#69657E
• inputOption.activeBorder#C4A7E7
• inputValidation.errorBorder#EB7193
• inputValidation.infoBorder#9CCFD8
• inputValidation.warningBorder#F6C074
• keybindingLabel.background#312E43
• keybindingLabel.border#2D2A3D
• keybindingLabel.bottomBorder#45415D
• keybindingLabel.foreground#E1D4D4
• list.activeSelectionBackground#45415D
• list.activeSelectionForeground#E1D4D4
• list.highlightForeground#C4A7E7
• list.hoverBackground#45415D50
• list.inactiveSelectionBackground#45415Da0
• minimap.errorHighlight#EB7193
• minimap.findMatchHighlight#673592
• minimap.selectionHighlight#523A39
• minimap.warningHighlight#F6C074
• minimapGutter.addedBackground#1D2C34
• minimapGutter.deletedBackground#3D2229
• minimapGutter.modifiedBackground#1C2D2F
• notificationCenterHeader.background#242232
• notificationCenterHeader.foreground#E9E0E0
• notificationLink.foreground#C4A7E7
• notifications.background#1A1825
• notifications.foreground#E1D4D4
• notificationsErrorIcon.foreground#EB7193
• notificationsInfoIcon.foreground#9CCFD8
• notificationsWarningIcon.foreground#F6C074
• panel.background#1A1825
• panel.border#625D7Fa0
• panelTitle.activeBorder#625D7Fa0
• panelTitle.activeForeground#E1D4D4
• panelTitle.inactiveForeground#E1D4D4a0
• pickerGroup.border#625D7Fa0
• pickerGroup.foreground#E9E0E0
• problemsErrorIcon.foreground#EB7193
• problemsInfoIcon.foreground#9CCFD8
• problemsWarningIcon.foreground#F6C074
• quickInput.background#242232
• quickInput.foreground#E9E0E0
• quickInputList.focusBackground#312E43
• quickInputList.focusForeground#E1D4D4
• scrollbar.shadow#312E43
• scrollbarSlider.activeBackground#5A5578
• scrollbarSlider.background#2D2A3D
• scrollbarSlider.hoverBackground#45415D
• selection.background#523A39
• sideBar.background#242232
• sideBar.foreground#E9E0E0
• sideBarSectionHeader.background#312E43
• sideBarSectionHeader.foreground#E1D4D4
• statusBar.background#242232
• statusBar.debuggingBackground#242232
• statusBar.foreground#E9E0E0
• statusBar.noFolderBackground#242232
• statusBarItem.remoteBackground#312E43
• statusBarItem.remoteForeground#E1D4D4
• tab.activeBackground#1A1825
• tab.activeForeground#E1D4D4
• tab.border#242232
• tab.inactiveBackground#312E43
• tab.inactiveForeground#E1D4D4a0
• terminal.ansiBlack#1A1825
• terminal.ansiBlue#9CCFD8
• terminal.ansiBrightBlack#3A3651
• terminal.ansiBrightBlue#94DAE6
• terminal.ansiBrightCyan#94DAE6
• terminal.ansiBrightGreen#358DAF
• terminal.ansiBrightMagenta#CEB3EF
• terminal.ansiBrightRed#F289A4
• terminal.ansiBrightWhite#BF9B99
• terminal.ansiBrightYellow#F9CA8E
• terminal.ansiCyan#9CCFD8
• terminal.ansiGreen#317490
• terminal.ansiMagenta#C4A7E7
• terminal.ansiRed#EB7193
• terminal.ansiWhite#E1D4D4
• terminal.ansiYellow#F6C074
• terminalCursor.background#1A1825
• terminalCursor.foreground#E7DDDD
• textLink.activeForeground#C4A7E7d0
• textLink.foreground#C4A7E7
• widget.shadow#312E43
• window.activeBorder#C4A7E7
• window.inactiveBorder#E1D4D4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...