Cyberpunk 2021
Publisher: techwithcarlosThemes in package: 1
A vibrant and immersive VS Code theme designed for modern software development, AI-assisted coding, and agent-powered development workflows.
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.
- actionBar.toggledBackground#3D5AFE22
- activityBar.background#1A1640
- activityBar.dropBorder#00FF9D
- activityBar.foreground#00FF9D
- activityBar.inactiveForeground#5A6BC7
- activityBarBadge.background#00FF9D
- activityBarBadge.foreground#1A1640
- badge.background#00FF9D
- badge.foreground#1A1640
- breadcrumb.activeSelectionForeground#A5B4FC
- breadcrumb.background#1A1640
- breadcrumb.focusForeground#00FF9D
- breadcrumb.foreground#5A6BC7
- breadcrumbPicker.background#262058
- button.background#262058
- button.border#00FF9D
- button.foreground#00FF9D
- button.hoverBackground#3D5AFE
- button.secondaryBackground#262058
- button.secondaryBorder#3D5AFE55
- button.secondaryForeground#A5B4FC
- button.secondaryHoverBackground#3D5AFE
- chat.requestBorder#3D5AFE33
- chat.slashCommandForeground#00FF9D
- checkbox.background#1A1640
- checkbox.border#3D5AFE
- checkbox.foreground#A5B4FC
- commandCenter.activeBackground#3D5AFE22
- commandCenter.activeForeground#00FF9D
- commandCenter.background#262058
- commandCenter.border#3D5AFE22
- commandCenter.foreground#A5B4FC
- debugToolBar.background#262058
- debugToolBar.border#00FF9D
- debugView.exceptionLabelBackground#262058
- debugView.exceptionLabelForeground#00FF9D
- debugView.stateLabelForeground#A5B4FC
- diffEditor.border#3D5AFE55
- diffEditor.diagonalFill#394e6d
- diffEditor.insertedTextBackground#00FF9D15
- diffEditor.removedTextBackground#FF000015
- dropdown.background#262058
- dropdown.border#3D5AFE
- dropdown.foreground#A5B4FC
- dropdown.listBackground#262058
- editor.background#1A1640
- editor.findMatchBackground#052AF933
- editor.findMatchBorder#00FF9D
- editor.findMatchHighlightBackground#3D5AFE33
- editor.findMatchHighlightBorder#3D5AFE
- editor.focusedStackFrameHighlightBackground#00FF9D22
- editor.foreground#A5B4FC
- editor.hoverHighlightBackground#3D5AFE33
- editor.inactiveSelectionBackground#052AF922
- editor.lineHighlightBackground#052AF933
- editor.rangeHighlightBackground#052AF933
- editor.rangeHighlightBorder#3D5AFE55
- editor.selectionBackground#052AF933
- editor.selectionHighlightBackground#052AF91A
- editor.selectionHighlightBorder#00FF9D
- editor.snippetFinalTabstopHighlightBackground#00FF9D15
- editor.snippetFinalTabstopHighlightBorder#00FF9D
- editor.snippetTabstopHighlightBackground#3D5AFE22
- editor.snippetTabstopHighlightBorder#3D5AFE
- editor.stackFrameHighlightBackground#3D5AFE33
- editor.wordHighlightBackground#3D5AFE44
- editor.wordHighlightBorder#7FD6FF
- editor.wordHighlightStrongBackground#3D5AFE66
- editorBracketHighlight.foreground1#3D5AFE
- editorBracketHighlight.foreground2#7DF9FF
- editorBracketHighlight.foreground3#00FF9D
- editorBracketHighlight.foreground4#C19CFF
- editorBracketHighlight.foreground5#FF79C6
- editorBracketHighlight.foreground6#FFB86C
- editorBracketHighlight.unexpectedBracket.foreground#FF0000
- editorBracketMatch.background#3D5AFE22
- editorBracketMatch.border#7DF9FF
- editorCodeLens.foreground#5A6BC7
- editorCursor.background#00FF9D
- editorCursor.foreground#00FF9D
- editorGhostText.foreground#5A6BC799
- editorGroup.dropBackground#3D5AFE22
- editorGroup.emptyBackground#1A1640
- editorGroupHeader.noTabsBackground#262058
- editorGroupHeader.tabsBackground#262058
- editorGutter.addedBackground#00FF9D
- editorGutter.background#1A1640
- editorGutter.deletedBackground#FF0000
- editorGutter.foldingControlForeground#5A6BC7
- editorGutter.modifiedBackground#F2FF00
- editorHoverWidget.background#262058
- editorHoverWidget.border#3D5AFE
- editorHoverWidget.foreground#A5B4FC
- editorIndentGuide.activeBackground1#3D5AFE44
- editorIndentGuide.background1#3D5AFE22
- editorLightBulbAutoFix.foreground#00FF9D
- editorLineNumber.activeForeground#7DF9FF
- editorLineNumber.foreground#5A6BC7
- editorOverviewRuler.addedForeground#00FF9D
- editorOverviewRuler.border#3D5AFE22
- editorOverviewRuler.deletedForeground#FF0000
- editorOverviewRuler.errorForeground#FF0000
- editorOverviewRuler.warningForeground#FF8C00
- editorStickyScroll.shadow#262058
- editorStickyScrollHover.background#262058
- editorSuggestWidget.background#262058
- editorSuggestWidget.border#3D5AFE
- editorSuggestWidget.focusHighlightForeground#00FF9D
- editorSuggestWidget.foreground#A5B4FC
- editorSuggestWidget.highlightForeground#00FF9D
- editorSuggestWidget.selectedBackground#052AF933
- editorSuggestWidget.selectedIconForeground#00FF9D
- editorWidget.background#262058
- editorWidget.border#3D5AFE
- focusBorder#00FF9D
- foreground#A5B4FC
- gitDecoration.deletedResourceForeground#FF0000
- gitDecoration.modifiedResourceForeground#F2FF00
- gitDecoration.untrackedResourceForeground#00FF9D
- input.background#262058
- input.border#3D5AFE
- input.foreground#A5B4FC
- input.placeholderForeground#5A6BC7
- inputOption.activeBorder#00FF9D
- list.activeSelectionBackground#052AF933
- list.activeSelectionForeground#00FF9D
- list.dropBackground#00FF9D15
- list.focusBackground#052AF933
- list.focusForeground#00FF9D
- list.highlightForeground#00FF9D
- list.hoverBackground#3D5AFE22
- list.hoverForeground#00FF9D
- list.inactiveSelectionBackground#052AF922
- list.inactiveSelectionForeground#A5B4FC
- menu.background#262058
- menu.border#3D5AFE
- menu.foreground#A5B4FC
- menu.selectionBackground#052AF933
- menu.selectionBorder#00FF9D33
- menu.selectionForeground#00FF9D
- menu.separatorBackground#3D5AFE22
- menubar.selectionBackground#3D5AFE22
- menubar.selectionBorder#3D5AFE33
- menubar.selectionForeground#00FF9D
- minimap.background#262058
- minimap.errorHighlight#FF000022
- minimap.findMatchHighlight#00FF9D22
- minimap.selectionHighlight#3D5AFE33
- minimap.warningHighlight#F2FF0022
- minimapGutter.addedBackground#00FF9D
- minimapGutter.deletedBackground#FF0000
- minimapGutter.modifiedBackground#F2FF00
- minimapSlider.activeBackground#00FF9D66
- minimapSlider.background#3D5AFE66
- minimapSlider.hoverBackground#7DF9FF
- notebook.cellBorderColor#3D5AFE
- notebook.focusedCellBackground#1A1640
- notebook.focusedCellBorder#00FF9D
- notebook.focusedEditorBorder#00FF9D
- notebook.inactiveFocusedCellBorder#3D5AFE
- notebook.outputContainerBackgroundColor#262058
- notebook.selectedCellBorder#3D5AFE
- notebookScrollbarSlider.activeBackground#00FF9D55
- notebookScrollbarSlider.background#3D5AFE33
- notebookStatusErrorIcon.foreground#FF0000
- notebookStatusRunningIcon.foreground#3D5AFE
- notebookStatusSuccessIcon.foreground#00FF9D
- notificationCenter.border#3D5AFE
- notificationCenterHeader.background#262058
- notificationCenterHeader.foreground#5A6BC7
- notifications.background#262058
- notifications.border#3D5AFE
- notifications.foreground#A5B4FC
- notificationsErrorIcon.foreground#FF0000
- notificationsInfoIcon.foreground#5A6BC7
- notificationsWarningIcon.foreground#3D5AFE
- notificationToast.border#3D5AFE33
- panel.background#1A1640
- panel.border#00FF9D
- panel.dropBorder#00FF9D
- panelSection.border#00FF9D
- panelSection.dropBackground#00ff9d1e
- panelSectionHeader.background#262058
- panelSectionHeader.foreground#7DF9FF
- panelTitle.activeBorder#00FF9D
- panelTitle.activeForeground#00FF9D
- panelTitle.inactiveForeground#5A6BC7
- peekView.border#3D5AFE33
- peekViewEditor.background#262058
- peekViewEditor.matchHighlightBackground#3D5AFE33
- peekViewEditorGutter.background#262058
- peekViewResult.background#262058
- peekViewResult.fileForeground#5A6BC7
- peekViewResult.lineForeground#A5B4FC
- peekViewResult.selectionBackground#052AF933
- peekViewResult.selectionForeground#00FF9D
- peekViewTitle.background#262058
- peekViewTitleDescription.foreground#7DF9FF
- peekViewTitleLabel.foreground#00FF9D
- pickerGroup.border#00FF9D
- pickerGroup.foreground#3D5AFE
- problemsInfoIcon.foreground#5A6BC7
- progressBar.background#00FF9D
- quickInput.background#262058
- quickInput.foreground#A5B4FC
- quickInputList.focusBackground#052AF933
- sash.hoverBorder#00FF9D
- scrollbar.shadow#262058
- scrollbarSlider.activeBackground#00FF9D
- scrollbarSlider.background#3D5AFE
- scrollbarSlider.hoverBackground#7DF9FF
- selection.background#052AF933
- settings.checkboxBackground#262058
- settings.checkboxBorder#3D5AFE
- settings.checkboxForeground#A5B4FC
- settings.dropdownBackground#262058
- settings.dropdownBorder#3D5AFE
- settings.dropdownForeground#A5B4FC
- settings.dropdownListBorder#3D5AFE
- settings.focusedRowBackground#3D5AFE22
- settings.headerForeground#00FF9D
- settings.modifiedItemIndicator#FF79C6
- settings.numberInputBackground#262058
- settings.numberInputBorder#3D5AFE
- settings.numberInputForeground#A5B4FC
- settings.textInputBackground#262058
- settings.textInputBorder#3D5AFE
- settings.textInputForeground#A5B4FC
- sideBar.background#262058
- sideBar.dropBackground#00FF9D15
- sideBar.foreground#A5B4FC
- sideBarSectionHeader.background#262058
- sideBarSectionHeader.foreground#7DF9FF
- sideBarTitle.foreground#7DF9FF
- statusBar.background#1A1640
- statusBar.border#3D5AFE22
- statusBar.debuggingBackground#4C1D95
- statusBar.debuggingBorder#00FF9D
- statusBar.debuggingForeground#A5B4FC
- statusBar.focusBorder#00FF9D
- statusBar.foreground#677CF8
- statusBar.noFolderBackground#1A1640
- statusBarItem.focusBorder#00FF9D
- statusBarItem.hoverBackground#3D5AFE33
- statusBarItem.hoverForeground#00FF9D
- tab.activeBackground#1A1640
- tab.activeBorderTop#00FF9D
- tab.activeForeground#00FF9D
- tab.hoverBackground#3D5AFE22
- tab.hoverForeground#7DF9FF
- tab.inactiveBackground#262058
- tab.inactiveForeground#A5B4FC
- tab.lastPinnedBorder#5A6BC7
- tab.unfocusedActiveBackground#1A1640
- tab.unfocusedActiveBorder#5A6BC7
- tab.unfocusedActiveBorderTop#00FF9D
- tab.unfocusedInactiveBackground#262058
- terminal.ansiBlack#1A1640
- terminal.ansiBlue#3D5AFE
- terminal.ansiBrightBlack#262058
- terminal.ansiBrightBlue#677CF8
- terminal.ansiBrightCyan#7DF9FF
- terminal.ansiBrightGreen#33FF9D
- terminal.ansiBrightMagenta#A5B4FC
- terminal.ansiBrightRed#FF4D4D
- terminal.ansiBrightWhite#A5B4FC
- terminal.ansiBrightYellow#FFF066
- terminal.ansiCyan#00FF9D
- terminal.ansiGreen#00FF9D
- terminal.ansiMagenta#C19CFF
- terminal.ansiRed#FF0000
- terminal.ansiWhite#A5B4FC
- terminal.ansiYellow#F2FF00
- terminal.background#1A1640
- terminal.border#3D5AFE
- terminal.foreground#A5B4FC
- terminal.selectionBackground#052AF933
- terminalCursor.background#1A1640
- terminalCursor.foreground#00FF9D
- textLink.activeForeground#00FF9D
- textLink.foreground#3D5AFE
- titleBar.activeBackground#1A1640
- titleBar.activeForeground#00FF9D
- titleBar.inactiveBackground#262058
- titleBar.inactiveForeground#5A6BC7
- toolbar.activeBackground#3D5AFE22
- toolbar.hoverBackground#262058
- tree.indentGuidesStroke#3D5AFE55
- welcomePage.tileBackground#262058
- welcomePage.tileHoverBackground#3D5AFE55
- widget.border#3D5AFE
- widget.shadow#262058
- window.activeBorder#3D5AFE55
- window.inactiveBorder#1A1640
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| keyword, storage.type, storage.modifier | #FF6BD6 | — |
| keyword.operator, keyword.operator.ts, keyword.operator.js, keyword.operator.assignment, keyword.operator.relational, keyword.operator.arithmetic, keyword.operator.comparison | #6B7CFF | — |
| entity.name.function, support.function, meta.function-call | #00FFB3 | — |
| variable.parameter, variable.parameter.function, meta.function.parameters variable.parameter | #B8C4FF | — |
| variable, variable.other.readwrite, meta.variable | #7FD6FF | — |
| variable.other.property, meta.property-name, support.variable.property | #8BE9FD | — |
| variable.language.this, this | #C3FF00 | — |
| entity.name.type, support.type, storage.type.annotation | #C19CFF | — |
| entity.name.class, support.class | #BD93F9 | — |
| constant, variable.other.constant, entity.name.constant, constant.language | #7DF9FF | — |
| string, string.quoted, string.template | #FFB86C | — |
| constant.numeric | #50FA7B | — |
| keyword.control.import, keyword.control.export, support.module | #677CF8 | — |
| meta.decorator, entity.name.function.decorator | #FF79C6 | — |
| string.regexp | #7DF9FF | — |
| constant.character.escape | #00FFB3 | — |
| comment, punctuation.definition.comment | #5566C2 | — |
| variable.other.property, variable.object.property, meta.object-literal.key | #7FD6FF | — |
| storage.type.function.arrow.ts, storage.type.function.arrow.js | #6B7CFF | — |
| storage.modifier.async.js, storage.modifier.async.ts, storage.modifier.async | #C3FF00 | — |
| storage.type.function.js, storage.type.function.ts, keyword.declaration.function | #00FFB3 | — |
| keyword.control.import.js, keyword.control.import.ts, keyword.control.export.js, keyword.control.export.ts | #677CF8 | — |
| variable.language.this.ts, variable.language.this.js | #7DF9FF | — |
| variable.other.property.ts, variable.other.property.js, meta.object-literal.key.ts, meta.object-literal.key.js | #7FD6FF | — |
| support.type.primitive.ts, support.type.primitive.tsx, entity.name.type.ts, entity.name.type.tsx | #C19CFF | — |
| support.class.component, entity.name.tag.js.jsx, entity.name.tag.tsx | #C19CFF | — |
| meta.decorator, entity.name.function.decorator, entity.name.type.decorator | #00FF9D | — |
| comment.block.documentation.python, string.quoted.docstring.multi.python | #5566C2 | — |
| support.type.property-name.json, meta.object-literal.key.json, meta.mapping.key | #7FD6FF | — |
| constant.language.json, constant.language.boolean, constant.language.boolean.true, constant.language.boolean.false, constant.language.null, constant.language.null.json | #C19CFF | — |
| string.quoted.double.json | #FFB86C | — |
| constant.numeric.json | #50FA7B | — |
| string.quoted.double.json | #FFB86C | — |
| constant.numeric.json | #50FA7B | — |
| constant.language.json, constant.language.boolean, constant.language.boolean.true, constant.language.boolean.false | #C19CFF | — |
| constant.language, support.constant, constant.other | #FF79C6 | — |
| entity.name.tag.yaml, meta.mapping.key.yaml | #7FD6FF | — |
| markup.heading, markup.heading.markdown | #7DF9FF | — |
| markup.underline.link, string.other.link | #00FF9D | — |
| meta.arrow.ts, meta.var.expr.ts, source.ts, meta.arrow.ts, meta.embedded.block.typescript, markup.fenced_code.block.markdown, text.html.markdown | #6B7CFF | — |