Chroma Library
Publisher: Code with BismillahThemes in package: 11
Advanced theming extension with customizable neon-futuristic color palettes, gradient backgrounds, and specialized themes 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#0a0f1a
- activityBar.activeBorder#00ffcc
- activityBar.background#020408
- activityBar.border#00ff99
- activityBar.foreground#00ffcc
- activityBar.inactiveForeground#4d7399
- activityBarBadge.background#ff6b35
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#00ffcc
- breadcrumb.background#0a0f1a
- breadcrumb.focusForeground#b3d9ff
- breadcrumb.foreground#6699aa
- button.background#00ff99
- button.border#00ff99
- button.foreground#000000
- button.hoverBackground#33ffaa
- debugToolBar.background#0a0f1a
- debugToolBar.border#00ff99
- descriptionForeground#6699aa
- dropdown.background#0a0f1a
- dropdown.border#00ff99
- dropdown.foreground#b3d9ff
- dropdown.listBackground#1a2030
- editor.background#0a0f1a
- editor.findMatchBackground#00ff9980
- editor.findMatchHighlightBackground#00ff9940
- editor.foreground#e0f0ff
- editor.lineHighlightBackground#1a2030
- editor.selectionBackground#00ff9960
- editor.selectionHighlightBackground#00ff9930
- editorCursor.foreground#00ffcc
- editorGroupHeader.border#00ff99
- editorGroupHeader.tabsBackground#051015
- editorGroupHeader.tabsBorder#00ff99
- editorGutter.background#051015
- editorIndentGuide.activeBackground#00ffcc
- editorIndentGuide.background#334455
- editorLineNumber.activeForeground#00ffcc
- editorLineNumber.foreground#6699aa
- editorOverviewRuler.addedForeground#00ff99
- editorOverviewRuler.border#00ff99
- editorOverviewRuler.deletedForeground#ff4757
- editorOverviewRuler.errorForeground#ff4757
- editorOverviewRuler.findMatchForeground#00ff99
- editorOverviewRuler.infoForeground#3742fa
- editorOverviewRuler.modifiedForeground#ffa502
- editorOverviewRuler.rangeHighlightForeground#00ff9960
- editorOverviewRuler.selectionHighlightForeground#00ff9960
- editorOverviewRuler.warningForeground#ffa502
- editorOverviewRuler.wordHighlightForeground#00ff9940
- editorOverviewRuler.wordHighlightStrongForeground#00ff9960
- editorWhitespace.foreground#334455
- editorWidget.background#0a0f1a
- editorWidget.border#00ff99
- editorWidget.foreground#b3d9ff
- errorForeground#ff4757
- extensionButton.prominentBackground#00ff99
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#33ffaa
- focusBorder#00ff99
- foreground#b3d9ff
- icon.foreground#00ffcc
- input.background#0a0f1a
- input.border#00ff99
- input.foreground#b3d9ff
- input.placeholderForeground#6699aa
- inputOption.activeBackground#00ff9960
- inputValidation.errorBackground#ff4757
- inputValidation.errorBorder#ff4757
- list.activeSelectionBackground#00ff9960
- list.activeSelectionForeground#ffffff
- list.focusBackground#00ff9960
- list.focusForeground#ffffff
- list.hoverBackground#1a2030
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#334455
- list.inactiveSelectionForeground#b3d9ff
- menu.background#0a0f1a
- menu.border#00ff99
- menu.foreground#b3d9ff
- menu.selectionBackground#00ff9960
- menu.selectionForeground#ffffff
- menu.separatorBackground#00ff99
- menubar.selectionBackground#00ff9960
- menubar.selectionForeground#ffffff
- merge.border#00ff99
- merge.commonContentBackground#6699aa20
- merge.commonHeaderBackground#6699aa40
- merge.currentContentBackground#00ff9920
- merge.currentHeaderBackground#00ff9940
- merge.incomingContentBackground#3742fa20
- merge.incomingHeaderBackground#3742fa40
- notificationCenter.border#00ff99
- notificationCenterHeader.background#1a2030
- notifications.background#0a0f1a
- notifications.border#00ff99
- notifications.foreground#b3d9ff
- notificationToast.border#00ff99
- panel.background#051015
- panel.border#00ff99
- panelInput.border#00ff99
- panelTitle.activeBorder#00ffcc
- panelTitle.activeForeground#00ffcc
- panelTitle.inactiveForeground#6699aa
- peekView.border#00ff99
- peekViewEditor.background#0a0f1a
- peekViewEditor.matchHighlightBackground#00ff9960
- peekViewResult.background#051015
- peekViewResult.fileForeground#b3d9ff
- peekViewResult.lineForeground#6699aa
- peekViewResult.matchHighlightBackground#00ff9960
- peekViewResult.selectionBackground#00ff9960
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#1a2030
- peekViewTitleDescription.foreground#6699aa
- peekViewTitleLabel.foreground#00ffcc
- pickerGroup.border#00ff99
- pickerGroup.foreground#00ffcc
- progressBar.background#00ff99
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#00ff99
- scrollbarSlider.background#00ff9940
- scrollbarSlider.hoverBackground#00ff9960
- selection.background#00ff9960
- sideBar.background#051015
- sideBar.border#00ff99
- sideBar.foreground#b3d9ff
- sideBarSectionHeader.background#0a0f1a
- sideBarSectionHeader.border#00ff99
- sideBarSectionHeader.foreground#00ff99
- sideBarTitle.foreground#00ffcc
- statusBar.background#020408
- statusBar.border#00ff99
- statusBar.debuggingBackground#ff6b35
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#b3d9ff
- statusBar.noFolderBackground#020408
- statusBarItem.activeBackground#1a2030
- statusBarItem.hoverBackground#0a0f1a
- tab.activeBackground#0a0f1a
- tab.activeBorder#00ffcc
- tab.activeBorderTop#00ffcc
- tab.activeForeground#00ffcc
- tab.border#00ff99
- tab.hoverBackground#1a2030
- tab.hoverForeground#b3d9ff
- tab.inactiveBackground#051015
- tab.inactiveForeground#6699aa
- terminal.ansiBlack#000000
- terminal.ansiBlue#3742fa
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#5865f2
- terminal.ansiBrightCyan#33ffdd
- terminal.ansiBrightGreen#33ffaa
- terminal.ansiBrightMagenta#e67eff
- terminal.ansiBrightRed#ff6b7a
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffb733
- terminal.ansiCyan#00ffcc
- terminal.ansiGreen#00ff99
- terminal.ansiMagenta#e056fd
- terminal.ansiRed#ff4757
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffa502
- terminal.background#0a0f1a
- terminal.border#00ff99
- terminal.foreground#b3d9ff
- titleBar.activeBackground#020408
- titleBar.activeForeground#b3d9ff
- titleBar.border#00ff99
- titleBar.inactiveBackground#020408
- titleBar.inactiveForeground#4d7399
- tree.indentGuidesStroke#00ff99
- widget.shadow#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6699aa | italic |
| keyword, storage.type, storage.modifier, keyword.control | #3742fa | bold |
| string, string.quoted, string.template | #ff4757 | — |
| constant.numeric, constant.language, constant.character | #00ff99 | — |
| entity.name.function, support.function, meta.function-call | #ffa502 | bold |
| variable, variable.other, variable.parameter | #b3d9ff | — |
| entity.name.type, support.type, storage.type | #00ffcc | bold |
| entity.name.class, support.class | #e056fd | bold |
| entity.name.interface | #70a1ff | bold |
| entity.name.enum | #7bed9f | bold |
| constant, constant.other | #ff9ff3 | — |
| keyword.operator | #00ffcc | — |
| punctuation | #b3d9ff | — |
| meta.brace, punctuation.section | #00ff99 | — |
| entity.name.tag | #ff6b35 | bold |
| entity.other.attribute-name | #70a1ff | — |
| string.quoted.double.html, string.quoted.single.html | #ff7675 | — |
| entity.name.section | #a29bfe | bold |
| support.constant | #fd79a8 | — |
| storage | #fdcb6e | — |
| string.regexp | #00b894 | — |
| constant.character.escape | #81ecec | — |
| invalid | #ff4757 | bold underline |
| invalid.deprecated | #636e72 | strikethrough |
| support.function.builtin | #55a3ff | — |
| support.function.library | #fd79a8 | — |
| entity.name.namespace | #a29bfe | — |
| entity.name.module | #00b894 | — |
| entity.name.decorator, meta.decorator | #e17055 | — |
| entity.name.macro | #74b9ff | — |
| entity.name.label | #fd79a8 | — |