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#a855f7
- activityBar.background#150c25
- activityBar.border#a5326b
- activityBar.foreground#a855f7
- activityBar.inactiveForeground#868b99
- activityBarBadge.background#06b6d4
- activityBarBadge.foreground#0f0b1a
- breadcrumb.activeSelectionForeground#06b6d4
- breadcrumb.background#150c25
- breadcrumb.focusForeground#a855f7
- breadcrumb.foreground#a855f7
- debugIcon.breakpointDisabledForeground#5a5c66
- debugIcon.breakpointForeground#06b6d4
- debugIcon.breakpointUnverifiedForeground#868b99
- debugToolBar.background#170e29
- diffEditor.border#a5326b
- diffEditor.insertedTextBackground#023740
- diffEditor.removedTextBackground#47162e
- editor.background#0f0b1a
- editor.lineHighlightBackground#110919
- editor.selectionBackground#321a4a
- editor.selectionHighlightBackground#2f0e1f
- editor.wordHighlightBackground#01242a
- editorBracketHighlight.foreground1#a855f7
- editorBracketHighlight.foreground2#ec4899
- editorBracketHighlight.foreground3#06b6d4
- editorBracketHighlight.foreground4#f59e0b
- editorBracketHighlight.foreground5#10b981
- editorBracketHighlight.foreground6#ef4444
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#110919
- editorBracketMatch.border#a855f7
- editorCursor.foreground#a855f7
- editorGroup.border#bd3a7a
- editorGroupHeader.noTabsBackground#0d0817
- editorGroupHeader.tabsBackground#120b20
- editorGutter.addedBackground#0592aa
- editorGutter.background#0f0b1a
- editorGutter.deletedBackground#046d7f
- editorGutter.modifiedBackground#bd3a7a
- editorIndentGuide.activeBackground1#a855f7
- editorIndentGuide.activeBackground2#ec4899
- editorIndentGuide.activeBackground3#06b6d4
- editorIndentGuide.activeBackground4#f59e0b
- editorIndentGuide.activeBackground5#10b981
- editorIndentGuide.activeBackground6#ef4444
- editorIndentGuide.background1#a855f766
- editorIndentGuide.background2#ec489966
- editorIndentGuide.background3#06b6d466
- editorIndentGuide.background4#f59e0b66
- editorIndentGuide.background5#10b98166
- editorIndentGuide.background6#ef444466
- editorLineNumber.activeForeground#a855f7
- editorLineNumber.foreground#868b99
- editorWidget.background#100524
- editorWidget.border#ec4899
- gitDecoration.addedResourceForeground#06b6d4
- gitDecoration.deletedResourceForeground#0592aa
- gitDecoration.ignoredResourceForeground#5a5c66
- gitDecoration.modifiedResourceForeground#ec4899
- gitDecoration.untrackedResourceForeground#a855f7
- input.background#241938
- list.activeSelectionBackground#a855f733
- list.activeSelectionForeground#0f0b1a
- list.focusBackground#a855f766
- list.focusForeground#e0e7ff
- list.hoverBackground#1f1433
- list.hoverForeground#e0e7ff
- list.inactiveSelectionBackground#1f1433
- list.inactiveSelectionForeground#868b99
- menu.background#170e29
- menu.border#8e2b5c
- menu.foreground#cad0e6
- menu.selectionBackground#ec4899
- menu.selectionForeground#0f0b1a
- menu.separatorBackground#43454d
- menubar.selectionBackground#ec4899
- menubar.selectionForeground#0f0b1a
- minimap.background#0f0b1a99
- minimap.errorHighlight#ec4899
- minimap.foregroundOpacity#a855f7
- minimapSlider.background#a855f7
- notificationCenter.border#150c25
- notificationCenterHeader.background#1a0f2e
- notificationLink.foreground#a855f7
- notifications.background#170e29
- notifications.foreground#e0e7ff
- notificationToast.background#170e29
- panel.background#170e29
- panel.border#a5326b
- panelTitle.activeBorder#a855f7
- panelTitle.activeForeground#a855f7
- panelTitle.inactiveForeground#868b99
- peekViewEditor.background#100524
- peekViewEditor.matchHighlightBackground#a855f733
- peekViewResult.background#1a0f2e
- peekViewResult.matchHighlightBackground#ec489966
- peekViewResult.selectionBackground#321a4a
- peekViewTitle.background#a855f7
- pickerGroup.border#a5326b
- pickerGroup.foreground#a855f7
- quickInput.background#06001a
- quickInput.foreground#e0e7ff
- quickInputList.focusBackground#ec4899
- quickInputList.focusForeground#e0e7ff
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#a855f7
- scrollbarSlider.background#a855f799
- scrollbarSlider.hoverBackground#a855f7cc
- settings.checkboxBackground#a855f7
- settings.checkboxForeground#0f0b1a
- settings.dropdownBackground#241938
- settings.dropdownForeground#e0e7ff
- settings.focusedRowBorder#a855f7
- settings.headerForeground#a855f7
- settings.modifiedItemIndicator#ec4899
- settings.rowHoverBackground#1f1433
- sideBar.background#170e29
- sideBar.border#a5326b
- sideBar.foreground#cad0e6
- sideBarSectionHeader.background#1d1133
- sideBarSectionHeader.foreground#a855f7
- sideBarTitle.foreground#a855f7
- statusBar.background#a855f7
- statusBar.debuggingBackground#ec4899
- statusBar.foreground#0f0b1a
- statusBar.noFolderBackground#150c25
- statusBarItem.hoverBackground#030205
- tab.activeBackground#0f0b1a
- tab.activeBorder#a855f7
- tab.activeForeground#a855f7
- tab.activeModifiedBorder#06b6d4
- tab.hoverBackground#170e29
- tab.hoverForeground#cad0e6
- tab.inactiveBackground#120b20
- tab.inactiveForeground#868b99
- tab.unfocusedActiveBorder#763bad
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#06b6d4
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#ec4899
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#06b6d4
- terminal.background#0f0b1a
- terminal.foreground#e0e7ff
- titleBar.activeBackground#a855f7
- titleBar.activeForeground#0f0b1a
- titleBar.border#8e2b5c
- titleBar.inactiveBackground#150c25
- titleBar.inactiveForeground#9da2b3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.line, comment.block | #a78bfa | italic |
| keyword, keyword.control, keyword.operator, keyword.control.directive | #a855f7 | bold |
| storage, storage.type, storage.modifier, storage.type.primitive | #ec4899 | bold |
| variable, variable.parameter, variable.language, variable.other.readwrite | #06b6d4 | — |
| entity.name.function, support.function, support.function.builtin | #f59e0b | — |
| meta.function-call, variable.function | #f59e0b | — |
| string, string.quoted.single, string.quoted.double, string.quoted.template | #a855f7 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #ec4899 | — |
| constant, constant.language, constant.character | #ec4899 | — |
| constant.language.boolean | #06b6d4 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #06b6d4 | — |
| punctuation, punctuation.definition, punctuation.section | #c084fc | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx | #f59e0b | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #06b6d4 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.css | #10b981 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css | #ec4899 | — |
| support.type.property-name, support.type.property-name.css | #a855f7 | — |
| support.constant.property-value, support.constant.property-value.css | #f59e0b | — |
| entity.name.type, entity.other.inherited-class, entity.name.struct | #10b981 | — |
| entity.name.class, support.class | #10b981 | — |
| entity.name.interface, entity.name.type.interface | #a855f7 | — |
| entity.name.namespace, entity.name.scope-resolution | #ec4899 | — |
| punctuation.definition.decorator, entity.name.function.decorator | #06b6d4 | — |
| meta.tag, meta.tag.html, meta.tag.jsx | #f59e0b | — |
| string.regexp | #a855f7 | — |
| string.template, string.template.js, string.template.expression.js | #a855f7 | — |
| support.type.property-name.json | #a855f7 | — |
| constant.language.json | #f59e0b | — |
| markup.heading, markup.heading.1, markup.heading.2 | #a855f7 | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |