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#ff7ab6
• activityBar.background#130a18
• activityBar.foreground#fff5fb
• activityBar.inactiveForeground#fff5fb80
• activityBarBadge.background#ff7ab6
• activityBarBadge.foreground#001018
• badge.background#c084fc
• badge.foreground#ffffff
• button.background#ff7ab6
• button.foreground#001018
• button.hoverBackground#ff92c3
• button.secondaryBackground#4a253f
• button.secondaryForeground#fff5fb
• descriptionForeground#fff5fbB5
• dropdown.background#140b1a
• dropdown.border#ff7ab665
• dropdown.foreground#fff5fb
• editor.background#0d0712
• editor.findMatchBackground#f9a8d455
• editor.findMatchHighlightBackground#c084fc35
• editor.foreground#fff5fb
• editor.lineHighlightBackground#ff7ab612
• editor.selectionBackground#ff7ab635
• editor.selectionHighlightBackground#c084fc22
• editorBracketMatch.border#f9a8d4
• editorCursor.foreground#f9a8d4
• editorGroup.border#ff7ab628
• editorGroupHeader.tabsBackground#100915
• editorGutter.addedBackground#c084fc
• editorGutter.background#0d0712
• editorGutter.deletedBackground#ff4d6d
• editorGutter.modifiedBackground#ff7ab6
• editorHoverWidget.background#170d1d
• editorHoverWidget.border#ff7ab680
• editorIndentGuide.activeBackground1#ff7ab680
• editorIndentGuide.background1#fff5fb14
• editorLineNumber.activeForeground#ff7ab6
• editorLineNumber.foreground#fff5fb55
• editorSuggestWidget.background#170d1d
• editorSuggestWidget.border#ff7ab680
• editorSuggestWidget.foreground#fff5fb
• editorSuggestWidget.selectedBackground#4a253f
• editorWhitespace.foreground#fff5fb20
• editorWidget.background#170d1d
• editorWidget.border#ff7ab680
• errorForeground#ff4d6d
• focusBorder#ff7ab6
• foreground#fff5fb
• icon.foreground#fff5fbD0
• input.background#140b1a
• input.border#ff7ab665
• input.foreground#fff5fb
• inputOption.activeBorder#ff7ab6
• list.activeSelectionBackground#4a253f
• list.activeSelectionForeground#fff5fb
• list.focusOutline#ff7ab6
• list.highlightForeground#f9a8d4
• list.hoverBackground#ff7ab614
• list.inactiveSelectionBackground#ff7ab620
• menu.background#170d1d
• menu.border#ff7ab650
• menu.foreground#fff5fb
• menu.selectionBackground#4a253f
• menu.selectionForeground#fff5fb
• menubar.selectionBackground#ff7ab620
• menubar.selectionForeground#fff5fb
• minimap.background#0d0712
• panel.background#2a1629
• panel.border#ff7ab635
• panelTitle.activeBorder#ff7ab6
• panelTitle.activeForeground#fff5fb
• panelTitle.inactiveForeground#fff5fb88
• sash.hoverBorder#ff7ab6
• scrollbarSlider.activeBackground#ff7ab675
• scrollbarSlider.background#ff7ab630
• scrollbarSlider.hoverBackground#ff7ab655
• sideBar.background#2a1629
• sideBar.border#ff7ab635
• sideBar.foreground#fff5fb
• sideBarSectionHeader.background#140b19
• sideBarSectionHeader.foreground#fff5fb
• sideBarTitle.foreground#fff5fb
• statusBar.background#4a253f
• statusBar.border#ff7ab655
• statusBar.foreground#fff5fb
• statusBarItem.hoverBackground#ff7ab628
• statusBarItem.remoteBackground#ff7ab6
• statusBarItem.remoteForeground#001018
• tab.activeBackground#251322
• tab.activeBorderTop#ff7ab6
• tab.activeForeground#fff5fb
• tab.hoverBackground#ff7ab616
• tab.inactiveBackground#130a18
• tab.inactiveForeground#fff5fbA0
• terminal.ansiCyan#ff7ab6
• terminal.ansiMagenta#c084fc
• terminal.ansiYellow#f9a8d4
• terminal.background#0d0712
• terminal.foreground#fff5fb
• terminalCursor.foreground#f9a8d4
• titleBar.activeBackground#130a18
• titleBar.activeForeground#fff5fb
• titleBar.inactiveBackground#0d0712
• titleBar.inactiveForeground#fff5fb80
• window.activeBorder#ff7ab6
• window.inactiveBorder#c084fc60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).