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#fbbf24
- activityBar.background#222215
- activityBar.border#ac6f08
- activityBar.foreground#fbbf24
- activityBar.inactiveForeground#999584
- activityBarBadge.background#fcd34d
- activityBarBadge.foreground#1a1a0a
- breadcrumb.activeSelectionForeground#fcd34d
- breadcrumb.background#222215
- breadcrumb.focusForeground#fbbf24
- breadcrumb.foreground#fbbf24
- debugIcon.breakpointDisabledForeground#666358
- debugIcon.breakpointForeground#fcd34d
- debugIcon.breakpointUnverifiedForeground#999584
- debugToolBar.background#262617
- diffEditor.border#ac6f08
- diffEditor.insertedTextBackground#4c3f17
- diffEditor.removedTextBackground#4a2f03
- editor.background#1a1a0a
- editor.lineHighlightBackground#191304
- editor.selectionBackground#4b390b
- editor.selectionHighlightBackground#312002
- editor.wordHighlightBackground#322a0f
- editorBracketHighlight.foreground1#fbbf24
- editorBracketHighlight.foreground2#f59e0b
- editorBracketHighlight.foreground3#fcd34d
- editorBracketHighlight.foreground4#ff6b35
- editorBracketHighlight.foreground5#ffd700
- editorBracketHighlight.foreground6#7c3aed
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#191304
- editorBracketMatch.border#fbbf24
- editorCursor.foreground#fbbf24
- editorGroup.border#c47e09
- editorGroupHeader.noTabsBackground#15150d
- editorGroupHeader.tabsBackground#1d1d12
- editorGutter.addedBackground#caa93e
- editorGutter.background#1a1a0a
- editorGutter.deletedBackground#977f2e
- editorGutter.modifiedBackground#c47e09
- editorIndentGuide.activeBackground1#fbbf24
- editorIndentGuide.activeBackground2#f59e0b
- editorIndentGuide.activeBackground3#fcd34d
- editorIndentGuide.activeBackground4#ff6b35
- editorIndentGuide.activeBackground5#ffd700
- editorIndentGuide.activeBackground6#7c3aed
- editorIndentGuide.background1#fbbf2466
- editorIndentGuide.background2#f59e0b66
- editorIndentGuide.background3#fcd34d66
- editorIndentGuide.background4#ff6b3566
- editorIndentGuide.background5#ffd70066
- editorIndentGuide.background6#7c3aed66
- editorLineNumber.activeForeground#fbbf24
- editorLineNumber.foreground#999584
- editorWidget.background#202010
- editorWidget.border#f59e0b
- gitDecoration.addedResourceForeground#fcd34d
- gitDecoration.deletedResourceForeground#caa93e
- gitDecoration.ignoredResourceForeground#666358
- gitDecoration.modifiedResourceForeground#f59e0b
- gitDecoration.untrackedResourceForeground#fbbf24
- input.background#343424
- list.activeSelectionBackground#fbbf2433
- list.activeSelectionForeground#1a1a0a
- list.focusBackground#fbbf2466
- list.focusForeground#fff8dc
- list.hoverBackground#2f2f1f
- list.hoverForeground#fff8dc
- list.inactiveSelectionBackground#2f2f1f
- list.inactiveSelectionForeground#999584
- menu.background#262617
- menu.border#935f07
- menu.foreground#e6dfc6
- menu.selectionBackground#f59e0b
- menu.selectionForeground#1a1a0a
- menu.separatorBackground#4d4a42
- menubar.selectionBackground#f59e0b
- menubar.selectionForeground#1a1a0a
- minimap.background#1a1a0a99
- minimap.errorHighlight#f59e0b
- minimap.foregroundOpacity#fbbf24
- minimapSlider.background#fbbf24
- notificationCenter.border#222215
- notificationCenterHeader.background#2a2a1a
- notificationLink.foreground#fbbf24
- notifications.background#262617
- notifications.foreground#fff8dc
- notificationToast.background#262617
- panel.background#262617
- panel.border#ac6f08
- panelTitle.activeBorder#fbbf24
- panelTitle.activeForeground#fbbf24
- panelTitle.inactiveForeground#999584
- peekViewEditor.background#202010
- peekViewEditor.matchHighlightBackground#fbbf2433
- peekViewResult.background#2a2a1a
- peekViewResult.matchHighlightBackground#f59e0b66
- peekViewResult.selectionBackground#4b390b
- peekViewTitle.background#fbbf24
- pickerGroup.border#ac6f08
- pickerGroup.foreground#fbbf24
- quickInput.background#161606
- quickInput.foreground#fff8dc
- quickInputList.focusBackground#f59e0b
- quickInputList.focusForeground#fff8dc
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#fbbf24
- scrollbarSlider.background#fbbf2499
- scrollbarSlider.hoverBackground#fbbf24cc
- settings.checkboxBackground#fbbf24
- settings.checkboxForeground#1a1a0a
- settings.dropdownBackground#343424
- settings.dropdownForeground#fff8dc
- settings.focusedRowBorder#fbbf24
- settings.headerForeground#fbbf24
- settings.modifiedItemIndicator#f59e0b
- settings.rowHoverBackground#2f2f1f
- sideBar.background#262617
- sideBar.border#ac6f08
- sideBar.foreground#e6dfc6
- sideBarSectionHeader.background#2e2e1d
- sideBarSectionHeader.foreground#fbbf24
- sideBarTitle.foreground#fbbf24
- statusBar.background#fbbf24
- statusBar.debuggingBackground#f59e0b
- statusBar.foreground#1a1a0a
- statusBar.noFolderBackground#222215
- statusBarItem.hoverBackground#050502
- tab.activeBackground#1a1a0a
- tab.activeBorder#fbbf24
- tab.activeForeground#fbbf24
- tab.activeModifiedBorder#fcd34d
- tab.hoverBackground#262617
- tab.hoverForeground#e6dfc6
- tab.inactiveBackground#1d1d12
- tab.inactiveForeground#999584
- tab.unfocusedActiveBorder#b08619
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#fcd34d
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#f59e0b
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#fcd34d
- terminal.background#1a1a0a
- terminal.foreground#fff8dc
- titleBar.activeBackground#fbbf24
- titleBar.activeForeground#1a1a0a
- titleBar.border#935f07
- titleBar.inactiveBackground#222215
- titleBar.inactiveForeground#b3ae9a
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.line, comment.block | #9ca3af | italic |
| keyword, keyword.control, keyword.operator, keyword.control.directive | #eab308 | bold |
| storage, storage.type, storage.modifier, storage.type.primitive | #dc2626 | 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 | #eab308 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #dc2626 | — |
| constant, constant.language, constant.character | #dc2626 | — |
| constant.language.boolean | #06b6d4 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #06b6d4 | — |
| punctuation, punctuation.definition, punctuation.section | #d1d5db | — |
| 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 | #10b981 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css | #dc2626 | — |
| support.type.property-name, support.type.property-name.css | #eab308 | — |
| support.constant.property-value, support.constant.property-value.css | #8b5cf6 | — |
| entity.name.type, entity.other.inherited-class, entity.name.struct | #10b981 | — |
| entity.name.class, support.class | #10b981 | — |
| entity.name.interface, entity.name.type.interface | #eab308 | — |
| entity.name.namespace, entity.name.scope-resolution | #dc2626 | — |
| punctuation.definition.decorator, entity.name.function.decorator | #06b6d4 | — |
| meta.tag, meta.tag.html, meta.tag.jsx | #8b5cf6 | — |
| string.regexp | #eab308 | — |
| string.template, string.template.js, string.template.expression.js | #eab308 | — |
| support.type.property-name.json | #eab308 | — |
| constant.language.json | #8b5cf6 | — |
| markup.heading, markup.heading.1, markup.heading.2 | #eab308 | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |