Haho Vs Code Premium

Color themes

• 

  Haho Dracula Neon

• 

  Haho Emerald Matrix

• 

  Haho Forest Glow

• 

  Haho Graphite Orange

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.activeBorder#bd93f9
• activityBar.background#110f1c
• activityBar.foreground#f8f8f2
• activityBar.inactiveForeground#f8f8f280
• activityBarBadge.background#bd93f9
• activityBarBadge.foreground#001018
• badge.background#50fa7b
• badge.foreground#ffffff
• button.background#bd93f9
• button.foreground#001018
• button.hoverBackground#c9a6fa
• button.secondaryBackground#3a2f52
• button.secondaryForeground#f8f8f2
• descriptionForeground#f8f8f2B5
• dropdown.background#12101f
• dropdown.border#bd93f965
• dropdown.foreground#f8f8f2
• editor.background#0b0a14
• editor.findMatchBackground#ff79c655
• editor.findMatchHighlightBackground#50fa7b35
• editor.foreground#f8f8f2
• editor.lineHighlightBackground#bd93f912
• editor.selectionBackground#bd93f935
• editor.selectionHighlightBackground#50fa7b22
• editorBracketMatch.border#ff79c6
• editorCursor.foreground#ff79c6
• editorGroup.border#bd93f928
• editorGroupHeader.tabsBackground#0e0c18
• editorGutter.addedBackground#50fa7b
• editorGutter.background#0b0a14
• editorGutter.deletedBackground#ff4d6d
• editorGutter.modifiedBackground#bd93f9
• editorHoverWidget.background#151323
• editorHoverWidget.border#bd93f980
• editorIndentGuide.activeBackground1#bd93f980
• editorIndentGuide.background1#f8f8f214
• editorLineNumber.activeForeground#bd93f9
• editorLineNumber.foreground#f8f8f255
• editorSuggestWidget.background#151323
• editorSuggestWidget.border#bd93f980
• editorSuggestWidget.foreground#f8f8f2
• editorSuggestWidget.selectedBackground#3a2f52
• editorWhitespace.foreground#f8f8f220
• editorWidget.background#151323
• editorWidget.border#bd93f980
• errorForeground#ff4d6d
• focusBorder#bd93f9
• foreground#f8f8f2
• icon.foreground#f8f8f2D0
• input.background#12101f
• input.border#bd93f965
• input.foreground#f8f8f2
• inputOption.activeBorder#bd93f9
• list.activeSelectionBackground#3a2f52
• list.activeSelectionForeground#f8f8f2
• list.focusOutline#bd93f9
• list.highlightForeground#ff79c6
• list.hoverBackground#bd93f914
• list.inactiveSelectionBackground#bd93f920
• menu.background#151323
• menu.border#bd93f950
• menu.foreground#f8f8f2
• menu.selectionBackground#3a2f52
• menu.selectionForeground#f8f8f2
• menubar.selectionBackground#bd93f920
• menubar.selectionForeground#f8f8f2
• minimap.background#0b0a14
• panel.background#221d34
• panel.border#bd93f935
• panelTitle.activeBorder#bd93f9
• panelTitle.activeForeground#f8f8f2
• panelTitle.inactiveForeground#f8f8f288
• sash.hoverBorder#bd93f9
• scrollbarSlider.activeBackground#bd93f975
• scrollbarSlider.background#bd93f930
• scrollbarSlider.hoverBackground#bd93f955
• sideBar.background#221d34
• sideBar.border#bd93f935
• sideBar.foreground#f8f8f2
• sideBarSectionHeader.background#12101e
• sideBarSectionHeader.foreground#f8f8f2
• sideBarTitle.foreground#f8f8f2
• statusBar.background#3a2f52
• statusBar.border#bd93f955
• statusBar.foreground#f8f8f2
• statusBarItem.hoverBackground#bd93f928
• statusBarItem.remoteBackground#bd93f9
• statusBarItem.remoteForeground#001018
• tab.activeBackground#1d182b
• tab.activeBorderTop#bd93f9
• tab.activeForeground#f8f8f2
• tab.hoverBackground#bd93f916
• tab.inactiveBackground#110f1c
• tab.inactiveForeground#f8f8f2A0
• terminal.ansiCyan#bd93f9
• terminal.ansiMagenta#50fa7b
• terminal.ansiYellow#ff79c6
• terminal.background#0b0a14
• terminal.foreground#f8f8f2
• terminalCursor.foreground#ff79c6
• titleBar.activeBackground#110f1c
• titleBar.activeForeground#f8f8f2
• titleBar.inactiveBackground#0b0a14
• titleBar.inactiveForeground#f8f8f280
• window.activeBorder#bd93f9
• window.inactiveBorder#50fa7b60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).