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#4ade80
- activityBar.background#0c190c
- activityBar.border#188a42
- activityBar.foreground#4ade80
- activityBar.inactiveForeground#909992
- activityBarBadge.background#84cc16
- activityBarBadge.foreground#0a1a0a
- breadcrumb.activeSelectionForeground#84cc16
- breadcrumb.background#0c190c
- breadcrumb.focusForeground#4ade80
- breadcrumb.foreground#4ade80
- debugIcon.breakpointDisabledForeground#606662
- debugIcon.breakpointForeground#84cc16
- debugIcon.breakpointUnverifiedForeground#909992
- debugToolBar.background#0e1c0e
- diffEditor.border#188a42
- diffEditor.insertedTextBackground#283d07
- diffEditor.removedTextBackground#0a3b1c
- editor.background#0a1a0a
- editor.lineHighlightBackground#07160d
- editor.selectionBackground#164326
- editor.selectionHighlightBackground#072713
- editor.wordHighlightBackground#1a2904
- editorBracketHighlight.foreground1#4ade80
- editorBracketHighlight.foreground2#22c55e
- editorBracketHighlight.foreground3#84cc16
- editorBracketHighlight.foreground4#65a30d
- editorBracketHighlight.foreground5#16a34a
- editorBracketHighlight.foreground6#15803d
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#07160d
- editorBracketMatch.border#4ade80
- editorCursor.foreground#4ade80
- editorGroup.border#1b9e4b
- editorGroupHeader.noTabsBackground#081008
- editorGroupHeader.tabsBackground#0b160b
- editorGutter.addedBackground#6aa312
- editorGutter.background#0a1a0a
- editorGutter.deletedBackground#4f7a0d
- editorGutter.modifiedBackground#1b9e4b
- editorIndentGuide.activeBackground1#4ade80
- editorIndentGuide.activeBackground2#22c55e
- editorIndentGuide.activeBackground3#84cc16
- editorIndentGuide.activeBackground4#65a30d
- editorIndentGuide.activeBackground5#16a34a
- editorIndentGuide.activeBackground6#15803d
- editorIndentGuide.background1#4ade8066
- editorIndentGuide.background2#22c55e66
- editorIndentGuide.background3#84cc1666
- editorIndentGuide.background4#65a30d66
- editorIndentGuide.background5#16a34a66
- editorIndentGuide.background6#15803d66
- editorLineNumber.activeForeground#4ade80
- editorLineNumber.foreground#909992
- editorWidget.background#051505
- editorWidget.border#22c55e
- gitDecoration.addedResourceForeground#84cc16
- gitDecoration.deletedResourceForeground#6aa312
- gitDecoration.ignoredResourceForeground#606662
- gitDecoration.modifiedResourceForeground#22c55e
- gitDecoration.untrackedResourceForeground#4ade80
- input.background#192919
- list.activeSelectionBackground#4ade8033
- list.activeSelectionForeground#0a1a0a
- list.focusBackground#4ade8066
- list.focusForeground#f0fff4
- list.hoverBackground#142414
- list.hoverForeground#f0fff4
- list.inactiveSelectionBackground#142414
- list.inactiveSelectionForeground#909992
- menu.background#0e1c0e
- menu.border#147638
- menu.foreground#d8e6dc
- menu.selectionBackground#22c55e
- menu.selectionForeground#0a1a0a
- menu.separatorBackground#484d49
- menubar.selectionBackground#22c55e
- menubar.selectionForeground#0a1a0a
- minimap.background#0a1a0a99
- minimap.errorHighlight#22c55e
- minimap.foregroundOpacity#4ade80
- minimapSlider.background#4ade80
- notificationCenter.border#0c190c
- notificationCenterHeader.background#0f1f0f
- notificationLink.foreground#4ade80
- notifications.background#0e1c0e
- notifications.foreground#f0fff4
- notificationToast.background#0e1c0e
- panel.background#0e1c0e
- panel.border#188a42
- panelTitle.activeBorder#4ade80
- panelTitle.activeForeground#4ade80
- panelTitle.inactiveForeground#909992
- peekViewEditor.background#051505
- peekViewEditor.matchHighlightBackground#4ade8033
- peekViewResult.background#0f1f0f
- peekViewResult.matchHighlightBackground#22c55e66
- peekViewResult.selectionBackground#164326
- peekViewTitle.background#4ade80
- pickerGroup.border#188a42
- pickerGroup.foreground#4ade80
- quickInput.background#000b00
- quickInput.foreground#f0fff4
- quickInputList.focusBackground#22c55e
- quickInputList.focusForeground#f0fff4
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#4ade80
- scrollbarSlider.background#4ade8099
- scrollbarSlider.hoverBackground#4ade80cc
- settings.checkboxBackground#4ade80
- settings.checkboxForeground#0a1a0a
- settings.dropdownBackground#192919
- settings.dropdownForeground#f0fff4
- settings.focusedRowBorder#4ade80
- settings.headerForeground#4ade80
- settings.modifiedItemIndicator#22c55e
- settings.rowHoverBackground#142414
- sideBar.background#0e1c0e
- sideBar.border#188a42
- sideBar.foreground#d8e6dc
- sideBarSectionHeader.background#112211
- sideBarSectionHeader.foreground#4ade80
- sideBarTitle.foreground#4ade80
- statusBar.background#4ade80
- statusBar.debuggingBackground#22c55e
- statusBar.foreground#0a1a0a
- statusBar.noFolderBackground#0c190c
- statusBarItem.hoverBackground#020502
- tab.activeBackground#0a1a0a
- tab.activeBorder#4ade80
- tab.activeForeground#4ade80
- tab.activeModifiedBorder#84cc16
- tab.hoverBackground#0e1c0e
- tab.hoverForeground#d8e6dc
- tab.inactiveBackground#0b160b
- tab.inactiveForeground#909992
- tab.unfocusedActiveBorder#349b5a
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#84cc16
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#22c55e
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#84cc16
- terminal.background#0a1a0a
- terminal.foreground#f0fff4
- titleBar.activeBackground#4ade80
- titleBar.activeForeground#0a1a0a
- titleBar.border#147638
- titleBar.inactiveBackground#0c190c
- titleBar.inactiveForeground#a8b3ab
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 | #10b981 | bold |
| storage, storage.type, storage.modifier, storage.type.primitive | #f59e0b | bold |
| variable, variable.parameter, variable.language, variable.other.readwrite | #06b6d4 | — |
| 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 | #10b981 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #f59e0b | — |
| constant, constant.language, constant.character | #f59e0b | — |
| constant.language.boolean | #06b6d4 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #06b6d4 | — |
| punctuation, punctuation.definition, punctuation.section | #9ca3af | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx | #8b5cf6 | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #06b6d4 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.css | #dc2626 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css | #f59e0b | — |
| support.type.property-name, support.type.property-name.css | #10b981 | — |
| support.constant.property-value, support.constant.property-value.css | #8b5cf6 | — |
| entity.name.type, entity.other.inherited-class, entity.name.struct | #dc2626 | — |
| entity.name.class, support.class | #dc2626 | — |
| entity.name.interface, entity.name.type.interface | #10b981 | — |
| entity.name.namespace, entity.name.scope-resolution | #f59e0b | — |
| punctuation.definition.decorator, entity.name.function.decorator | #06b6d4 | — |
| meta.tag, meta.tag.html, meta.tag.jsx | #8b5cf6 | — |
| string.regexp | #10b981 | — |
| string.template, string.template.js, string.template.expression.js | #10b981 | — |
| support.type.property-name.json | #10b981 | — |
| constant.language.json | #8b5cf6 | — |
| markup.heading, markup.heading.1, markup.heading.2 | #10b981 | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |