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#050510
- activityBar.activeBorder#00ffff
- activityBar.background#010103
- activityBar.border#00ffff
- activityBar.foreground#00ffff
- activityBar.inactiveForeground#4d4d80
- activityBarBadge.background#ff00ff
- activityBarBadge.foreground#ffffff
- breadcrumb.activeSelectionForeground#00ffff
- breadcrumb.background#050510
- breadcrumb.focusForeground#e0f0ff
- breadcrumb.foreground#8080b0
- button.background#00ffff
- button.border#00ffff
- button.foreground#000000
- button.hoverBackground#b3ffff
- debugToolBar.background#050510
- debugToolBar.border#00ffff
- descriptionForeground#8080b0
- dropdown.background#050510
- dropdown.border#00ffff
- dropdown.foreground#e0f0ff
- dropdown.listBackground#111122
- editor.background#050510
- editor.findMatchBackground#00ffff80
- editor.findMatchHighlightBackground#00ffff40
- editor.foreground#e0f0ff
- editor.lineHighlightBackground#111122
- editor.selectionBackground#00ff9940
- editor.selectionHighlightBackground#00ff9920
- editorCursor.foreground#00ffff
- editorGroupHeader.border#00ffff
- editorGroupHeader.tabsBackground#030308
- editorGroupHeader.tabsBorder#00ffff
- editorGutter.background#030308
- editorIndentGuide.activeBackground#00ffff
- editorIndentGuide.background#4d4d80
- editorLineNumber.activeForeground#00ffff
- editorLineNumber.foreground#8080b0
- editorOverviewRuler.addedForeground#00ff99
- editorOverviewRuler.border#00ffff
- editorOverviewRuler.deletedForeground#ff0040
- editorOverviewRuler.errorForeground#ff0040
- editorOverviewRuler.findMatchForeground#00ffff
- editorOverviewRuler.infoForeground#00ffff
- editorOverviewRuler.modifiedForeground#ffff00
- editorOverviewRuler.rangeHighlightForeground#00ffff60
- editorOverviewRuler.selectionHighlightForeground#00ffff60
- editorOverviewRuler.warningForeground#ffff00
- editorOverviewRuler.wordHighlightForeground#00ffff40
- editorOverviewRuler.wordHighlightStrongForeground#00ffff60
- editorWhitespace.foreground#4d4d80
- editorWidget.background#050510
- editorWidget.border#00ffff
- editorWidget.foreground#e0f0ff
- errorForeground#ff0040
- extensionButton.prominentBackground#00ffff
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#b3ffff
- focusBorder#00ffff
- foreground#e0f0ff
- icon.foreground#00ffff
- input.background#050510
- input.border#00ffff
- input.foreground#e0f0ff
- input.placeholderForeground#8080b0
- inputOption.activeBackground#00ff9940
- inputValidation.errorBackground#ff0040
- inputValidation.errorBorder#ff0040
- list.activeSelectionBackground#00ff9940
- list.activeSelectionForeground#ffffff
- list.focusBackground#00ff9940
- list.focusForeground#ffffff
- list.hoverBackground#111122
- list.hoverForeground#ffffff
- list.inactiveSelectionBackground#4d4d80
- list.inactiveSelectionForeground#b3d9ff
- menu.background#050510
- menu.border#00ffff
- menu.foreground#e0f0ff
- menu.selectionBackground#00ff9940
- menu.selectionForeground#ffffff
- menu.separatorBackground#00ffff
- menubar.selectionBackground#00ff9940
- menubar.selectionForeground#ffffff
- merge.border#00ffff
- merge.commonContentBackground#8080b020
- merge.commonHeaderBackground#8080b040
- merge.currentContentBackground#00ffff20
- merge.currentHeaderBackground#00ffff40
- merge.incomingContentBackground#ff00ff20
- merge.incomingHeaderBackground#ff00ff40
- notificationCenter.border#00ffff
- notificationCenterHeader.background#111122
- notifications.background#050510
- notifications.border#00ffff
- notifications.foreground#e0f0ff
- notificationToast.border#00ffff
- panel.background#030308
- panel.border#00ffff
- panelInput.border#00ffff
- panelTitle.activeBorder#00ffff
- panelTitle.activeForeground#00ffff
- panelTitle.inactiveForeground#8080b0
- peekView.border#00ffff
- peekViewEditor.background#050510
- peekViewEditor.matchHighlightBackground#00ffff60
- peekViewResult.background#030308
- peekViewResult.fileForeground#e0f0ff
- peekViewResult.lineForeground#8080b0
- peekViewResult.matchHighlightBackground#00ffff60
- peekViewResult.selectionBackground#00ff9940
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#111122
- peekViewTitleDescription.foreground#8080b0
- peekViewTitleLabel.foreground#00ffff
- pickerGroup.border#00ffff
- pickerGroup.foreground#00ffff
- progressBar.background#00ffff
- scrollbar.shadow#000000
- scrollbarSlider.activeBackground#00ffff
- scrollbarSlider.background#00ffff40
- scrollbarSlider.hoverBackground#00ffff60
- selection.background#00ff9940
- sideBar.background#030308
- sideBar.border#00ffff
- sideBar.foreground#b3d9ff
- sideBarSectionHeader.background#050510
- sideBarSectionHeader.border#00ffff
- sideBarSectionHeader.foreground#00ffff
- sideBarTitle.foreground#00ffff
- statusBar.background#010103
- statusBar.border#00ffff
- statusBar.debuggingBackground#ff00ff
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#b3d9ff
- statusBar.noFolderBackground#010103
- statusBarItem.activeBackground#111122
- statusBarItem.hoverBackground#050510
- tab.activeBackground#050510
- tab.activeBorder#00ffff
- tab.activeBorderTop#00ffff
- tab.activeForeground#00ffff
- tab.border#00ffff
- tab.hoverBackground#111122
- tab.hoverForeground#e0f0ff
- tab.inactiveBackground#030308
- tab.inactiveForeground#8080b0
- terminal.ansiBlack#000000
- terminal.ansiBlue#00ffff
- terminal.ansiBrightBlack#8080b0
- terminal.ansiBrightBlue#b3ffff
- terminal.ansiBrightCyan#33ffdd
- terminal.ansiBrightGreen#33ffaa
- terminal.ansiBrightMagenta#e67eff
- terminal.ansiBrightRed#ff6b7a
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffb733
- terminal.ansiCyan#00ffff
- terminal.ansiGreen#00ff99
- terminal.ansiMagenta#ff00ff
- terminal.ansiRed#ff0040
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#ffff00
- terminal.background#050510
- terminal.border#00ffff
- terminal.foreground#e0f0ff
- titleBar.activeBackground#010103
- titleBar.activeForeground#b3d9ff
- titleBar.border#00ffff
- titleBar.inactiveBackground#010103
- titleBar.inactiveForeground#4d4d80
- tree.indentGuidesStroke#00ffff
- widget.shadow#000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #4d4d80 | italic |
| keyword, storage.type, storage.modifier, keyword.control | #ff00ff | bold |
| string, string.quoted, string.template | #00ffff | — |
| constant.numeric, constant.language, constant.character | #00ff99 | — |
| entity.name.function, support.function, meta.function-call | #bf00ff | bold |
| variable, variable.other, variable.parameter | #b3d9ff | — |
| entity.name.type, support.type, storage.type | #00ffff | bold |
| entity.name.class, support.class | #bf00ff | bold |
| entity.name.interface | #70a1ff | bold |
| entity.name.enum | #00ff99 | bold |
| constant, constant.other | #ff00ff | — |
| keyword.operator | #00ffff | — |
| punctuation | #8080b0 | — |
| meta.brace, punctuation.section | #00ffff | — |
| entity.name.tag | #bf00ff | bold |
| entity.other.attribute-name | #00ffff | — |
| string.quoted.double.html, string.quoted.single.html | #00ffff | — |
| entity.name.section | #70a1ff | bold |
| support.constant | #ff00ff | — |
| storage | #bf00ff | — |
| string.regexp | #00ffff | — |
| constant.character.escape | #bf00ff | — |
| invalid | #ff0040 | bold underline |
| invalid.deprecated | #4d4d80 | strikethrough |
| support.function.builtin | #00ffff | — |
| support.function.library | #ff00ff | — |
| entity.name.namespace | #bf00ff | — |
| entity.name.module | #00ffff | — |
| entity.name.decorator, meta.decorator | #ff00ff | — |
| entity.name.macro | #00ffff | — |
| entity.name.label | #00ffff | — |