Cyberpunk 2077 - Night City Theme

Name: Cyberpunk 2077 - Night City Theme
Author: Griff Reaper

Publisher: Griff ReaperThemes in package: 2

A vibrant, neon-soaked dark theme inspired by Night City from Cyberpunk 2077

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Cyberpunk 2077 - Night City Theme — Cyberpunk 2077 - Night City (Dimmed)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#00FF9F15
activityBar.activeBorder#00FF9FFF
activityBar.background#000000
activityBar.border#00FF9F99
activityBar.foreground#00FF9F
activityBar.inactiveForeground#00F0FF50
activityBarBadge.background#FF006E
activityBarBadge.foreground#FFFFFF
banner.background#000000
banner.foreground#00F0FF
banner.iconForeground#00FF9F
breadcrumb.activeSelectionForeground#FFE600
breadcrumb.background#000000
breadcrumb.focusForeground#00FF9F
breadcrumb.foreground#00F0FF80
breadcrumbPicker.background#0D0000
button.background#FF006E
button.foreground#FFFFFF
button.hoverBackground#FF10F0
button.secondaryBackground#00F0FF20
button.secondaryForeground#00F0FF
button.secondaryHoverBackground#00F0FF30
diffEditor.insertedLineBackground#00FF9F10
diffEditor.insertedTextBackground#00FF9F20
diffEditor.removedLineBackground#FF004010
diffEditor.removedTextBackground#FF004020
dropdown.background#0D0000
dropdown.border#00FF9F99
dropdown.foreground#00F0FF
editor.background#000000
editor.findMatchBackground#FFE60050
editor.findMatchBorder#FFE600FF
editor.findMatchHighlightBackground#FFE60030
editor.foreground#00F0FF
editor.hoverHighlightBackground#00F0FF20
editor.inactiveSelectionBackground#FF006E15
editor.lineHighlightBackground#00FF9F08
editor.lineHighlightBorder#00FF9F60
editor.selectionBackground#FF006E30
editor.selectionHighlightBackground#FF006E25
editor.wordHighlightBackground#FFE60030
editor.wordHighlightStrongBackground#FFE60050
editorBracketMatch.background#FFE60040
editorBracketMatch.border#FFE600FF
editorCursor.foreground#00FF9F
editorError.border#FF004000
editorError.foreground#FF0040
editorGroup.border#00FF9F80
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#00FF9F80
editorGutter.addedBackground#00FF9FCC
editorGutter.background#000000
editorGutter.deletedBackground#FF0040CC
editorGutter.modifiedBackground#FFE600CC
editorHint.foreground#00FF9F
editorHoverWidget.background#0D0000
editorHoverWidget.border#00FF9F99
editorIndentGuide.activeBackground#00FF9F
editorIndentGuide.background#00FF9F30
editorInfo.foreground#00F0FF
editorLineNumber.activeForeground#00FF9F
editorLineNumber.foreground#00F0FF50
editorSuggestWidget.background#0D0000
editorSuggestWidget.border#00FF9F99
editorSuggestWidget.foreground#00F0FF
editorSuggestWidget.highlightForeground#FFE600
editorSuggestWidget.selectedBackground#FF006E40
editorWarning.border#FFE60000
editorWarning.foreground#FFE600
editorWhitespace.foreground#00FF9F20
editorWidget.background#0D0000
editorWidget.border#00FF9F99
extensionBadge.remoteBackground#00FF9F
extensionBadge.remoteForeground#000000
gitDecoration.addedResourceForeground#00FF9F
gitDecoration.conflictingResourceForeground#FF10F0
gitDecoration.deletedResourceForeground#FF0040
gitDecoration.ignoredResourceForeground#00F0FF40
gitDecoration.modifiedResourceForeground#FFE600
gitDecoration.untrackedResourceForeground#FF006E
input.background#0D0000
input.border#00FF9F99
input.foreground#00F0FF
input.placeholderForeground#00F0FF50
inputOption.activeBackground#FF006E40
inputOption.activeBorder#FF006E
inputValidation.errorBackground#FF004020
inputValidation.errorBorder#FF0040
inputValidation.warningBackground#FFE60020
inputValidation.warningBorder#FFE600
list.activeSelectionBackground#FF006E40
list.activeSelectionForeground#FFFFFF
list.focusBackground#FF006E40
list.focusForeground#FFFFFF
list.focusOutline#00FF9F99
list.highlightForeground#FFE600
list.hoverBackground#00F0FF20
list.hoverForeground#00F0FF
list.inactiveSelectionBackground#FF006E20
merge.border#FFE600
merge.currentHeaderBackground#00FF9F40
merge.incomingHeaderBackground#00F0FF40
minimap.background#00000080
minimap.errorHighlight#FF0040
minimap.findMatchHighlight#FFE600
minimap.selectionHighlight#FF006E80
minimap.warningHighlight#FFE600
minimapGutter.addedBackground#00FF9F
minimapGutter.deletedBackground#FF0040
minimapGutter.modifiedBackground#FFE600
notificationCenter.border#00FF9F99
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#00FF9F
notificationLink.foreground#00FF9F
notifications.background#000000EE
notifications.border#00FF9F99
notifications.foreground#00F0FF
notificationsErrorIcon.foreground#FF0040
notificationsInfoIcon.foreground#00F0FF
notificationsWarningIcon.foreground#FFE600
notificationToast.border#00FF9FFF
panel.background#000000
panel.border#00FF9F99
panelTitle.activeBorder#00FF9FFF
panelTitle.activeForeground#00FF9F
panelTitle.inactiveForeground#00F0FF60
peekView.border#00FF9F99
peekViewEditor.background#0D0000
peekViewEditor.matchHighlightBackground#FFE60040
peekViewResult.background#0D0000
peekViewResult.matchHighlightBackground#FFE60040
peekViewResult.selectionBackground#FF006E40
peekViewTitle.background#000000
peekViewTitleDescription.foreground#00F0FF80
peekViewTitleLabel.foreground#00FF9F
progressBar.background#FF006E
scrollbar.shadow#00000080
scrollbarSlider.activeBackground#FF006E80
scrollbarSlider.background#FF006E40
scrollbarSlider.hoverBackground#FF006E60
settings.headerForeground#00FF9F
settings.modifiedItemIndicator#FFE600
sideBar.background#000000
sideBar.border#00FF9F99
sideBar.foreground#00F0FF
sideBarSectionHeader.background#0D0000
sideBarSectionHeader.border#00FF9FFF
sideBarSectionHeader.foreground#00FF9F
sideBarTitle.foreground#FFE600
statusBar.background#0D0000
statusBar.border#00FF9F99
statusBar.debuggingBackground#FF0040
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#00F0FF
statusBar.noFolderBackground#000000
statusBarItem.prominentBackground#FF006E
statusBarItem.prominentHoverBackground#FF10F0
tab.activeBackground#0D0000
tab.activeBorder#00FF9F80
tab.activeBorderTop#FF006ECC
tab.activeForeground#00FF9F
tab.border#00FF9F20
tab.hoverBackground#FF006E20
tab.hoverBorder#FF006EFF
tab.hoverForeground#00F0FF
tab.inactiveBackground#000000
tab.inactiveForeground#00F0FF60
tab.unfocusedActiveBorder#00F0FF40
tab.unfocusedActiveBorderTop#FF006E40
terminal.ansiBlack#000000
terminal.ansiBlue#00F0FF
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#00F0FF
terminal.ansiBrightCyan#00FFFFFF
terminal.ansiBrightGreen#00FFAAFF
terminal.ansiBrightMagenta#FF10F0FF
terminal.ansiBrightRed#FF1744FF
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FCEE0CFF
terminal.ansiCyan#00F0FFFF
terminal.ansiGreen#00FF9FFF
terminal.ansiMagenta#FF006EFF
terminal.ansiRed#FF0040FF
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#FFE600FF
terminal.background#000000
terminal.border#00FF9F80
terminal.foreground#00F0FF
terminal.selectionBackground#FF006E40
terminalCursor.foreground#00FF9F
titleBar.activeBackground#000000
titleBar.activeForeground#00F0FF
titleBar.border#00FF9F80
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#00F0FF50
walkThrough.embeddedEditorBackground#0D0000
welcomePage.buttonBackground#FF006E
welcomePage.buttonHoverBackground#FF10F0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#00F0FF60	italic
keyword, keyword.control, keyword.operator.new, storage.type, storage.modifier	#FF006E	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.logical	#FF10F0	—
entity.name.function, support.function, meta.function-call, meta.method-call	#00F0FF	italic
entity.name.class, entity.name.type, support.class, support.type	#FFE600	bold
variable, variable.parameter, variable.other, meta.definition.variable	#00F0FF	—
constant, constant.language, constant.character, constant.other	#FF006E	—
constant.numeric, constant.numeric.integer, constant.numeric.float	#FF10F0	—
string, string.quoted, string.template	#00FF9F	—
meta.template.expression, punctuation.definition.template-expression	#FFE600	—
constant.character.escape	#FF10F0	—
entity.name.tag, punctuation.definition.tag	#FF006E	bold
entity.other.attribute-name	#FFE600	italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#FF006E	—
support.type.property-name.css	#00F0FF	—
support.constant.property-value.css, constant.other.color.rgb-value.css	#00FF9F	—
support.type.property-name.json, meta.structure.dictionary.key.json	#FFE600	—
meta.structure.dictionary.value.json	#00FF9F	—
markup.heading, entity.name.section.markdown	#FF006E	bold
markup.bold	#FFE600	bold
markup.italic	#00F0FF	italic
markup.underline.link, string.other.link.title.markdown	#00FF9F	underline
markup.inline.raw, markup.fenced_code.block.markdown	#00F0FF	—
entity.name.function.decorator.python, meta.function.decorator.python	#FFE600	italic
variable.language.special.self.python, variable.parameter.function.language.special.self.python	#FF10F0	italic
keyword.control.import, keyword.control.export, keyword.control.from	#FF006E	bold
variable.language.this	#FF10F0	italic
support.class.console	#FFE600	—
string.regexp	#FF10F0	—
punctuation	#00F0FF80	—
punctuation.section.embedded, punctuation.section.block, punctuation.section.brackets, punctuation.section.parens	#00FF9F	—
punctuation.separator, punctuation.terminator	#FF006E80	—
invalid, invalid.deprecated	#FF0040	strikethrough