Happy Heart
Publisher: Khushdil AnsariThemes in package: 17
A collection of vibrant VS Code themes with modular design and easy customization. Features multiple color schemes with a happy, energetic vibe.
Color themes
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#00b4d8
- activityBar.background#151925
- activityBar.border#00537f
- activityBar.foreground#00b4d8
- activityBar.inactiveForeground#8a9199
- activityBarBadge.background#90e0ef
- activityBarBadge.foreground#0a0e1a
- breadcrumb.activeSelectionForeground#90e0ef
- breadcrumb.background#151925
- breadcrumb.focusForeground#00b4d8
- breadcrumb.foreground#00b4d8
- debugIcon.breakpointDisabledForeground#5c6066
- debugIcon.breakpointForeground#90e0ef
- debugIcon.breakpointUnverifiedForeground#8a9199
- debugToolBar.background#171c29
- diffEditor.border#00537f
- diffEditor.insertedTextBackground#2b4348
- diffEditor.removedTextBackground#002437
- editor.background#0a0e1a
- editor.lineHighlightBackground#001216
- editor.selectionBackground#003641
- editor.selectionHighlightBackground#001824
- editor.wordHighlightBackground#1d2d30
- editorBracketHighlight.foreground1#00b4d8
- editorBracketHighlight.foreground2#0077b6
- editorBracketHighlight.foreground3#90e0ef
- editorBracketHighlight.foreground4#ff6b35
- editorBracketHighlight.foreground5#ffd700
- editorBracketHighlight.foreground6#7c3aed
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#001216
- editorBracketMatch.border#00b4d8
- editorCursor.foreground#00b4d8
- editorGroup.border#005f92
- editorGroupHeader.noTabsBackground#0d1017
- editorGroupHeader.tabsBackground#121620
- editorGutter.addedBackground#73b3bf
- editorGutter.background#0a0e1a
- editorGutter.deletedBackground#56868f
- editorGutter.modifiedBackground#005f92
- editorIndentGuide.activeBackground1#00b4d8
- editorIndentGuide.activeBackground2#0077b6
- editorIndentGuide.activeBackground3#90e0ef
- editorIndentGuide.activeBackground4#ff6b35
- editorIndentGuide.activeBackground5#ffd700
- editorIndentGuide.activeBackground6#7c3aed
- editorIndentGuide.background1#00b4d866
- editorIndentGuide.background2#0077b666
- editorIndentGuide.background3#90e0ef66
- editorIndentGuide.background4#ff6b3566
- editorIndentGuide.background5#ffd70066
- editorIndentGuide.background6#7c3aed66
- editorLineNumber.activeForeground#00b4d8
- editorLineNumber.foreground#8a9199
- editorWidget.background#101524
- editorWidget.border#0077b6
- gitDecoration.addedResourceForeground#90e0ef
- gitDecoration.deletedResourceForeground#73b3bf
- gitDecoration.ignoredResourceForeground#5c6066
- gitDecoration.modifiedResourceForeground#0077b6
- gitDecoration.untrackedResourceForeground#00b4d8
- input.background#242938
- list.activeSelectionBackground#00b4d833
- list.activeSelectionForeground#0a0e1a
- list.focusBackground#00b4d866
- list.focusForeground#e6f1ff
- list.hoverBackground#1f2433
- list.hoverForeground#e6f1ff
- list.inactiveSelectionBackground#1f2433
- list.inactiveSelectionForeground#8a9199
- menu.background#171c29
- menu.border#00476d
- menu.foreground#cfd9e6
- menu.selectionBackground#0077b6
- menu.selectionForeground#0a0e1a
- menu.separatorBackground#45484d
- menubar.selectionBackground#0077b6
- menubar.selectionForeground#0a0e1a
- minimap.background#0a0e1a99
- minimap.errorHighlight#0077b6
- minimap.foregroundOpacity#00b4d8
- minimapSlider.background#00b4d8
- notificationCenter.border#151925
- notificationCenterHeader.background#1a1f2e
- notificationLink.foreground#00b4d8
- notifications.background#171c29
- notifications.foreground#e6f1ff
- notificationToast.background#171c29
- panel.background#171c29
- panel.border#00537f
- panelTitle.activeBorder#00b4d8
- panelTitle.activeForeground#00b4d8
- panelTitle.inactiveForeground#8a9199
- peekViewEditor.background#101524
- peekViewEditor.matchHighlightBackground#00b4d833
- peekViewResult.background#1a1f2e
- peekViewResult.matchHighlightBackground#0077b666
- peekViewResult.selectionBackground#003641
- peekViewTitle.background#00b4d8
- pickerGroup.border#00537f
- pickerGroup.foreground#00b4d8
- quickInput.background#060b1a
- quickInput.foreground#e6f1ff
- quickInputList.focusBackground#0077b6
- quickInputList.focusForeground#e6f1ff
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#00b4d8
- scrollbarSlider.background#00b4d899
- scrollbarSlider.hoverBackground#00b4d8cc
- settings.checkboxBackground#00b4d8
- settings.checkboxForeground#0a0e1a
- settings.dropdownBackground#242938
- settings.dropdownForeground#e6f1ff
- settings.focusedRowBorder#00b4d8
- settings.headerForeground#00b4d8
- settings.modifiedItemIndicator#0077b6
- settings.rowHoverBackground#1f2433
- sideBar.background#171c29
- sideBar.border#00537f
- sideBar.foreground#cfd9e6
- sideBarSectionHeader.background#1d2233
- sideBarSectionHeader.foreground#00b4d8
- sideBarTitle.foreground#00b4d8
- statusBar.background#00b4d8
- statusBar.debuggingBackground#0077b6
- statusBar.foreground#0a0e1a
- statusBar.noFolderBackground#151925
- statusBarItem.hoverBackground#020305
- tab.activeBackground#0a0e1a
- tab.activeBorder#00b4d8
- tab.activeForeground#00b4d8
- tab.activeModifiedBorder#90e0ef
- tab.hoverBackground#171c29
- tab.hoverForeground#cfd9e6
- tab.inactiveBackground#121620
- tab.inactiveForeground#8a9199
- tab.unfocusedActiveBorder#007e97
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#90e0ef
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#0077b6
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#90e0ef
- terminal.background#0a0e1a
- terminal.foreground#e6f1ff
- titleBar.activeBackground#00b4d8
- titleBar.activeForeground#0a0e1a
- titleBar.border#00476d
- titleBar.inactiveBackground#151925
- titleBar.inactiveForeground#a1a9b3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.line, comment.block | #64748b | italic |
| keyword, keyword.control, keyword.operator, keyword.control.directive | #0ea5e9 | bold |
| storage, storage.type, storage.modifier, storage.type.primitive | #f97316 | bold |
| variable, variable.parameter, variable.language, variable.other.readwrite | #eab308 | — |
| entity.name.function, support.function, support.function.builtin | #8b5cf6 | — |
| meta.function-call, variable.function | #8b5cf6 | — |
| string, string.quoted.single, string.quoted.double, string.quoted.template | #0ea5e9 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #f97316 | — |
| constant, constant.language, constant.character | #f97316 | — |
| constant.language.boolean | #eab308 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #eab308 | — |
| punctuation, punctuation.definition, punctuation.section | #94a3b8 | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx | #8b5cf6 | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #eab308 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.css | #059669 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css | #f97316 | — |
| support.type.property-name, support.type.property-name.css | #0ea5e9 | — |
| support.constant.property-value, support.constant.property-value.css | #8b5cf6 | — |
| entity.name.type, entity.other.inherited-class, entity.name.struct | #059669 | — |
| entity.name.class, support.class | #059669 | — |
| entity.name.interface, entity.name.type.interface | #0ea5e9 | — |
| entity.name.namespace, entity.name.scope-resolution | #f97316 | — |
| punctuation.definition.decorator, entity.name.function.decorator | #eab308 | — |
| meta.tag, meta.tag.html, meta.tag.jsx | #8b5cf6 | — |
| string.regexp | #0ea5e9 | — |
| string.template, string.template.js, string.template.expression.js | #0ea5e9 | — |
| support.type.property-name.json | #0ea5e9 | — |
| constant.language.json | #8b5cf6 | — |
| markup.heading, markup.heading.1, markup.heading.2 | #0ea5e9 | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |