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#0066cc
- activityBar.background#c6c7c8
- activityBar.border#b32447
- activityBar.foreground#0066cc
- activityBar.inactiveForeground#1f1f1f
- activityBarBadge.background#ffaa00
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#ffaa00
- breadcrumb.background#c6c7c8
- breadcrumb.focusForeground#0066cc
- breadcrumb.foreground#0066cc
- debugIcon.breakpointDisabledForeground#141414
- debugIcon.breakpointForeground#ffaa00
- debugIcon.breakpointUnverifiedForeground#1f1f1f
- debugToolBar.background#dfe0e1
- diffEditor.border#b32447
- diffEditor.insertedTextBackground#4d3300
- diffEditor.removedTextBackground#4d0f1f
- editor.background#ffffff
- editor.lineHighlightBackground#000a14
- editor.selectionBackground#001f3d
- editor.selectionHighlightBackground#330a14
- editor.wordHighlightBackground#332200
- editorBracketHighlight.foreground1#0066cc
- editorBracketHighlight.foreground2#ff3366
- editorBracketHighlight.foreground3#ffaa00
- editorBracketHighlight.foreground4#8844ff
- editorBracketHighlight.foreground5#00aaff
- editorBracketHighlight.foreground6#ff44aa
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#000a14
- editorBracketMatch.border#0066cc
- editorCursor.foreground#0066cc
- editorGroup.border#cc2952
- editorGroupHeader.noTabsBackground#7c7d7d
- editorGroupHeader.tabsBackground#aeaeaf
- editorGutter.addedBackground#cc8800
- editorGutter.background#ffffff
- editorGutter.deletedBackground#996600
- editorGutter.modifiedBackground#cc2952
- editorIndentGuide.activeBackground1#0066cc
- editorIndentGuide.activeBackground2#ff3366
- editorIndentGuide.activeBackground3#ffaa00
- editorIndentGuide.activeBackground4#8844ff
- editorIndentGuide.activeBackground5#00aaff
- editorIndentGuide.activeBackground6#ff44aa
- editorIndentGuide.background1#0066cc66
- editorIndentGuide.background2#ff336666
- editorIndentGuide.background3#ffaa0066
- editorIndentGuide.background4#8844ff66
- editorIndentGuide.background5#00aaff66
- editorIndentGuide.background6#ff44aa66
- editorLineNumber.activeForeground#0066cc
- editorLineNumber.foreground#1f1f1f
- editorWidget.background#eeeff0
- editorWidget.border#ff3366
- gitDecoration.addedResourceForeground#ffaa00
- gitDecoration.deletedResourceForeground#cc8800
- gitDecoration.ignoredResourceForeground#141414
- gitDecoration.modifiedResourceForeground#ff3366
- gitDecoration.untrackedResourceForeground#0066cc
- input.background#ffffff
- list.activeSelectionBackground#0066cc33
- list.activeSelectionForeground#ffffff
- list.focusBackground#0066cc66
- list.focusForeground#333333
- list.hoverBackground#fdfeff
- list.hoverForeground#333333
- list.inactiveSelectionBackground#fdfeff
- list.inactiveSelectionForeground#1f1f1f
- menu.background#dfe0e1
- menu.border#991f3d
- menu.foreground#2e2e2e
- menu.selectionBackground#ff3366
- menu.selectionForeground#ffffff
- menu.separatorBackground#0f0f0f
- menubar.selectionBackground#ff3366
- menubar.selectionForeground#ffffff
- minimap.background#ffffff99
- minimap.errorHighlight#ff3366
- minimap.foregroundOpacity#0066cc
- minimapSlider.background#0066cc
- notificationCenter.border#c6c7c8
- notificationCenterHeader.background#f8f9fa
- notificationLink.foreground#0066cc
- notifications.background#dfe0e1
- notifications.foreground#333333
- notificationToast.background#dfe0e1
- panel.background#dfe0e1
- panel.border#b32447
- panelTitle.activeBorder#0066cc
- panelTitle.activeForeground#0066cc
- panelTitle.inactiveForeground#1f1f1f
- peekViewEditor.background#eeeff0
- peekViewEditor.matchHighlightBackground#0066cc33
- peekViewResult.background#f8f9fa
- peekViewResult.matchHighlightBackground#ff336666
- peekViewResult.selectionBackground#001f3d
- peekViewTitle.background#0066cc
- pickerGroup.border#b32447
- pickerGroup.foreground#0066cc
- quickInput.background#e4e5e6
- quickInput.foreground#333333
- quickInputList.focusBackground#ff3366
- quickInputList.focusForeground#333333
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#0066cc
- scrollbarSlider.background#0066cc99
- scrollbarSlider.hoverBackground#0066cccc
- settings.checkboxBackground#0066cc
- settings.checkboxForeground#ffffff
- settings.dropdownBackground#ffffff
- settings.dropdownForeground#333333
- settings.focusedRowBorder#0066cc
- settings.headerForeground#0066cc
- settings.modifiedItemIndicator#ff3366
- settings.rowHoverBackground#fdfeff
- sideBar.background#dfe0e1
- sideBar.border#b32447
- sideBar.foreground#2e2e2e
- sideBarSectionHeader.background#111112113
- sideBarSectionHeader.foreground#0066cc
- sideBarTitle.foreground#0066cc
- statusBar.background#0066cc
- statusBar.debuggingBackground#ff3366
- statusBar.foreground#ffffff
- statusBar.noFolderBackground#c6c7c8
- statusBarItem.hoverBackground#333333
- tab.activeBackground#ffffff
- tab.activeBorder#0066cc
- tab.activeForeground#0066cc
- tab.activeModifiedBorder#ffaa00
- tab.hoverBackground#dfe0e1
- tab.hoverForeground#2e2e2e
- tab.inactiveBackground#aeaeaf
- tab.inactiveForeground#1f1f1f
- tab.unfocusedActiveBorder#00478f
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#ffaa00
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#ff3366
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffaa00
- terminal.background#ffffff
- terminal.foreground#333333
- titleBar.activeBackground#0066cc
- titleBar.activeForeground#ffffff
- titleBar.border#991f3d
- titleBar.inactiveBackground#c6c7c8
- titleBar.inactiveForeground#242424
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 | #2563eb | bold |
| storage, storage.type, storage.modifier, storage.type.primitive | #dc2626 | bold |
| variable, variable.parameter, variable.language, variable.other.readwrite | #d97706 | — |
| entity.name.function, support.function, support.function.builtin | #7c3aed | — |
| meta.function-call, variable.function | #7c3aed | — |
| string, string.quoted.single, string.quoted.double, string.quoted.template | #2563eb | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #dc2626 | — |
| constant, constant.language, constant.character | #dc2626 | — |
| constant.language.boolean | #d97706 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #d97706 | — |
| punctuation, punctuation.definition, punctuation.section | #9ca3af | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx | #7c3aed | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #d97706 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.css | #059669 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css | #dc2626 | — |
| support.type.property-name, support.type.property-name.css | #2563eb | — |
| support.constant.property-value, support.constant.property-value.css | #7c3aed | — |
| entity.name.type, entity.other.inherited-class, entity.name.struct | #059669 | — |
| entity.name.class, support.class | #059669 | — |
| entity.name.interface, entity.name.type.interface | #2563eb | — |
| entity.name.namespace, entity.name.scope-resolution | #dc2626 | — |
| punctuation.definition.decorator, entity.name.function.decorator | #d97706 | — |
| meta.tag, meta.tag.html, meta.tag.jsx | #7c3aed | — |
| string.regexp | #2563eb | — |
| string.template, string.template.js, string.template.expression.js | #2563eb | — |
| support.type.property-name.json | #2563eb | — |
| constant.language.json | #7c3aed | — |
| markup.heading, markup.heading.1, markup.heading.2 | #2563eb | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |