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#ff6b35
- activityBar.background#151515
- activityBar.border#0094b3
- activityBar.foreground#ff6b35
- activityBar.inactiveForeground#999999
- activityBarBadge.background#ffd700
- activityBarBadge.foreground#0a0a0a
- breadcrumb.activeSelectionForeground#ffd700
- breadcrumb.background#151515
- breadcrumb.focusForeground#ff6b35
- breadcrumb.foreground#ff6b35
- debugIcon.breakpointDisabledForeground#666666
- debugIcon.breakpointForeground#ffd700
- debugIcon.breakpointUnverifiedForeground#999999
- debugToolBar.background#171717
- diffEditor.border#0094b3
- diffEditor.insertedTextBackground#4d4100
- diffEditor.removedTextBackground#00404d
- editor.background#0a0a0a
- editor.lineHighlightBackground#1a0b05
- editor.selectionBackground#4d2010
- editor.selectionHighlightBackground#002a33
- editor.wordHighlightBackground#332b00
- editorBracketHighlight.foreground1#ff6b35
- editorBracketHighlight.foreground2#00d4ff
- editorBracketHighlight.foreground3#ffd700
- editorBracketHighlight.foreground4#a855f7
- editorBracketHighlight.foreground5#ec4899
- editorBracketHighlight.foreground6#06b6d4
- editorBracketHighlight.unexpectedBracket.foreground#ff0000
- editorBracketMatch.background#1a0b05
- editorBracketMatch.border#ff6b35
- editorCursor.foreground#ff6b35
- editorGroup.border#00aacc
- editorGroupHeader.noTabsBackground#0d0d0d
- editorGroupHeader.tabsBackground#121212
- editorGutter.addedBackground#ccac00
- editorGutter.background#0a0a0a
- editorGutter.deletedBackground#998100
- editorGutter.modifiedBackground#00aacc
- editorIndentGuide.activeBackground1#ff6b35
- editorIndentGuide.activeBackground2#00d4ff
- editorIndentGuide.activeBackground3#ffd700
- editorIndentGuide.activeBackground4#a855f7
- editorIndentGuide.activeBackground5#ec4899
- editorIndentGuide.activeBackground6#06b6d4
- editorIndentGuide.background1#ff6b3566
- editorIndentGuide.background2#00d4ff66
- editorIndentGuide.background3#ffd70066
- editorIndentGuide.background4#a855f766
- editorIndentGuide.background5#ec489966
- editorIndentGuide.background6#06b6d466
- editorLineNumber.activeForeground#ff6b35
- editorLineNumber.foreground#999999
- editorWidget.background#101010
- editorWidget.border#00d4ff
- gitDecoration.addedResourceForeground#ffd700
- gitDecoration.deletedResourceForeground#ccac00
- gitDecoration.ignoredResourceForeground#666666
- gitDecoration.modifiedResourceForeground#00d4ff
- gitDecoration.untrackedResourceForeground#ff6b35
- input.background#242424
- list.activeSelectionBackground#ff6b3533
- list.activeSelectionForeground#0a0a0a
- list.focusBackground#ff6b3566
- list.focusForeground#ffffff
- list.hoverBackground#1f1f1f
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#1f1f1f
- list.inactiveSelectionForeground#999999
- menu.background#171717
- menu.border#007f99
- menu.foreground#e6e6e6
- menu.selectionBackground#00d4ff
- menu.selectionForeground#0a0a0a
- menu.separatorBackground#4d4d4d
- menubar.selectionBackground#00d4ff
- menubar.selectionForeground#0a0a0a
- minimap.background#0a0a0a99
- minimap.errorHighlight#00d4ff
- minimap.foregroundOpacity#ff6b35
- minimapSlider.background#ff6b35
- notificationCenter.border#151515
- notificationCenterHeader.background#1a1a1a
- notificationLink.foreground#ff6b35
- notifications.background#171717
- notifications.foreground#ffffff
- notificationToast.background#171717
- panel.background#171717
- panel.border#0094b3
- panelTitle.activeBorder#ff6b35
- panelTitle.activeForeground#ff6b35
- panelTitle.inactiveForeground#999999
- peekViewEditor.background#101010
- peekViewEditor.matchHighlightBackground#ff6b3533
- peekViewResult.background#1a1a1a
- peekViewResult.matchHighlightBackground#00d4ff66
- peekViewResult.selectionBackground#4d2010
- peekViewTitle.background#ff6b35
- pickerGroup.border#0094b3
- pickerGroup.foreground#ff6b35
- quickInput.background#060606
- quickInput.foreground#ffffff
- quickInputList.focusBackground#00d4ff
- quickInputList.focusForeground#ffffff
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#ff6b35
- scrollbarSlider.background#ff6b3599
- scrollbarSlider.hoverBackground#ff6b35cc
- settings.checkboxBackground#ff6b35
- settings.checkboxForeground#0a0a0a
- settings.dropdownBackground#242424
- settings.dropdownForeground#ffffff
- settings.focusedRowBorder#ff6b35
- settings.headerForeground#ff6b35
- settings.modifiedItemIndicator#00d4ff
- settings.rowHoverBackground#1f1f1f
- sideBar.background#171717
- sideBar.border#0094b3
- sideBar.foreground#e6e6e6
- sideBarSectionHeader.background#1d1d1d
- sideBarSectionHeader.foreground#ff6b35
- sideBarTitle.foreground#ff6b35
- statusBar.background#ff6b35
- statusBar.debuggingBackground#00d4ff
- statusBar.foreground#0a0a0a
- statusBar.noFolderBackground#151515
- statusBarItem.hoverBackground#020202
- tab.activeBackground#0a0a0a
- tab.activeBorder#ff6b35
- tab.activeForeground#ff6b35
- tab.activeModifiedBorder#ffd700
- tab.hoverBackground#171717
- tab.hoverForeground#e6e6e6
- tab.inactiveBackground#121212
- tab.inactiveForeground#999999
- tab.unfocusedActiveBorder#b34b25
- terminal.ansiBlack#000000
- terminal.ansiBlue#0000ff
- terminal.ansiCyan#ffd700
- terminal.ansiGreen#00ff00
- terminal.ansiMagenta#00d4ff
- terminal.ansiRed#ff0000
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffd700
- terminal.background#0a0a0a
- terminal.foreground#ffffff
- titleBar.activeBackground#ff6b35
- titleBar.activeForeground#0a0a0a
- titleBar.border#007f99
- titleBar.inactiveBackground#151515
- titleBar.inactiveForeground#b3b3b3
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, comment.line, comment.block | #888888 | italic |
| keyword, keyword.control, keyword.operator, keyword.control.directive | #ff6b35 | bold |
| storage, storage.type, storage.modifier, storage.type.primitive | #00d4ff | bold |
| variable, variable.parameter, variable.language, variable.other.readwrite | #ffd700 | — |
| entity.name.function, support.function, support.function.builtin | #a855f7 | — |
| meta.function-call, variable.function | #a855f7 | — |
| string, string.quoted.single, string.quoted.double, string.quoted.template | #ff6b35 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float | #00d4ff | — |
| constant, constant.language, constant.character | #00d4ff | — |
| constant.language.boolean | #ffd700 | — |
| keyword.operator, punctuation.separator, punctuation.terminator | #ffd700 | — |
| punctuation, punctuation.definition, punctuation.section | #999999 | — |
| entity.name.tag, entity.name.tag.html, entity.name.tag.jsx | #a855f7 | — |
| entity.other.attribute-name, entity.other.attribute-name.html | #ffd700 | — |
| entity.other.attribute-name.class, entity.other.attribute-name.class.css | #10b981 | — |
| entity.other.attribute-name.id, entity.other.attribute-name.id.css | #00d4ff | — |
| support.type.property-name, support.type.property-name.css | #ff6b35 | — |
| support.constant.property-value, support.constant.property-value.css | #a855f7 | — |
| entity.name.type, entity.other.inherited-class, entity.name.struct | #10b981 | — |
| entity.name.class, support.class | #10b981 | — |
| entity.name.interface, entity.name.type.interface | #ff6b35 | — |
| entity.name.namespace, entity.name.scope-resolution | #00d4ff | — |
| punctuation.definition.decorator, entity.name.function.decorator | #ffd700 | — |
| meta.tag, meta.tag.html, meta.tag.jsx | #a855f7 | — |
| string.regexp | #ff6b35 | — |
| string.template, string.template.js, string.template.expression.js | #ff6b35 | — |
| support.type.property-name.json | #ff6b35 | — |
| constant.language.json | #a855f7 | — |
| markup.heading, markup.heading.1, markup.heading.2 | #ff6b35 | bold |
| markup.underline.link | #2563eb | underline |
| markup.bold | — | bold |
| markup.italic | — | italic |