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#6b7280
- activityBar.background#3c444f
- activityBar.border#6d727a
- activityBar.foreground#6b7280
- activityBar.inactiveForeground#959697
- activityBarBadge.background#d1d5db
- activityBarBadge.foreground#374151
- breadcrumb.activeSelectionForeground#d1d5db
- breadcrumb.background#3c444f
- breadcrumb.focusForeground#6b7280
- breadcrumb.foreground#6b7280
- debugIcon.breakpointDisabledForeground#646464
- debugIcon.breakpointForeground#d1d5db
- debugIcon.breakpointUnverifiedForeground#959697
- debugToolBar.background#444d59
- diffEditor.border#6d727a
- diffEditor.insertedTextBackground#3f4042
- diffEditor.removedTextBackground#2f3135
- editor.background#374151
- editor.lineHighlightBackground#0b0b0d
- editor.selectionBackground#202226
- editor.selectionHighlightBackground#1f2123
- editor.wordHighlightBackground#2a2b2c
- editorBracketHighlight.foreground1#6b7280
- editorBracketHighlight.foreground2#9ca3af
- editorBracketHighlight.foreground3#d1d5db
- editorBracketHighlight.foreground4#6b7280
- editorBracketHighlight.foreground5#9ca3af
- editorBracketHighlight.foreground6#d1d5db
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#0b0b0d
- editorBracketMatch.border#6b7280
- editorCursor.foreground#6b7280
- editorGroup.border#7d828c
- editorGroupHeader.noTabsBackground#262b32
- editorGroupHeader.tabsBackground#353b45
- editorGutter.addedBackground#a7aaaf
- editorGutter.background#374151
- editorGutter.deletedBackground#7d8083
- editorGutter.modifiedBackground#7d828c
- editorIndentGuide.activeBackground1#6b7280
- editorIndentGuide.activeBackground2#9ca3af
- editorIndentGuide.activeBackground3#d1d5db
- editorIndentGuide.activeBackground4#6b7280
- editorIndentGuide.activeBackground5#9ca3af
- editorIndentGuide.activeBackground6#d1d5db
- editorIndentGuide.background1#6b728066
- editorIndentGuide.background2#9ca3af66
- editorIndentGuide.background3#d1d5db66
- editorIndentGuide.background4#6b728066
- editorIndentGuide.background5#9ca3af66
- editorIndentGuide.background6#d1d5db66
- editorLineNumber.activeForeground#6b7280
- editorLineNumber.foreground#959697
- editorWidget.background#414b59
- editorWidget.border#9ca3af
- gitDecoration.addedResourceForeground#d1d5db
- gitDecoration.deletedResourceForeground#a7aaaf
- gitDecoration.ignoredResourceForeground#646464
- gitDecoration.modifiedResourceForeground#9ca3af
- gitDecoration.untrackedResourceForeground#6b7280
- input.background#555f6d
- list.activeSelectionBackground#6b728033
- list.activeSelectionForeground#374151
- list.focusBackground#6b728066
- list.focusForeground#f9fafb
- list.hoverBackground#505a68
- list.hoverForeground#f9fafb
- list.inactiveSelectionBackground#505a68
- list.inactiveSelectionForeground#959697
- menu.background#444d59
- menu.border#5e6269
- menu.foreground#e0e1e2
- menu.selectionBackground#9ca3af
- menu.selectionForeground#374151
- menu.separatorBackground#4b4b4b
- menubar.selectionBackground#9ca3af
- menubar.selectionForeground#374151
- minimap.background#37415199
- minimap.errorHighlight#9ca3af
- minimap.foregroundOpacity#6b7280
- minimapSlider.background#6b7280
- notificationCenter.border#3c444f
- notificationCenterHeader.background#4b5563
- notificationLink.foreground#6b7280
- notifications.background#444d59
- notifications.foreground#f9fafb
- notificationToast.background#444d59
- panel.background#444d59
- panel.border#6d727a
- panelTitle.activeBorder#6b7280
- panelTitle.activeForeground#6b7280
- panelTitle.inactiveForeground#959697
- peekViewEditor.background#414b59
- peekViewEditor.matchHighlightBackground#6b728033
- peekViewResult.background#4b5563
- peekViewResult.matchHighlightBackground#9ca3af66
- peekViewResult.selectionBackground#202226
- peekViewTitle.background#6b7280
- pickerGroup.border#6d727a
- pickerGroup.foreground#6b7280
- quickInput.background#37414f
- quickInput.foreground#f9fafb
- quickInputList.focusBackground#9ca3af
- quickInputList.focusForeground#f9fafb
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#6b7280
- scrollbarSlider.background#6b728099
- scrollbarSlider.hoverBackground#6b7280cc
- settings.checkboxBackground#6b7280
- settings.checkboxForeground#374151
- settings.dropdownBackground#555f6d
- settings.dropdownForeground#f9fafb
- settings.focusedRowBorder#6b7280
- settings.headerForeground#6b7280
- settings.modifiedItemIndicator#9ca3af
- settings.rowHoverBackground#505a68
- sideBar.background#444d59
- sideBar.border#6d727a
- sideBar.foreground#e0e1e2
- sideBarSectionHeader.background#535e6d
- sideBarSectionHeader.foreground#6b7280
- sideBarTitle.foreground#6b7280
- statusBar.background#6b7280
- statusBar.debuggingBackground#9ca3af
- statusBar.foreground#374151
- statusBar.noFolderBackground#3c444f
- statusBarItem.hoverBackground#0b0d10
- tab.activeBackground#374151
- tab.activeBorder#6b7280
- tab.activeForeground#6b7280
- tab.activeModifiedBorder#d1d5db
- tab.hoverBackground#444d59
- tab.hoverForeground#e0e1e2
- tab.inactiveBackground#353b45
- tab.inactiveForeground#959697
- tab.unfocusedActiveBorder#4b505a
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#d1d5db
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#9ca3af
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#d1d5db
- terminal.background#374151
- terminal.foreground#f9fafb
- titleBar.activeBackground#6b7280
- titleBar.activeForeground#374151
- titleBar.border#5e6269
- titleBar.inactiveBackground#3c444f
- titleBar.inactiveForeground#aeafb0
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 | #6b7280 | 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 | #6b7280 | — |
| 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 | #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 | #f59e0b | — |
| support.type.property-name, support.type.property-name.css | #6b7280 | — |
| 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 | #6b7280 | — |
| 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 | #6b7280 | — |
| string.template, string.template.js, string.template.expression.js | #6b7280 | — |
| support.type.property-name.json | #6b7280 | — |
| constant.language.json | #8b5cf6 | — |
| markup.heading, markup.heading.1, markup.heading.2 | #6b7280 | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |