Zenbones Themes

Color themes

• 

  Zenbones Tokyobones Dark Stark

• 

  Zenbones Tokyobones Dark Warm

• 

  Zenbones Tokyobones Light

• 

  Zenbones Tokyobones Light Bright

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#B9BBC3
• activityBar.foreground#333A57
• activityBarBadge.background#5A4A79
• activityBarBadge.foreground#C8C9CF
• badge.background#5A4A79
• badge.foreground#C8C9CF
• button.background#B9BBC3
• button.foreground#333A57
• button.secondaryBackground#C8C9CF
• button.secondaryForeground#5F6B9B
• checkbox.background#B9BBC3
• checkbox.foreground#333A57
• descriptionForeground#333A57
• disabledForeground#333A5780
• editor.background#D6D7DC
• editor.findMatchBackground#8271A4
• editor.findMatchHighlightBackground#B3A9C9
• editor.foreground#333A57
• editor.lineHighlightBackground#CDCED4
• editor.selectionBackground#BBC0D8
• editorBracketHighlight.foreground1#34548C
• editorBracketHighlight.foreground2#34645D
• editorBracketHighlight.foreground3#5A4A79
• editorBracketHighlight.foreground4#34548C
• editorBracketHighlight.foreground5#34645D
• editorBracketHighlight.foreground6#5A4A79
• editorBracketHighlight.unexpectedBracket.foreground#8B4351
• editorCursor.foreground#333A57
• editorError.foreground#8B4351
• editorGroupHeader.tabsBackground#C8C9CF
• editorGutter.addedBackground#A9CEC7
• editorGutter.deletedBackground#DFBEC3
• editorGutter.modifiedBackground#C0C6D8
• editorHint.foreground#5A4A79
• editorHoverWidget.background#BCBEC6
• editorHoverWidget.border#A6A8B3
• editorHoverWidget.foreground#333A57
• editorIndentGuide.activeBackground#888B99a0
• editorIndentGuide.background#888B9950
• editorInfo.foreground#34548C
• editorLineNumber.activeForeground#333A57
• editorLineNumber.foreground#888B99
• editorOverviewRuler.addedForeground#A9CEC7
• editorOverviewRuler.deletedForeground#DFBEC3
• editorOverviewRuler.errorForeground#8B4351
• editorOverviewRuler.findMatchForeground#B3A9C9
• editorOverviewRuler.infoForeground#34548C
• editorOverviewRuler.modifiedForeground#C0C6D8
• editorOverviewRuler.selectionHighlightForeground#BBC0D8
• editorOverviewRuler.warningForeground#8F5E14
• editorRuler.foreground#888B99a0
• editorWarning.foreground#8F5E14
• editorWidget.background#C8C9CF
• editorWidget.border#B9BBC3
• editorWidget.foreground#5F6B9B
• errorForeground#8B4351
• focusBorder#5A4A79
• foreground#333A57
• icon.foreground#333A57a0
• input.background#D6D7DC
• input.foreground#333A57
• input.placeholderForeground#7C7E89
• inputOption.activeBorder#5A4A79
• inputValidation.errorBorder#8B4351
• inputValidation.infoBorder#34548C
• inputValidation.warningBorder#8F5E14
• keybindingLabel.background#B9BBC3
• keybindingLabel.border#BCBEC6
• keybindingLabel.bottomBorder#A6A8B3
• keybindingLabel.foreground#333A57
• list.activeSelectionBackground#A6A8B3
• list.activeSelectionForeground#333A57
• list.highlightForeground#5A4A79
• list.hoverBackground#A6A8B350
• list.inactiveSelectionBackground#A6A8B3a0
• minimap.errorHighlight#8B4351
• minimap.findMatchHighlight#B3A9C9
• minimap.selectionHighlight#BBC0D8
• minimap.warningHighlight#8F5E14
• minimapGutter.addedBackground#A9CEC7
• minimapGutter.deletedBackground#DFBEC3
• minimapGutter.modifiedBackground#C0C6D8
• notificationCenterHeader.background#C8C9CF
• notificationCenterHeader.foreground#5F6B9B
• notificationLink.foreground#5A4A79
• notifications.background#D6D7DC
• notifications.foreground#333A57
• notificationsErrorIcon.foreground#8B4351
• notificationsInfoIcon.foreground#34548C
• notificationsWarningIcon.foreground#8F5E14
• panel.background#D6D7DC
• panel.border#888B99a0
• panelTitle.activeBorder#888B99a0
• panelTitle.activeForeground#333A57
• panelTitle.inactiveForeground#333A57a0
• pickerGroup.border#888B99a0
• pickerGroup.foreground#5F6B9B
• problemsErrorIcon.foreground#8B4351
• problemsInfoIcon.foreground#34548C
• problemsWarningIcon.foreground#8F5E14
• quickInput.background#C8C9CF
• quickInput.foreground#5F6B9B
• quickInputList.focusBackground#B9BBC3
• quickInputList.focusForeground#333A57
• scrollbar.shadow#B9BBC3
• scrollbarSlider.activeBackground#9395A2
• scrollbarSlider.background#BCBEC6
• scrollbarSlider.hoverBackground#A6A8B3
• selection.background#BBC0D8
• sideBar.background#C8C9CF
• sideBar.foreground#5F6B9B
• sideBarSectionHeader.background#B9BBC3
• sideBarSectionHeader.foreground#333A57
• statusBar.background#C8C9CF
• statusBar.debuggingBackground#C8C9CF
• statusBar.foreground#5F6B9B
• statusBar.noFolderBackground#C8C9CF
• statusBarItem.remoteBackground#B9BBC3
• statusBarItem.remoteForeground#333A57
• tab.activeBackground#D6D7DC
• tab.activeForeground#333A57
• tab.border#C8C9CF
• tab.inactiveBackground#B9BBC3
• tab.inactiveForeground#333A57a0
• terminal.ansiBlack#D6D7DC
• terminal.ansiBlue#34548C
• terminal.ansiBrightBlack#ADB0BD
• terminal.ansiBrightBlue#26467A
• terminal.ansiBrightCyan#34645D
• terminal.ansiBrightGreen#26554F
• terminal.ansiBrightMagenta#503875
• terminal.ansiBrightRed#7E3242
• terminal.ansiBrightWhite#56618D
• terminal.ansiBrightYellow#794E0D
• terminal.ansiCyan#176775
• terminal.ansiGreen#34645D
• terminal.ansiMagenta#5A4A79
• terminal.ansiRed#8B4351
• terminal.ansiWhite#333A57
• terminal.ansiYellow#8F5E14
• terminalCursor.background#D6D7DC
• terminalCursor.foreground#333A57
• textLink.activeForeground#5A4A79d0
• textLink.foreground#5A4A79
• widget.shadow#B9BBC3
• window.activeBorder#5A4A79
• window.inactiveBorder#333A57

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...