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#ff8a00
• activityBar.background#0d0d0d
• activityBar.foreground#f8fafc
• activityBar.inactiveForeground#f8fafc80
• activityBarBadge.background#ff8a00
• activityBarBadge.foreground#001018
• badge.background#64748b
• badge.foreground#ffffff
• button.background#ff8a00
• button.foreground#001018
• button.hoverBackground#ff9f2e
• button.secondaryBackground#462c0e
• button.secondaryForeground#f8fafc
• descriptionForeground#f8fafcB5
• dropdown.background#0f0f0f
• dropdown.border#ff8a0065
• dropdown.foreground#f8fafc
• editor.background#070707
• editor.findMatchBackground#fbbf2455
• editor.findMatchHighlightBackground#64748b35
• editor.foreground#f8fafc
• editor.lineHighlightBackground#ff8a0012
• editor.selectionBackground#ff8a0035
• editor.selectionHighlightBackground#64748b22
• editorBracketMatch.border#fbbf24
• editorCursor.foreground#fbbf24
• editorGroup.border#ff8a0028
• editorGroupHeader.tabsBackground#0a0a0a
• editorGutter.addedBackground#64748b
• editorGutter.background#070707
• editorGutter.deletedBackground#ff4d6d
• editorGutter.modifiedBackground#ff8a00
• editorHoverWidget.background#121212
• editorHoverWidget.border#ff8a0080
• editorIndentGuide.activeBackground1#ff8a0080
• editorIndentGuide.background1#f8fafc14
• editorLineNumber.activeForeground#ff8a00
• editorLineNumber.foreground#f8fafc55
• editorSuggestWidget.background#121212
• editorSuggestWidget.border#ff8a0080
• editorSuggestWidget.foreground#f8fafc
• editorSuggestWidget.selectedBackground#462c0e
• editorWhitespace.foreground#f8fafc20
• editorWidget.background#121212
• editorWidget.border#ff8a0080
• errorForeground#ff4d6d
• focusBorder#ff8a00
• foreground#f8fafc
• icon.foreground#f8fafcD0
• input.background#0f0f0f
• input.border#ff8a0065
• input.foreground#f8fafc
• inputOption.activeBorder#ff8a00
• list.activeSelectionBackground#462c0e
• list.activeSelectionForeground#f8fafc
• list.focusOutline#ff8a00
• list.highlightForeground#fbbf24
• list.hoverBackground#ff8a0014
• list.inactiveSelectionBackground#ff8a0020
• menu.background#121212
• menu.border#ff8a0050
• menu.foreground#f8fafc
• menu.selectionBackground#462c0e
• menu.selectionForeground#f8fafc
• menubar.selectionBackground#ff8a0020
• menubar.selectionForeground#f8fafc
• minimap.background#070707
• panel.background#251c11
• panel.border#ff8a0035
• panelTitle.activeBorder#ff8a00
• panelTitle.activeForeground#f8fafc
• panelTitle.inactiveForeground#f8fafc88
• sash.hoverBorder#ff8a00
• scrollbarSlider.activeBackground#ff8a0075
• scrollbarSlider.background#ff8a0030
• scrollbarSlider.hoverBackground#ff8a0055
• sideBar.background#251c11
• sideBar.border#ff8a0035
• sideBar.foreground#f8fafc
• sideBarSectionHeader.background#0e0e0e
• sideBarSectionHeader.foreground#f8fafc
• sideBarTitle.foreground#f8fafc
• statusBar.background#462c0e
• statusBar.border#ff8a0055
• statusBar.foreground#f8fafc
• statusBarItem.hoverBackground#ff8a0028
• statusBarItem.remoteBackground#ff8a00
• statusBarItem.remoteForeground#001018
• tab.activeBackground#201406
• tab.activeBorderTop#ff8a00
• tab.activeForeground#f8fafc
• tab.hoverBackground#ff8a0016
• tab.inactiveBackground#0d0d0d
• tab.inactiveForeground#f8fafcA0
• terminal.ansiCyan#ff8a00
• terminal.ansiMagenta#64748b
• terminal.ansiYellow#fbbf24
• terminal.background#070707
• terminal.foreground#f8fafc
• terminalCursor.foreground#fbbf24
• titleBar.activeBackground#0d0d0d
• titleBar.activeForeground#f8fafc
• titleBar.inactiveBackground#070707
• titleBar.inactiveForeground#f8fafc80
• window.activeBorder#ff8a00
• window.inactiveBorder#64748b60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).