Theme Icon Pack
Publisher: SecureDevThemes in package: 5
Theme Icon Pack is a comprehensive VS Code extension featuring beautiful dark and light themes with matching icon sets, providing a complete visual experience for developers. 🚀
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#00ff41
- activityBar.background#050d0a
- activityBar.border#0a1612
- activityBar.foreground#00ff41
- activityBar.inactiveForeground#2d6650
- activityBarBadge.background#00ff41
- activityBarBadge.foreground#000000
- badge.background#00ff41
- badge.foreground#000000
- breadcrumb.activeSelectionForeground#00ff41
- breadcrumb.background#0a1612
- breadcrumb.focusForeground#00ff41
- breadcrumb.foreground#4d8866
- button.background#00ff41
- button.foreground#000000
- button.hoverBackground#00cc34
- button.secondaryBackground#1a4d3a
- button.secondaryForeground#00ff41
- dropdown.background#0f2520
- dropdown.border#2a5d45
- dropdown.foreground#e0f2e9
- editor.background#0a1612
- editor.findMatchBackground#00ff4160
- editor.findMatchHighlightBackground#00ff4140
- editor.foreground#e0f2e9
- editor.lineHighlightBackground#0f2520
- editor.selectionBackground#1a4d3a
- editor.selectionHighlightBackground#1a4d3a80
- editorBracketMatch.background#00ff4130
- editorBracketMatch.border#00ff41
- editorCursor.foreground#00ff41
- editorError.foreground#ff3333
- editorHint.foreground#00ff41
- editorIndentGuide.activeBackground#2a5d45
- editorIndentGuide.background#1a3d30
- editorInfo.foreground#4da6ff
- editorLineNumber.activeForeground#00ff41
- editorLineNumber.foreground#2d6650
- editorSuggestWidget.background#0f2520
- editorSuggestWidget.border#00ff41
- editorSuggestWidget.highlightForeground#00ff41
- editorSuggestWidget.selectedBackground#1a4d3a
- editorWarning.foreground#ffcc00
- editorWhitespace.foreground#1a3d30
- editorWidget.background#0f2520
- editorWidget.border#2a5d45
- gitDecoration.addedResourceForeground#00ff41
- gitDecoration.conflictingResourceForeground#ff00ff
- gitDecoration.deletedResourceForeground#ff3333
- gitDecoration.ignoredResourceForeground#4d8866
- gitDecoration.modifiedResourceForeground#ffcc00
- gitDecoration.untrackedResourceForeground#00ff41
- input.background#0f2520
- input.border#2a5d45
- input.foreground#e0f2e9
- input.placeholderForeground#4d8866
- inputOption.activeBorder#00ff41
- inputValidation.errorBackground#0f2520
- inputValidation.errorBorder#ff3333
- inputValidation.warningBorder#ffcc00
- list.activeSelectionBackground#1a4d3a
- list.activeSelectionForeground#00ff41
- list.focusBackground#1a4d3a
- list.focusOutline#00ff41
- list.highlightForeground#00ff41
- list.hoverBackground#0f252080
- list.inactiveSelectionBackground#0f2520
- menu.background#0f2520
- menu.foreground#e0f2e9
- menu.selectionBackground#1a4d3a
- menu.selectionForeground#00ff41
- menu.separatorBackground#2a5d45
- minimap.background#0a161280
- minimapSlider.activeBackground#00ff4140
- minimapSlider.background#1a3d3080
- minimapSlider.hoverBackground#2a5d4580
- notificationCenter.border#2a5d45
- notificationCenterHeader.background#0f2520
- notificationLink.foreground#00ff41
- notifications.background#0f2520
- notifications.border#2a5d45
- panel.background#0d1915
- panel.border#1a3d30
- panelTitle.activeBorder#00ff41
- panelTitle.activeForeground#00ff41
- panelTitle.inactiveForeground#4d8866
- peekView.border#00ff41
- peekViewEditor.background#0d1915
- peekViewResult.background#0a1612
- peekViewTitle.background#050d0a
- progressBar.background#00ff41
- scrollbarSlider.activeBackground#00ff4160
- scrollbarSlider.background#1a3d3080
- scrollbarSlider.hoverBackground#2a5d4580
- sideBar.background#0d1915
- sideBar.border#0a1612
- sideBar.foreground#a8d4bb
- sideBarSectionHeader.background#0a1612
- sideBarSectionHeader.border#1a3d30
- sideBarSectionHeader.foreground#00ff41
- sideBarTitle.foreground#00ff41
- statusBar.background#050d0a
- statusBar.border#00ff4140
- statusBar.debuggingBackground#00ff41
- statusBar.debuggingForeground#000000
- statusBar.foreground#4dff7f
- statusBar.noFolderBackground#050d0a
- statusBarItem.prominentBackground#1a4d3a
- statusBarItem.prominentHoverBackground#2a6d55
- tab.activeBackground#0a1612
- tab.activeBorder#00ff41
- tab.activeBorderTop#00ff41
- tab.activeForeground#00ff41
- tab.border#0a1612
- tab.hoverBackground#0f2520
- tab.inactiveBackground#050d0a
- tab.inactiveForeground#4d8866
- tab.unfocusedActiveBorder#2d6650
- terminal.ansiBlack#0a1612
- terminal.ansiBlue#4da6ff
- terminal.ansiBrightBlack#2d6650
- terminal.ansiBrightBlue#66b3ff
- terminal.ansiBrightCyan#00ffff
- terminal.ansiBrightGreen#00ff41
- terminal.ansiBrightMagenta#ff66ff
- terminal.ansiBrightRed#ff4d4d
- terminal.ansiBrightWhite#e0f2e9
- terminal.ansiBrightYellow#ffff00
- terminal.ansiCyan#00e6e6
- terminal.ansiGreen#00ff41
- terminal.ansiMagenta#ff00ff
- terminal.ansiRed#ff3333
- terminal.ansiWhite#a8d4bb
- terminal.ansiYellow#ffcc00
- terminal.background#0a1612
- terminal.foreground#e0f2e9
- terminal.selectionBackground#1a4d3a80
- titleBar.activeBackground#050d0a
- titleBar.activeForeground#00ff41
- titleBar.border#00ff4140
- titleBar.inactiveBackground#0a1612
- titleBar.inactiveForeground#2d6650
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #4d8866 | italic |
| string, string.quoted | #ffcc00 | — |
| string.regexp | #ff00ff | — |
| constant.numeric, constant.language, constant.character | #ff66ff | — |
| constant.character.escape, constant.other.placeholder | #00ffff | — |
| keyword, storage.type, storage.modifier | #00ff41 | bold |
| keyword.control, keyword.operator | #4dff7f | — |
| keyword.operator.logical, keyword.operator.comparison, keyword.operator.assignment | #00ff41 | — |
| entity.name.function, meta.function-call, support.function | #4da6ff | |
| entity.name.type, entity.name.class, support.type, support.class | #00ffff | bold |
| entity.name.tag | #00ff41 | bold |
| entity.other.attribute-name | #66ff99 | italic |
| variable, variable.other | #e0f2e9 | — |
| variable.parameter | #ffcc00 | italic |
| variable.language | #ff66ff | italic bold |
| support.constant | #ff66ff | — |
| meta.import, meta.export | #00ff41 | — |
| punctuation.definition.tag | #00ff41 | — |
| punctuation.separator, punctuation.terminator | #a8d4bb | — |
| meta.brace, punctuation.section | #00ff41 | — |
| markup.heading | #00ff41 | bold |
| markup.italic | #ffcc00 | italic |
| markup.bold | #00ff41 | bold |
| markup.underline.link | #4da6ff | underline |
| markup.inline.raw, markup.fenced_code | #66ff99 | — |
| markup.quote | #4d8866 | italic |
| markup.list | #00ff41 | — |
| invalid, invalid.illegal | #ffffff | — |
| entity.name.section | #00ffff | bold |
| meta.property-name, support.type.property-name | #66ff99 | — |
| meta.object-literal.key | #66ff99 | — |
| support.variable | #ff66ff | — |
| entity.name.module | #00ffff | — |
| variable.other.constant | #ff66ff | bold |
| meta.decorator | #ff00ff | — |
| entity.other.inherited-class | #00ffff | — |
| support.other.namespace | #00ffff | — |