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#10b981
- activityBar.background#054c38
- activityBar.border#04694a
- activityBar.foreground#10b981
- activityBar.inactiveForeground#7d9689
- activityBarBadge.background#34d399
- activityBarBadge.foreground#064e3b
- breadcrumb.activeSelectionForeground#34d399
- breadcrumb.background#054c38
- breadcrumb.focusForeground#10b981
- breadcrumb.foreground#10b981
- debugIcon.breakpointDisabledForeground#54645c
- debugIcon.breakpointForeground#34d399
- debugIcon.breakpointUnverifiedForeground#7d9689
- debugToolBar.background#05563f
- diffEditor.border#04694a
- diffEditor.insertedTextBackground#103f2e
- diffEditor.removedTextBackground#022d20
- editor.background#064e3b
- editor.lineHighlightBackground#02130d
- editor.selectionBackground#053827
- editor.selectionHighlightBackground#011e15
- editor.wordHighlightBackground#0a2a1f
- editorBracketHighlight.foreground1#10b981
- editorBracketHighlight.foreground2#059669
- editorBracketHighlight.foreground3#34d399
- editorBracketHighlight.foreground4#22c55e
- editorBracketHighlight.foreground5#84cc16
- editorBracketHighlight.foreground6#65a30d
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#02130d
- editorBracketMatch.border#10b981
- editorCursor.foreground#10b981
- editorGroup.border#047854
- editorGroupHeader.noTabsBackground#033023
- editorGroupHeader.tabsBackground#044331
- editorGutter.addedBackground#2aa97a
- editorGutter.background#064e3b
- editorGutter.deletedBackground#1f7f5c
- editorGutter.modifiedBackground#047854
- editorIndentGuide.activeBackground1#10b981
- editorIndentGuide.activeBackground2#059669
- editorIndentGuide.activeBackground3#34d399
- editorIndentGuide.activeBackground4#22c55e
- editorIndentGuide.activeBackground5#84cc16
- editorIndentGuide.activeBackground6#65a30d
- editorIndentGuide.background1#10b98166
- editorIndentGuide.background2#05966966
- editorIndentGuide.background3#34d39966
- editorIndentGuide.background4#22c55e66
- editorIndentGuide.background5#84cc1666
- editorIndentGuide.background6#65a30d66
- editorLineNumber.activeForeground#10b981
- editorLineNumber.foreground#7d9689
- editorWidget.background#00553c
- editorWidget.border#059669
- gitDecoration.addedResourceForeground#34d399
- gitDecoration.deletedResourceForeground#2aa97a
- gitDecoration.ignoredResourceForeground#54645c
- gitDecoration.modifiedResourceForeground#059669
- gitDecoration.untrackedResourceForeground#10b981
- input.background#106950
- list.activeSelectionBackground#10b98133
- list.activeSelectionForeground#064e3b
- list.focusBackground#10b98166
- list.focusForeground#d1fae5
- list.hoverBackground#0b644b
- list.hoverForeground#d1fae5
- list.inactiveSelectionBackground#0b644b
- list.inactiveSelectionForeground#7d9689
- menu.background#05563f
- menu.border#035a3f
- menu.foreground#bce1ce
- menu.selectionBackground#059669
- menu.selectionForeground#064e3b
- menu.separatorBackground#3f4b45
- menubar.selectionBackground#059669
- menubar.selectionForeground#064e3b
- minimap.background#064e3b99
- minimap.errorHighlight#059669
- minimap.foregroundOpacity#10b981
- minimapSlider.background#10b981
- notificationCenter.border#054c38
- notificationCenterHeader.background#065f46
- notificationLink.foreground#10b981
- notifications.background#05563f
- notifications.foreground#d1fae5
- notificationToast.background#05563f
- panel.background#05563f
- panel.border#04694a
- panelTitle.activeBorder#10b981
- panelTitle.activeForeground#10b981
- panelTitle.inactiveForeground#7d9689
- peekViewEditor.background#00553c
- peekViewEditor.matchHighlightBackground#10b98133
- peekViewResult.background#065f46
- peekViewResult.matchHighlightBackground#05966966
- peekViewResult.selectionBackground#053827
- peekViewTitle.background#10b981
- pickerGroup.border#04694a
- pickerGroup.foreground#10b981
- quickInput.background#004b32
- quickInput.foreground#d1fae5
- quickInputList.focusBackground#059669
- quickInputList.focusForeground#d1fae5
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#10b981
- scrollbarSlider.background#10b98199
- scrollbarSlider.hoverBackground#10b981cc
- settings.checkboxBackground#10b981
- settings.checkboxForeground#064e3b
- settings.dropdownBackground#106950
- settings.dropdownForeground#d1fae5
- settings.focusedRowBorder#10b981
- settings.headerForeground#10b981
- settings.modifiedItemIndicator#059669
- settings.rowHoverBackground#0b644b
- sideBar.background#05563f
- sideBar.border#04694a
- sideBar.foreground#bce1ce
- sideBarSectionHeader.background#07694d
- sideBarSectionHeader.foreground#10b981
- sideBarTitle.foreground#10b981
- statusBar.background#10b981
- statusBar.debuggingBackground#059669
- statusBar.foreground#064e3b
- statusBar.noFolderBackground#054c38
- statusBarItem.hoverBackground#01100c
- tab.activeBackground#064e3b
- tab.activeBorder#10b981
- tab.activeForeground#10b981
- tab.activeModifiedBorder#34d399
- tab.hoverBackground#05563f
- tab.hoverForeground#bce1ce
- tab.inactiveBackground#044331
- tab.inactiveForeground#7d9689
- tab.unfocusedActiveBorder#0b825a
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#34d399
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#059669
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#34d399
- terminal.background#064e3b
- terminal.foreground#d1fae5
- titleBar.activeBackground#10b981
- titleBar.activeForeground#064e3b
- titleBar.border#035a3f
- titleBar.inactiveBackground#054c38
- titleBar.inactiveForeground#92afa0
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 | #059669 | bold |
| storage, storage.type, storage.modifier, storage.type.primitive | #d97706 | bold |
| variable, variable.parameter, variable.language, variable.other.readwrite | #0891b2 | — |
| entity.name.function, support.function, support.function.builtin | #7c2d12 | — |
| meta.function-call, variable.function | #7c2d12 | — |
| string, string.quoted.single, string.quoted.double, string.quoted.template | #059669 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #d97706 | — |
| constant, constant.language, constant.character | #d97706 | — |
| constant.language.boolean | #0891b2 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #0891b2 | — |
| punctuation, punctuation.definition, punctuation.section | #9ca3af | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx | #7c2d12 | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #0891b2 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.css | #b91c1c | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css | #d97706 | — |
| support.type.property-name, support.type.property-name.css | #059669 | — |
| support.constant.property-value, support.constant.property-value.css | #7c2d12 | — |
| entity.name.type, entity.other.inherited-class, entity.name.struct | #b91c1c | — |
| entity.name.class, support.class | #b91c1c | — |
| entity.name.interface, entity.name.type.interface | #059669 | — |
| entity.name.namespace, entity.name.scope-resolution | #d97706 | — |
| punctuation.definition.decorator, entity.name.function.decorator | #0891b2 | — |
| meta.tag, meta.tag.html, meta.tag.jsx | #7c2d12 | — |
| string.regexp | #059669 | — |
| string.template, string.template.js, string.template.expression.js | #059669 | — |
| support.type.property-name.json | #059669 | — |
| constant.language.json | #7c2d12 | — |
| markup.heading, markup.heading.1, markup.heading.2 | #059669 | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |