Haho Vs Code Premium

Color themes

• 

  Haho Aqua Dream

• 

  Haho Arctic Ice

• 

  Haho Candy Pop

• 

  Haho Cyberpunk Gold

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#22d3ee
• activityBar.background#05151e
• activityBar.foreground#ecfeff
• activityBar.inactiveForeground#ecfeff80
• activityBarBadge.background#22d3ee
• activityBarBadge.foreground#001018
• badge.background#3b82f6
• badge.foreground#ffffff
• button.background#22d3ee
• button.foreground#001018
• button.hoverBackground#4adbf1
• button.secondaryBackground#0d4250
• button.secondaryForeground#ecfeff
• descriptionForeground#ecfeffB5
• dropdown.background#061620
• dropdown.border#22d3ee65
• dropdown.foreground#ecfeff
• editor.background#031018
• editor.findMatchBackground#99f6e455
• editor.findMatchHighlightBackground#3b82f635
• editor.foreground#ecfeff
• editor.lineHighlightBackground#22d3ee12
• editor.selectionBackground#22d3ee35
• editor.selectionHighlightBackground#3b82f622
• editorBracketMatch.border#99f6e4
• editorCursor.foreground#99f6e4
• editorGroup.border#22d3ee28
• editorGroupHeader.tabsBackground#04121b
• editorGutter.addedBackground#3b82f6
• editorGutter.background#031018
• editorGutter.deletedBackground#ff4d6d
• editorGutter.modifiedBackground#22d3ee
• editorHoverWidget.background#071923
• editorHoverWidget.border#22d3ee80
• editorIndentGuide.activeBackground1#22d3ee80
• editorIndentGuide.background1#ecfeff14
• editorLineNumber.activeForeground#22d3ee
• editorLineNumber.foreground#ecfeff55
• editorSuggestWidget.background#071923
• editorSuggestWidget.border#22d3ee80
• editorSuggestWidget.foreground#ecfeff
• editorSuggestWidget.selectedBackground#0d4250
• editorWhitespace.foreground#ecfeff20
• editorWidget.background#071923
• editorWidget.border#22d3ee80
• errorForeground#ff4d6d
• focusBorder#22d3ee
• foreground#ecfeff
• icon.foreground#ecfeffD0
• input.background#061620
• input.border#22d3ee65
• input.foreground#ecfeff
• inputOption.activeBorder#22d3ee
• list.activeSelectionBackground#0d4250
• list.activeSelectionForeground#ecfeff
• list.focusOutline#22d3ee
• list.highlightForeground#99f6e4
• list.hoverBackground#22d3ee14
• list.inactiveSelectionBackground#22d3ee20
• menu.background#071923
• menu.border#22d3ee50
• menu.foreground#ecfeff
• menu.selectionBackground#0d4250
• menu.selectionForeground#ecfeff
• menubar.selectionBackground#22d3ee20
• menubar.selectionForeground#ecfeff
• minimap.background#031018
• panel.background#092833
• panel.border#22d3ee35
• panelTitle.activeBorder#22d3ee
• panelTitle.activeForeground#ecfeff
• panelTitle.inactiveForeground#ecfeff88
• sash.hoverBorder#22d3ee
• scrollbarSlider.activeBackground#22d3ee75
• scrollbarSlider.background#22d3ee30
• scrollbarSlider.hoverBackground#22d3ee55
• sideBar.background#092833
• sideBar.border#22d3ee35
• sideBar.foreground#ecfeff
• sideBarSectionHeader.background#06161f
• sideBarSectionHeader.foreground#ecfeff
• sideBarTitle.foreground#ecfeff
• statusBar.background#0d4250
• statusBar.border#22d3ee55
• statusBar.foreground#ecfeff
• statusBarItem.hoverBackground#22d3ee28
• statusBarItem.remoteBackground#22d3ee
• statusBarItem.remoteForeground#001018
• tab.activeBackground#06242d
• tab.activeBorderTop#22d3ee
• tab.activeForeground#ecfeff
• tab.hoverBackground#22d3ee16
• tab.inactiveBackground#05151e
• tab.inactiveForeground#ecfeffA0
• terminal.ansiCyan#22d3ee
• terminal.ansiMagenta#3b82f6
• terminal.ansiYellow#99f6e4
• terminal.background#031018
• terminal.foreground#ecfeff
• terminalCursor.foreground#99f6e4
• titleBar.activeBackground#05151e
• titleBar.activeForeground#ecfeff
• titleBar.inactiveBackground#031018
• titleBar.inactiveForeground#ecfeff80
• window.activeBorder#22d3ee
• window.inactiveBorder#3b82f660

tokenColors

TextMate scopes and font styles (syntax highlighting rules).