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#BEC0CB
• activityBar.foreground#333A57
• activityBarBadge.background#5A4A79
• activityBarBadge.foreground#D0D1D9
• badge.background#5A4A79
• badge.foreground#D0D1D9
• button.background#BEC0CB
• button.foreground#333A57
• button.secondaryBackground#D0D1D9
• button.secondaryForeground#5F6B9B
• checkbox.background#BEC0CB
• checkbox.foreground#333A57
• descriptionForeground#333A57
• disabledForeground#333A5780
• editor.background#DEDFE5
• editor.findMatchBackground#8979AA
• editor.findMatchHighlightBackground#BAB2CE
• editor.foreground#333A57
• editor.lineHighlightBackground#D5D7DE
• editor.selectionBackground#C4C8DD
• 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#D0D1D9
• editorGutter.addedBackground#B0D7D0
• editorGutter.deletedBackground#E4C8CC
• editorGutter.modifiedBackground#C9CFDE
• editorHint.foreground#5A4A79
• editorHoverWidget.background#C4C6D0
• editorHoverWidget.border#AAADBC
• editorHoverWidget.foreground#333A57
• editorIndentGuide.activeBackground#8C90A3a0
• editorIndentGuide.background#8C90A350
• editorInfo.foreground#34548C
• editorLineNumber.activeForeground#333A57
• editorLineNumber.foreground#8C90A3
• editorOverviewRuler.addedForeground#B0D7D0
• editorOverviewRuler.deletedForeground#E4C8CC
• editorOverviewRuler.errorForeground#8B4351
• editorOverviewRuler.findMatchForeground#BAB2CE
• editorOverviewRuler.infoForeground#34548C
• editorOverviewRuler.modifiedForeground#C9CFDE
• editorOverviewRuler.selectionHighlightForeground#C4C8DD
• editorOverviewRuler.warningForeground#8F5E14
• editorRuler.foreground#8C90A3a0
• editorWarning.foreground#8F5E14
• editorWidget.background#D0D1D9
• editorWidget.border#BEC0CB
• editorWidget.foreground#5F6B9B
• errorForeground#8B4351
• focusBorder#5A4A79
• foreground#333A57
• icon.foreground#333A57a0
• input.background#DEDFE5
• input.foreground#333A57
• input.placeholderForeground#7F8393
• inputOption.activeBorder#5A4A79
• inputValidation.errorBorder#8B4351
• inputValidation.infoBorder#34548C
• inputValidation.warningBorder#8F5E14
• keybindingLabel.background#BEC0CB
• keybindingLabel.border#C4C6D0
• keybindingLabel.bottomBorder#AAADBC
• keybindingLabel.foreground#333A57
• list.activeSelectionBackground#AAADBC
• list.activeSelectionForeground#333A57
• list.highlightForeground#5A4A79
• list.hoverBackground#AAADBC50
• list.inactiveSelectionBackground#AAADBCa0
• minimap.errorHighlight#8B4351
• minimap.findMatchHighlight#BAB2CE
• minimap.selectionHighlight#C4C8DD
• minimap.warningHighlight#8F5E14
• minimapGutter.addedBackground#B0D7D0
• minimapGutter.deletedBackground#E4C8CC
• minimapGutter.modifiedBackground#C9CFDE
• notificationCenterHeader.background#D0D1D9
• notificationCenterHeader.foreground#5F6B9B
• notificationLink.foreground#5A4A79
• notifications.background#DEDFE5
• notifications.foreground#333A57
• notificationsErrorIcon.foreground#8B4351
• notificationsInfoIcon.foreground#34548C
• notificationsWarningIcon.foreground#8F5E14
• panel.background#DEDFE5
• panel.border#8C90A3a0
• panelTitle.activeBorder#8C90A3a0
• panelTitle.activeForeground#333A57
• panelTitle.inactiveForeground#333A57a0
• pickerGroup.border#8C90A3a0
• pickerGroup.foreground#5F6B9B
• problemsErrorIcon.foreground#8B4351
• problemsInfoIcon.foreground#34548C
• problemsWarningIcon.foreground#8F5E14
• quickInput.background#D0D1D9
• quickInput.foreground#5F6B9B
• quickInputList.focusBackground#BEC0CB
• quickInputList.focusForeground#333A57
• scrollbar.shadow#BEC0CB
• scrollbarSlider.activeBackground#979BAC
• scrollbarSlider.background#C4C6D0
• scrollbarSlider.hoverBackground#AAADBC
• selection.background#C4C8DD
• sideBar.background#D0D1D9
• sideBar.foreground#5F6B9B
• sideBarSectionHeader.background#BEC0CB
• sideBarSectionHeader.foreground#333A57
• statusBar.background#D0D1D9
• statusBar.debuggingBackground#D0D1D9
• statusBar.foreground#5F6B9B
• statusBar.noFolderBackground#D0D1D9
• statusBarItem.remoteBackground#BEC0CB
• statusBarItem.remoteForeground#333A57
• tab.activeBackground#DEDFE5
• tab.activeForeground#333A57
• tab.border#D0D1D9
• tab.inactiveBackground#BEC0CB
• 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#DEDFE5
• terminalCursor.foreground#333A57
• textLink.activeForeground#5A4A79d0
• textLink.foreground#5A4A79
• widget.shadow#BEC0CB
• 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...