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.activeBackground#0f3d2a33
- activityBar.activeBorder#39ff14
- activityBar.activeFocusBorder#00ff88
- activityBar.background#0a0c0a
- activityBar.border#1a3329
- activityBar.foreground#1aff8c
- activityBar.inactiveForeground#2d5a3d
- activityBarBadge.background#39ff14
- activityBarBadge.foreground#0a0c0a
- badge.background#39ff14
- badge.foreground#0a0c0a
- breadcrumb.activeSelectionForeground#39ff14
- breadcrumb.background#0a0c0a
- breadcrumb.focusForeground#00d463
- breadcrumb.foreground#2d5a3d
- button.background#1aff8c
- button.foreground#0a0c0a
- button.hoverBackground#39ff14
- button.secondaryBackground#0f3d2a
- button.secondaryForeground#00ff88
- button.secondaryHoverBackground#133a2e
- checkbox.background#0f3d2a
- checkbox.border#1aff8c
- checkbox.foreground#00ff99
- diffEditor.insertedLineBackground#00ff6611
- diffEditor.insertedTextBackground#00ff6622
- diffEditor.removedLineBackground#ff537011
- diffEditor.removedTextBackground#ff537022
- dropdown.background#0f3d2a
- dropdown.border#1aff8c
- dropdown.foreground#00ff99
- dropdown.listBackground#0d110e
- editor.background#0a0c0a
- editor.findMatchBackground#2d6e4d88
- editor.findMatchHighlightBackground#2d6e4d44
- editor.foreground#00d463
- editor.lineHighlightBackground#0f1a12
- editor.rangeHighlightBackground#0f3d2a22
- editor.selectionBackground#0f3d2a55
- editor.selectionHighlightBackground#0f3d2a33
- editor.wordHighlightBackground#1a4a3344
- editor.wordHighlightStrongBackground#1a4a3366
- editorBracketHighlight.foreground1#00ff88
- editorBracketHighlight.foreground2#39ff14
- editorBracketHighlight.foreground3#1aff8c
- editorBracketMatch.background#0f3d2a66
- editorBracketMatch.border#00ff88
- editorCursor.foreground#39ff14
- editorError.foreground#ff5370
- editorGroup.border#1a3329
- editorGroup.dropBackground#0f3d2a44
- editorGroup.emptyBackground#0a0c0a
- editorGroupHeader.noTabsBackground#0d110e
- editorGroupHeader.tabsBackground#0d110e
- editorGroupHeader.tabsBorder#1a3329
- editorGutter.addedBackground#00ff66
- editorGutter.background#0a0c0a
- editorGutter.commentRangeForeground#2d5a3d
- editorGutter.deletedBackground#ff5370
- editorGutter.modifiedBackground#ffb74d
- editorHint.foreground#82b1ff
- editorHoverWidget.background#0d110e
- editorHoverWidget.border#1aff8c
- editorHoverWidget.statusBarBackground#0a0c0a
- editorIndentGuide.activeBackground1#00ff66
- editorIndentGuide.background1#1a3329
- editorInfo.foreground#40c4ff
- editorLineNumber.activeForeground#00ff88
- editorLineNumber.foreground#2d5a3d
- editorRuler.foreground#1a3329
- editorSuggestWidget.background#0d110e
- editorSuggestWidget.border#1aff8c
- editorSuggestWidget.foreground#00d463
- editorSuggestWidget.highlightForeground#39ff14
- editorSuggestWidget.selectedBackground#0f3d2a
- editorWarning.foreground#ffb74d
- editorWidget.background#0d110e
- editorWidget.border#1aff8c
- editorWidget.foreground#00d463
- errorForeground#ff5370
- extensionButton.prominentBackground#1aff8c
- extensionButton.prominentForeground#0a0c0a
- extensionButton.prominentHoverBackground#39ff14
- gitDecoration.conflictingResourceForeground#ff80ff
- gitDecoration.deletedResourceForeground#ff5370
- gitDecoration.ignoredResourceForeground#2d5a3d
- gitDecoration.modifiedResourceForeground#ffb74d
- gitDecoration.submoduleResourceForeground#40c4ff
- gitDecoration.untrackedResourceForeground#00ff66
- input.background#0f3d2a
- input.border#1aff8c
- input.foreground#00ff99
- input.placeholderForeground#2d5a3d
- inputOption.activeBackground#0f3d2a
- inputOption.activeBorder#39ff14
- inputValidation.errorBackground#ff537033
- inputValidation.errorBorder#ff5370
- inputValidation.infoBackground#40c4ff33
- inputValidation.infoBorder#40c4ff
- inputValidation.warningBackground#ffb74d33
- inputValidation.warningBorder#ffb74d
- keybindingLabel.background#0f3d2a
- keybindingLabel.border#1aff8c
- keybindingLabel.foreground#00ff88
- list.activeSelectionBackground#0f3d2a
- list.activeSelectionForeground#00ff88
- list.deemphasizedForeground#2d5a3d
- list.dropBackground#0f3d2a66
- list.focusBackground#0f3d2a88
- list.highlightForeground#39ff14
- list.hoverBackground#0d2818
- list.inactiveSelectionBackground#0a1f15
- list.inactiveSelectionForeground#00d463
- listFilterWidget.background#0d110e
- listFilterWidget.noMatchesOutline#ff5370
- listFilterWidget.outline#1aff8c
- menu.background#0d110e
- menu.foreground#00d463
- menu.selectionBackground#0f3d2a
- menu.selectionForeground#00ff88
- menu.separatorBackground#1a3329
- menubar.selectionBackground#0f3d2a
- menubar.selectionForeground#00ff88
- merge.border#1a3329
- merge.commonContentBackground#ffb74d22
- merge.commonHeaderBackground#ffb74d44
- merge.currentContentBackground#00ff6622
- merge.currentHeaderBackground#00ff6644
- merge.incomingContentBackground#40c4ff22
- merge.incomingHeaderBackground#40c4ff44
- minimap.background#0d110e
- minimapGutter.addedBackground#00ff66
- minimapGutter.deletedBackground#ff5370
- minimapGutter.modifiedBackground#ffb74d
- minimapSlider.activeBackground#1a332999
- minimapSlider.background#1a332955
- minimapSlider.hoverBackground#1a332977
- notificationCenter.border#1aff8c
- notificationCenterHeader.background#0f3d2a
- notificationCenterHeader.foreground#00ff88
- notifications.background#0d110e
- notifications.border#1aff8c
- notifications.foreground#00d463
- notificationsErrorIcon.foreground#ff5370
- notificationsInfoIcon.foreground#40c4ff
- notificationsWarningIcon.foreground#ffb74d
- notificationToast.border#1aff8c
- panel.background#0d110e
- panel.border#1a3329
- panelInput.border#1a3329
- panelTitle.activeBorder#1aff8c
- panelTitle.activeForeground#00ff88
- panelTitle.inactiveForeground#2d5a3d
- peekViewEditor.background#0a0c0a
- peekViewResult.background#101613
- peekViewTitle.background#0f3d2a
- peekViewTitleDescription.foreground#2d5a3d
- peekViewTitleLabel.foreground#00ff88
- progressBar.background#1aff8c
- quickInput.background#0d110e
- quickInput.foreground#00d463
- quickInputList.focusBackground#0f3d2a66
- quickInputTitle.background#0f3d2a
- scrollbar.shadow#00000055
- scrollbarSlider.activeBackground#1a332988
- scrollbarSlider.background#1a332944
- scrollbarSlider.hoverBackground#1a332966
- settings.checkboxBackground#0f3d2a
- settings.checkboxBorder#1aff8c
- settings.checkboxForeground#00ff99
- settings.dropdownBackground#0f3d2a
- settings.dropdownBorder#1aff8c
- settings.dropdownForeground#00ff99
- settings.headerForeground#00ff88
- settings.modifiedItemIndicator#1aff8c
- settings.numberInputBackground#0f3d2a
- settings.numberInputBorder#1aff8c
- settings.numberInputForeground#00ff99
- settings.textInputBackground#0f3d2a
- settings.textInputBorder#1aff8c
- settings.textInputForeground#00ff99
- sideBar.background#0d110e
- sideBar.border#1a3329
- sideBar.foreground#00d463
- sideBarSectionHeader.background#101613
- sideBarSectionHeader.border#1a3329
- sideBarSectionHeader.foreground#1aff8c
- sideBarTitle.foreground#00ff88
- statusBar.background#0a0c0a
- statusBar.border#1a3329
- statusBar.debuggingBackground#ff5370
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#00d463
- statusBar.noFolderBackground#0d110e
- statusBarItem.activeBackground#0f3d2a66
- statusBarItem.hoverBackground#0f3d2a44
- statusBarItem.prominentBackground#1aff8c
- statusBarItem.prominentForeground#0a0c0a
- statusBarItem.prominentHoverBackground#39ff14
- tab.activeBackground#0a0c0a
- tab.activeBorder#39ff14
- tab.activeBorderTop#39ff14
- tab.activeForeground#00ff88
- tab.border#1a3329
- tab.hoverBackground#0f1a12
- tab.hoverForeground#00d463
- tab.inactiveBackground#0d110e
- tab.inactiveForeground#2d5a3d
- tab.lastPinnedBorder#1aff8c
- tab.unfocusedActiveBackground#0d110e
- tab.unfocusedActiveForeground#339966
- tab.unfocusedInactiveForeground#1a3329
- terminal.ansiBlack#0a0c0a
- terminal.ansiBlue#40c4ff
- terminal.ansiBrightBlack#2d5a3d
- terminal.ansiBrightBlue#64b5f6
- terminal.ansiBrightCyan#4dffb3
- terminal.ansiBrightGreen#00ff88
- terminal.ansiBrightMagenta#ff99ff
- terminal.ansiBrightRed#ff6b8a
- terminal.ansiBrightWhite#33ffaa
- terminal.ansiBrightYellow#fff176
- terminal.ansiCyan#1aff8c
- terminal.ansiGreen#00ff66
- terminal.ansiMagenta#ff80ff
- terminal.ansiRed#ff5370
- terminal.ansiWhite#00d463
- terminal.ansiYellow#ffee58
- terminal.background#0a0c0a
- terminal.foreground#00d463
- terminal.selectionBackground#0f3d2a66
- terminalCursor.background#0a0c0a
- terminalCursor.foreground#39ff14
- titleBar.activeBackground#0a0c0a
- titleBar.activeForeground#1aff8c
- titleBar.border#1a3329
- titleBar.inactiveBackground#0d110e
- titleBar.inactiveForeground#2d5a3d
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, comment.block.documentation | #4d8f6a | italic |
| string, string.quoted, string.template, string.interpolated, string.regexp | #ffee58 | — |
| string.template, punctuation.definition.string.template | #fff176 | — |
| constant.character.escape | #ffb74d | bold |
| keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier | #ff5370 | bold |
| keyword.control.flow, keyword.control.conditional, keyword.control.loop | #ff6b8a | bold |
| entity.name.function, meta.function-call entity.name.function, support.function, keyword.other.special-method | #40c4ff | bold |
| meta.function-call, variable.function | #64b5f6 | — |
| entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class | #82b1ff | bold |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex | #ffb74d | — |
| constant.language.boolean | #ff9800 | bold |
| constant.language.null, constant.language.undefined | #ff5370 | bold |
| variable, variable.other, variable.parameter | #ff80ff | — |
| variable.language.this, variable.language.self | #ff5370 | italic bold |
| variable.other.property, support.variable.property, meta.object-literal.key, entity.name.tag.yaml | #1aff8c | — |
| meta.object-literal.key, string.unquoted.yaml | #00ff88 | — |
| constant, variable.other.constant, support.constant | #39ff14 | bold |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison | #00ff66 | — |
| keyword.operator.assignment | #39ff14 | bold |
| punctuation, punctuation.separator, punctuation.terminator | #66ff99 | — |
| punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces | #00d463 | — |
| entity.name.tag, meta.tag, markup.deleted.git_gutter | #ff5370 | bold |
| entity.other.attribute-name, meta.attribute | #82b1ff | — |
| keyword.control.import, keyword.control.export, keyword.control.from | #40c4ff | bold |
| entity.name.type.module | #64b5f6 | — |
| support.type.property-name.json, meta.structure.dictionary.key.json | #1aff8c | — |
| support.type.property-name.css, meta.property-name | #00ff88 | — |
| support.constant.property-value.css, meta.property-value | #ffb74d | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #ff5370 | — |
| markup.heading, entity.name.section.markdown | #39ff14 | bold |
| markup.bold | #00ff88 | bold |
| markup.italic | #66ff99 | italic |
| markup.inline.raw, markup.fenced_code | #ffee58 | — |
| markup.underline.link | #40c4ff | — |
| markup.quote | #4d8f6a | italic |
| entity.name.function.decorator.python | #ffb74d | bold |
| variable.parameter.function.language.special.self.python | #ff5370 | italic bold |
| support.class.component.tsx, support.class.component.jsx | #82b1ff | bold |
| entity.name.type.ts, entity.name.type.tsx | #82b1ff | bold |
| string.regexp | #1aff8c | bold |
| string.quoted.docstring.multi.python | #66ff99 | italic |
| invalid, invalid.deprecated | #ffffff | bold |
| markup.inserted.git_gutter | #00ff66 | — |
| markup.changed.git_gutter | #ffb74d | — |
| markup.deleted.git_gutter | #ff5370 | — |
| log.info | #40c4ff | — |
| log.warning | #ffb74d | — |
| log.error | #ff5370 | — |