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#e5e7eb
• activityBar.background#0d0f13
• activityBar.foreground#f8fafc
• activityBar.inactiveForeground#f8fafc80
• activityBarBadge.background#e5e7eb
• activityBarBadge.foreground#001018
• badge.background#94a3b8
• badge.foreground#ffffff
• button.background#e5e7eb
• button.foreground#001018
• button.hoverBackground#eaebef
• button.secondaryBackground#404246
• button.secondaryForeground#f8fafc
• descriptionForeground#f8fafcB5
• dropdown.background#0e1014
• dropdown.border#e5e7eb65
• dropdown.foreground#f8fafc
• editor.background#08090c
• editor.findMatchBackground#38bdf855
• editor.findMatchHighlightBackground#94a3b835
• editor.foreground#f8fafc
• editor.lineHighlightBackground#e5e7eb12
• editor.selectionBackground#e5e7eb35
• editor.selectionHighlightBackground#94a3b822
• editorBracketMatch.border#38bdf8
• editorCursor.foreground#38bdf8
• editorGroup.border#e5e7eb28
• editorGroupHeader.tabsBackground#0a0c0f
• editorGutter.addedBackground#94a3b8
• editorGutter.background#08090c
• editorGutter.deletedBackground#ff4d6d
• editorGutter.modifiedBackground#e5e7eb
• editorHoverWidget.background#111318
• editorHoverWidget.border#e5e7eb80
• editorIndentGuide.activeBackground1#e5e7eb80
• editorIndentGuide.background1#f8fafc14
• editorLineNumber.activeForeground#e5e7eb
• editorLineNumber.foreground#f8fafc55
• editorSuggestWidget.background#111318
• editorSuggestWidget.border#e5e7eb80
• editorSuggestWidget.foreground#f8fafc
• editorSuggestWidget.selectedBackground#404246
• editorWhitespace.foreground#f8fafc20
• editorWidget.background#111318
• editorWidget.border#e5e7eb80
• errorForeground#ff4d6d
• focusBorder#e5e7eb
• foreground#f8fafc
• icon.foreground#f8fafcD0
• input.background#0e1014
• input.border#e5e7eb65
• input.foreground#f8fafc
• inputOption.activeBorder#e5e7eb
• list.activeSelectionBackground#404246
• list.activeSelectionForeground#f8fafc
• list.focusOutline#e5e7eb
• list.highlightForeground#38bdf8
• list.hoverBackground#e5e7eb14
• list.inactiveSelectionBackground#e5e7eb20
• menu.background#111318
• menu.border#e5e7eb50
• menu.foreground#f8fafc
• menu.selectionBackground#404246
• menu.selectionForeground#f8fafc
• menubar.selectionBackground#e5e7eb20
• menubar.selectionForeground#f8fafc
• minimap.background#08090c
• panel.background#222429
• panel.border#e5e7eb35
• panelTitle.activeBorder#e5e7eb
• panelTitle.activeForeground#f8fafc
• panelTitle.inactiveForeground#f8fafc88
• sash.hoverBorder#e5e7eb
• scrollbarSlider.activeBackground#e5e7eb75
• scrollbarSlider.background#e5e7eb30
• scrollbarSlider.hoverBackground#e5e7eb55
• sideBar.background#222429
• sideBar.border#e5e7eb35
• sideBar.foreground#f8fafc
• sideBarSectionHeader.background#0e1014
• sideBarSectionHeader.foreground#f8fafc
• sideBarTitle.foreground#f8fafc
• statusBar.background#404246
• statusBar.border#e5e7eb55
• statusBar.foreground#f8fafc
• statusBarItem.hoverBackground#e5e7eb28
• statusBarItem.remoteBackground#e5e7eb
• statusBarItem.remoteForeground#001018
• tab.activeBackground#1e1f22
• tab.activeBorderTop#e5e7eb
• tab.activeForeground#f8fafc
• tab.hoverBackground#e5e7eb16
• tab.inactiveBackground#0d0f13
• tab.inactiveForeground#f8fafcA0
• terminal.ansiCyan#e5e7eb
• terminal.ansiMagenta#94a3b8
• terminal.ansiYellow#38bdf8
• terminal.background#08090c
• terminal.foreground#f8fafc
• terminalCursor.foreground#38bdf8
• titleBar.activeBackground#0d0f13
• titleBar.activeForeground#f8fafc
• titleBar.inactiveBackground#08090c
• titleBar.inactiveForeground#f8fafc80
• window.activeBorder#e5e7eb
• window.inactiveBorder#94a3b860

tokenColors

TextMate scopes and font styles (syntax highlighting rules).