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#2563eb
- activityBar.background#c4c4c4
- activityBar.border#5729a6
- activityBar.foreground#2563eb
- activityBar.inactiveForeground#131921
- activityBarBadge.background#f59e0b
- activityBarBadge.foreground#fafafa
- breadcrumb.activeSelectionForeground#f59e0b
- breadcrumb.background#c4c4c4
- breadcrumb.focusForeground#2563eb
- breadcrumb.foreground#2563eb
- debugIcon.breakpointDisabledForeground#0c1016
- debugIcon.breakpointForeground#f59e0b
- debugIcon.breakpointUnverifiedForeground#131921
- debugToolBar.background#dddddd
- diffEditor.border#5729a6
- diffEditor.insertedTextBackground#4a2f03
- diffEditor.removedTextBackground#251147
- editor.background#fafafa
- editor.lineHighlightBackground#040a18
- editor.selectionBackground#0b1e47
- editor.selectionHighlightBackground#190c2f
- editor.wordHighlightBackground#312002
- editorBracketHighlight.foreground1#2563eb
- editorBracketHighlight.foreground2#7c3aed
- editorBracketHighlight.foreground3#f59e0b
- editorBracketHighlight.foreground4#ef4444
- editorBracketHighlight.foreground5#10b981
- editorBracketHighlight.foreground6#06b6d4
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#040a18
- editorBracketMatch.border#2563eb
- editorCursor.foreground#2563eb
- editorGroup.border#632ebe
- editorGroupHeader.noTabsBackground#7b7b7b
- editorGroupHeader.tabsBackground#acacac
- editorGutter.addedBackground#c47e09
- editorGutter.background#fafafa
- editorGutter.deletedBackground#935f07
- editorGutter.modifiedBackground#632ebe
- editorIndentGuide.activeBackground1#2563eb
- editorIndentGuide.activeBackground2#7c3aed
- editorIndentGuide.activeBackground3#f59e0b
- editorIndentGuide.activeBackground4#ef4444
- editorIndentGuide.activeBackground5#10b981
- editorIndentGuide.activeBackground6#06b6d4
- editorIndentGuide.background1#2563eb66
- editorIndentGuide.background2#7c3aed66
- editorIndentGuide.background3#f59e0b66
- editorIndentGuide.background4#ef444466
- editorIndentGuide.background5#10b98166
- editorIndentGuide.background6#06b6d466
- editorLineNumber.activeForeground#2563eb
- editorLineNumber.foreground#131921
- editorWidget.background#ebebeb
- editorWidget.border#7c3aed
- gitDecoration.addedResourceForeground#f59e0b
- gitDecoration.deletedResourceForeground#c47e09
- gitDecoration.ignoredResourceForeground#0c1016
- gitDecoration.modifiedResourceForeground#7c3aed
- gitDecoration.untrackedResourceForeground#2563eb
- input.background#ffffff
- list.activeSelectionBackground#2563eb33
- list.activeSelectionForeground#fafafa
- list.focusBackground#2563eb66
- list.focusForeground#1f2937
- list.hoverBackground#fafafa
- list.hoverForeground#1f2937
- list.inactiveSelectionBackground#fafafa
- list.inactiveSelectionForeground#131921
- menu.background#dddddd
- menu.border#4a238e
- menu.foreground#1c2532
- menu.selectionBackground#7c3aed
- menu.selectionForeground#fafafa
- menu.separatorBackground#090c11
- menubar.selectionBackground#7c3aed
- menubar.selectionForeground#fafafa
- minimap.background#fafafa99
- minimap.errorHighlight#7c3aed
- minimap.foregroundOpacity#2563eb
- minimapSlider.background#2563eb
- notificationCenter.border#c4c4c4
- notificationCenterHeader.background#f5f5f5
- notificationLink.foreground#2563eb
- notifications.background#dddddd
- notifications.foreground#1f2937
- notificationToast.background#dddddd
- panel.background#dddddd
- panel.border#5729a6
- panelTitle.activeBorder#2563eb
- panelTitle.activeForeground#2563eb
- panelTitle.inactiveForeground#131921
- peekViewEditor.background#ebebeb
- peekViewEditor.matchHighlightBackground#2563eb33
- peekViewResult.background#f5f5f5
- peekViewResult.matchHighlightBackground#7c3aed66
- peekViewResult.selectionBackground#0b1e47
- peekViewTitle.background#2563eb
- pickerGroup.border#5729a6
- pickerGroup.foreground#2563eb
- quickInput.background#e1e1e1
- quickInput.foreground#1f2937
- quickInputList.focusBackground#7c3aed
- quickInputList.focusForeground#1f2937
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#2563eb
- scrollbarSlider.background#2563eb99
- scrollbarSlider.hoverBackground#2563ebcc
- settings.checkboxBackground#2563eb
- settings.checkboxForeground#fafafa
- settings.dropdownBackground#ffffff
- settings.dropdownForeground#1f2937
- settings.focusedRowBorder#2563eb
- settings.headerForeground#2563eb
- settings.modifiedItemIndicator#7c3aed
- settings.rowHoverBackground#fafafa
- sideBar.background#dddddd
- sideBar.border#5729a6
- sideBar.foreground#1c2532
- sideBarSectionHeader.background#10e10e10e
- sideBarSectionHeader.foreground#2563eb
- sideBarTitle.foreground#2563eb
- statusBar.background#2563eb
- statusBar.debuggingBackground#7c3aed
- statusBar.foreground#fafafa
- statusBar.noFolderBackground#c4c4c4
- statusBarItem.hoverBackground#323232
- tab.activeBackground#fafafa
- tab.activeBorder#2563eb
- tab.activeForeground#2563eb
- tab.activeModifiedBorder#f59e0b
- tab.hoverBackground#dddddd
- tab.hoverForeground#1c2532
- tab.inactiveBackground#acacac
- tab.inactiveForeground#131921
- tab.unfocusedActiveBorder#1a45a5
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#f59e0b
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#7c3aed
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#f59e0b
- terminal.background#fafafa
- terminal.foreground#1f2937
- titleBar.activeBackground#2563eb
- titleBar.activeForeground#fafafa
- titleBar.border#4a238e
- titleBar.inactiveBackground#c4c4c4
- titleBar.inactiveForeground#161d27
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.line, comment.block | #6b7280 | italic |
| keyword, keyword.control, keyword.operator, keyword.control.directive | #1d4ed8 | bold |
| storage, storage.type, storage.modifier, storage.type.primitive | #b91c1c | bold |
| variable, variable.parameter, variable.language, variable.other.readwrite | #b45309 | — |
| entity.name.function, support.function, support.function.builtin | #6d28d9 | — |
| meta.function-call, variable.function | #6d28d9 | — |
| string, string.quoted.single, string.quoted.double, string.quoted.template | #1d4ed8 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #b91c1c | — |
| constant, constant.language, constant.character | #b91c1c | — |
| constant.language.boolean | #b45309 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #b45309 | — |
| punctuation, punctuation.definition, punctuation.section | #9ca3af | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx | #6d28d9 | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #b45309 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.css | #047857 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css | #b91c1c | — |
| support.type.property-name, support.type.property-name.css | #1d4ed8 | — |
| support.constant.property-value, support.constant.property-value.css | #6d28d9 | — |
| entity.name.type, entity.other.inherited-class, entity.name.struct | #047857 | — |
| entity.name.class, support.class | #047857 | — |
| entity.name.interface, entity.name.type.interface | #1d4ed8 | — |
| entity.name.namespace, entity.name.scope-resolution | #b91c1c | — |
| punctuation.definition.decorator, entity.name.function.decorator | #b45309 | — |
| meta.tag, meta.tag.html, meta.tag.jsx | #6d28d9 | — |
| string.regexp | #1d4ed8 | — |
| string.template, string.template.js, string.template.expression.js | #1d4ed8 | — |
| support.type.property-name.json | #1d4ed8 | — |
| constant.language.json | #6d28d9 | — |
| markup.heading, markup.heading.1, markup.heading.2 | #1d4ed8 | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |