Haho Vs Code Premium

Color themes

• 

  Haho Ice Violet

• 

  Haho Lava Dark

• 

  Haho Midnight Sakura

• 

  Haho Mono Lux

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#67e8f9
• activityBar.background#090e1c
• activityBar.foreground#f4fbff
• activityBar.inactiveForeground#f4fbff80
• activityBarBadge.background#67e8f9
• activityBarBadge.foreground#001018
• badge.background#a78bfa
• badge.foreground#ffffff
• button.background#67e8f9
• button.foreground#001018
• button.hoverBackground#82ecfa
• button.secondaryBackground#1f4050
• button.secondaryForeground#f4fbff
• descriptionForeground#f4fbffB5
• dropdown.background#0a0f1e
• dropdown.border#67e8f965
• dropdown.foreground#f4fbff
• editor.background#060b18
• editor.findMatchBackground#ffffff55
• editor.findMatchHighlightBackground#a78bfa35
• editor.foreground#f4fbff
• editor.lineHighlightBackground#67e8f912
• editor.selectionBackground#67e8f935
• editor.selectionHighlightBackground#a78bfa22
• editorBracketMatch.border#ffffff
• editorCursor.foreground#ffffff
• editorGroup.border#67e8f928
• editorGroupHeader.tabsBackground#070c1a
• editorGutter.addedBackground#a78bfa
• editorGutter.background#060b18
• editorGutter.deletedBackground#ff4d6d
• editorGutter.modifiedBackground#67e8f9
• editorHoverWidget.background#0b1020
• editorHoverWidget.border#67e8f980
• editorIndentGuide.activeBackground1#67e8f980
• editorIndentGuide.background1#f4fbff14
• editorLineNumber.activeForeground#67e8f9
• editorLineNumber.foreground#f4fbff55
• editorSuggestWidget.background#0b1020
• editorSuggestWidget.border#67e8f980
• editorSuggestWidget.foreground#f4fbff
• editorSuggestWidget.selectedBackground#1f4050
• editorWhitespace.foreground#f4fbff20
• editorWidget.background#0b1020
• editorWidget.border#67e8f980
• errorForeground#ff4d6d
• focusBorder#67e8f9
• foreground#f4fbff
• icon.foreground#f4fbffD0
• input.background#0a0f1e
• input.border#67e8f965
• input.foreground#f4fbff
• inputOption.activeBorder#67e8f9
• list.activeSelectionBackground#1f4050
• list.activeSelectionForeground#f4fbff
• list.focusOutline#67e8f9
• list.highlightForeground#ffffff
• list.hoverBackground#67e8f914
• list.inactiveSelectionBackground#67e8f920
• menu.background#0b1020
• menu.border#67e8f950
• menu.foreground#f4fbff
• menu.selectionBackground#1f4050
• menu.selectionForeground#f4fbff
• menubar.selectionBackground#67e8f920
• menubar.selectionForeground#f4fbff
• minimap.background#060b18
• panel.background#122131
• panel.border#67e8f935
• panelTitle.activeBorder#67e8f9
• panelTitle.activeForeground#f4fbff
• panelTitle.inactiveForeground#f4fbff88
• sash.hoverBorder#67e8f9
• scrollbarSlider.activeBackground#67e8f975
• scrollbarSlider.background#67e8f930
• scrollbarSlider.hoverBackground#67e8f955
• sideBar.background#122131
• sideBar.border#67e8f935
• sideBar.foreground#f4fbff
• sideBarSectionHeader.background#090e1d
• sideBarSectionHeader.foreground#f4fbff
• sideBarTitle.foreground#f4fbff
• statusBar.background#1f4050
• statusBar.border#67e8f955
• statusBar.foreground#f4fbff
• statusBarItem.hoverBackground#67e8f928
• statusBarItem.remoteBackground#67e8f9
• statusBarItem.remoteForeground#001018
• tab.activeBackground#10212f
• tab.activeBorderTop#67e8f9
• tab.activeForeground#f4fbff
• tab.hoverBackground#67e8f916
• tab.inactiveBackground#090e1c
• tab.inactiveForeground#f4fbffA0
• terminal.ansiCyan#67e8f9
• terminal.ansiMagenta#a78bfa
• terminal.ansiYellow#ffffff
• terminal.background#060b18
• terminal.foreground#f4fbff
• terminalCursor.foreground#ffffff
• titleBar.activeBackground#090e1c
• titleBar.activeForeground#f4fbff
• titleBar.inactiveBackground#060b18
• titleBar.inactiveForeground#f4fbff80
• window.activeBorder#67e8f9
• window.inactiveBorder#a78bfa60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).