Skip to main content
Home Theme VS Code CyberDev A Cyberpunk-themed VS Code color theme with neon accents.
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.background #171c28 activityBar.border #171c28 activityBar.dropBorder #2f3b54 activityBar.foreground #E0E0FF activityBar.inactiveForeground #8695b799 activityBarBadge.background #66CCFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle #E0E0FF — comment, punctuation.definition.comment #4B5363 italic variable, string constant.other.placeholder, source #FF66FF — constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig #66CCFF — invalid, invalid.illegal
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground
#171c28
badge.background #66CCFF
badge.foreground #1d2433
breadcrumb.activeSelectionForeground #E0E0FF
breadcrumb.background #1d2433
breadcrumb.focusForeground #E0E0FF
breadcrumb.foreground #8695b7
breadcrumbPicker.background #171c28
button.background #9966FF
button.foreground #171c28
button.hoverBackground #9966FF99
chat.avatarBackground #2f3b54
chat.avatarForeground #E0E0FF
chat.editedFileForeground #FFCC33
chat.requestBackground #1d2433
chat.requestBorder #2f3b54
chat.slashCommandBackground #2f3b54
chat.slashCommandForeground #66CCFF
commandCenter.activeBackground #2f3b54
commandCenter.activeBorder #66CCFF
commandCenter.activeForeground #E0E0FF
commandCenter.background #1d2433
commandCenter.border #2f3b54
commandCenter.debuggingBackground #171c28
commandCenter.foreground #E0E0FF
commandCenter.inactiveBorder #2f3b54
commandCenter.inactiveForeground #8695b777
debugExceptionWidget.background #2f3b54
debugExceptionWidget.border #2f3b54
debugToolBar.background #2f3b54
debugToolBar.border #2f3b54
descriptionForeground #E0E0FF
diffEditor.border #2f3b54
diffEditor.insertedTextBackground #bae67e22
diffEditor.insertedTextBorder #bae67e44
diffEditor.removedTextBackground #FF33FF22
diffEditor.removedTextBorder #FF33FF44
dropdown.background #2f3b54
dropdown.border #2f3b54
dropdown.foreground #E0E0FF
dropdown.listBackground #171c28
editor.background #1d2433
editor.findMatchBackground #8695b777
editor.findMatchBorder #66CCFF
editor.findMatchHighlightBackground #8695b777
editor.findRangeHighlightBackground #8695b777
editor.foreground #E0E0FF
editor.hoverHighlightBackground #8695b777
editor.inactiveSelectionBackground #8695b777
editor.lineHighlightBackground #2f3b54
editor.lineHighlightBorder #2f3b54
editor.rangeHighlightBackground #2f3b5433
editor.selectionBackground #2f3b54
editor.selectionForeground #E0E0FF
editor.selectionHighlightBackground #2f3b5433
editor.wordHighlightBackground #8695b777
editor.wordHighlightStrongBackground #8695b777
editorBracketHighlight.foreground1 #66CCFF
editorBracketHighlight.foreground2 #FF66FF
editorBracketHighlight.foreground3 #FFCC33
editorBracketHighlight.foreground4 #66FF99
editorBracketHighlight.foreground5 #9966FF
editorBracketHighlight.foreground6 #00FFFF
editorBracketHighlight.unexpectedBracket.foreground #FF33FF
editorBracketMatch.background #8695b755
editorBracketMatch.border #66CCFF
editorBracketPairGuide.activeBackground1 #66CCFF77
editorBracketPairGuide.activeBackground2 #FF66FF77
editorBracketPairGuide.activeBackground3 #FFCC3377
editorBracketPairGuide.activeBackground4 #66FF9977
editorBracketPairGuide.activeBackground5 #9966FF77
editorBracketPairGuide.activeBackground6 #00FFFF77
editorBracketPairGuide.background1 #66CCFF33
editorBracketPairGuide.background2 #FF66FF33
editorBracketPairGuide.background3 #FFCC3333
editorBracketPairGuide.background4 #66FF9933
editorBracketPairGuide.background5 #9966FF33
editorBracketPairGuide.background6 #00FFFF33
editorCodeLens.foreground #E0E0FF
editorCursor.background #1d2433
editorCursor.foreground #66CCFF
editorError.foreground #FF33FF
editorGroup.border #2f3b54
editorGroup.dropBackground #2f3b54
editorGroup.emptyBackground #1d2433
editorGroup.focusedEmptyBorder #1d2433
editorGroupHeader.noTabsBackground #1d2433
editorGroupHeader.tabsBackground #171c28
editorGroupHeader.tabsBorder #171c28
editorGutter.addedBackground #bae67e
editorGutter.background #1d2433
editorGutter.deletedBackground #FF33FF
editorGutter.modifiedBackground #5ccfe6
editorHint.foreground #66CCFF
editorHoverWidget.background #2f3b54
editorHoverWidget.border #2f3b54
editorIndentGuide.activeBackground1 #8695b777
editorIndentGuide.background1 #8695b733
editorInfo.foreground #66CCFF
editorInlayHint.background #171c28
editorInlayHint.foreground #8695b799
editorLineNumber.activeForeground #8695b7
editorLineNumber.foreground #8695b755
editorLink.activeForeground #66CCFF
editorMarkerNavigation.background #2f3b54
editorMarkerNavigationError.background #FF33FF
editorMarkerNavigationInfo.background #66CCFF
editorMarkerNavigationWarning.background #9966FF
editorOverviewRuler.addedForeground #bae67e
editorOverviewRuler.border #2f3b54
editorOverviewRuler.bracketMatchForeground #66CCFF
editorOverviewRuler.commonContentForeground #2f3b54
editorOverviewRuler.currentContentForeground #66CCFF
editorOverviewRuler.deletedForeground #FF33FF
editorOverviewRuler.errorForeground #FF33FF
editorOverviewRuler.findMatchForeground #66CCFF33
editorOverviewRuler.incomingContentForeground #9966FF
editorOverviewRuler.infoForeground #66CCFF
editorOverviewRuler.modifiedForeground #5ccfe6
editorOverviewRuler.rangeHighlightForeground #8695b733
editorOverviewRuler.selectionHighlightForeground #8695b733
editorOverviewRuler.warningForeground #9966FF
editorOverviewRuler.wordHighlightForeground #8695b733
editorOverviewRuler.wordHighlightStrongForeground #8695b733
editorPane.background #1d2433
editorRuler.foreground #2f3b54
editorSuggestWidget.background #2f3b54
editorSuggestWidget.border #2f3b54
editorSuggestWidget.foreground #E0E0FF
editorSuggestWidget.highlightForeground #66CCFF
editorSuggestWidget.selectedBackground #1d2433
editorWarning.foreground #9966FF
editorWhitespace.foreground #8695b777
editorWidget.background #171c28
editorWidget.border #171c28
errorForeground #FF33FF
extensionButton.prominentBackground #9966FF
extensionButton.prominentForeground #1d2433
extensionButton.prominentHoverBackground #9966FF99
focusBorder #8695b777
foreground #E0E0FF
gitDecoration.conflictingResourceForeground #FF33FF
gitDecoration.deletedResourceForeground #FF33FF
gitDecoration.ignoredResourceForeground #8695b777
gitDecoration.modifiedResourceForeground #66CCFF
gitDecoration.untrackedResourceForeground #66FF99
inlineChat.background #1d2433
inlineChat.border #2f3b54
inlineChat.regionHighlight #2f3b5433
inlineChat.shadow #00030F
input.background #1d2433
input.border #2f3b54
input.foreground #E0E0FF
input.placeholderForeground #8695b777
inputOption.activeBorder #2f3b54
inputValidation.errorBackground #1d2433
inputValidation.errorBorder #FF33FF
inputValidation.errorForeground #FF33FF
inputValidation.infoBackground #1d2433
inputValidation.infoBorder #66CCFF
inputValidation.infoForeground #66CCFF
inputValidation.warningBackground #1d2433
inputValidation.warningBorder #9966FF
inputValidation.warningForeground #9966FF
list.activeSelectionBackground #2f3b54
list.activeSelectionForeground #E0E0FF
list.dropBackground #2f3b54
list.errorForeground #FF33FF
list.focusBackground #2f3b54
list.focusForeground #E0E0FF
list.highlightForeground #66CCFF
list.hoverBackground #2f3b54
list.hoverForeground #E0E0FF
list.inactiveFocusBackground #2f3b54
list.inactiveSelectionBackground #2f3b54
list.inactiveSelectionForeground #E0E0FF
list.invalidItemForeground #FF33FF
list.warningForeground #9966FF
listFilterWidget.background #2f3b54
listFilterWidget.noMatchesOutline #FF33FF
listFilterWidget.outline #2f3b54
menu.background #171c28
menu.foreground #8695b7
menu.selectionBackground #2f3b54
menu.selectionForeground #E0E0FF
menubar.selectionBackground #2f3b54
menubar.selectionForeground #E0E0FF
merge.border #8695b7
merge.commonContentBackground #2f3b5455
merge.commonHeaderBackground #2f3b5477
merge.currentContentBackground #66CCFF22
merge.currentHeaderBackground #66CCFF77
merge.incomingContentBackground #9966FF22
merge.incomingHeaderBackground #9966FF77
notificationCenter.border #171c28
notificationCenterHeader.background #171c28
notificationCenterHeader.foreground #E0E0FF
notificationLink.foreground #E0E0FF
notifications.background #171c28
notifications.border #171c28
notifications.foreground #E0E0FF
notificationToast.border #171c28
panel.background #171c28
panel.border #1d2433
panel.dropBorder #2f3b54
panelInput.border #8695b7
panelSection.border #2f3b54
panelSection.dropBackground #2f3b54
panelSectionHeader.background #1d2433
panelSectionHeader.foreground #66CCFF
panelTitle.activeBorder #66CCFF
panelTitle.activeForeground #E0E0FF
panelTitle.inactiveForeground #8695b7
peekView.border #66CCFF
peekViewEditor.background #2f3b54
peekViewEditor.matchHighlightBackground #8695b7
peekViewEditor.matchHighlightBorder #66CCFF
peekViewEditorGutter.background #1d2433
peekViewResult.background #2f3b54
peekViewResult.fileForeground #8695b7
peekViewResult.lineForeground #E0E0FF
peekViewResult.matchHighlightBackground #66CCFF33
peekViewResult.selectionBackground #2f3b54
peekViewResult.selectionForeground #E0E0FF
peekViewTitle.background #2f3b54
peekViewTitleDescription.foreground #8695b7
peekViewTitleLabel.foreground #8695b7
pickerGroup.border #2f3b54
pickerGroup.foreground #66CCFF
progressBar.background #66CCFF
sash.hoverBorder #66CCFF
scrollbar.shadow #00030F
scrollbarSlider.activeBackground #8695b777
scrollbarSlider.background #8695b755
scrollbarSlider.hoverBackground #8695b799
selection.background #8695b777
settings.checkboxBackground #2f3b54
settings.checkboxBorder #2f3b54
settings.checkboxForeground #E0E0FF
settings.dropdownBackground #2f3b54
settings.dropdownBorder #2f3b54
settings.dropdownForeground #E0E0FF
settings.dropdownListBorder #2f3b54
settings.headerForeground #E0E0FF
settings.modifiedItemIndicator #66CCFF
settings.numberInputBackground #2f3b54
settings.numberInputBorder #2f3b54
settings.numberInputForeground #E0E0FF
settings.textInputBackground #2f3b54
settings.textInputBorder #2f3b54
settings.textInputForeground #E0E0FF
sideBar.background #171c28
sideBar.foreground #E0E0FF
sideBarSectionHeader.background #1d2433
sideBarSectionHeader.border #171c28
sideBarSectionHeader.foreground #66CCFF
sideBarTitle.foreground #66CCFF
statusBar.background #171c28
statusBar.border #171c28
statusBar.debuggingBackground #171c28
statusBar.debuggingForeground #8695b7
statusBar.foreground #8695b7
statusBar.noFolderBackground #171c28
statusBar.noFolderForeground #8695b7
statusBarItem.activeBackground #2f3b54
statusBarItem.hoverBackground #1d2433
statusBarItem.remoteBackground #171c28
statusBarItem.remoteForeground #8695b7
tab.activeBackground #1d2433
tab.activeBorder #66CCFF
tab.activeBorderTop #171c28
tab.activeForeground #E0E0FF
tab.border #171c28
tab.hoverBackground #2f3b54
tab.hoverBorder #66CCFF
tab.inactiveBackground #171c28
tab.inactiveForeground #E0E0FF77
tab.unfocusedActiveBackground #1d2433
tab.unfocusedActiveBorder #66CCFF77
tab.unfocusedActiveBorderTop #1d2433
tab.unfocusedActiveForeground #E0E0FF
tab.unfocusedHoverBackground #1d2433
tab.unfocusedHoverBorder #66CCFF77
tab.unfocusedInactiveForeground #E0E0FF77
terminal.ansiBlack #2f3b54
terminal.ansiBlue #66CCFF
terminal.ansiBrightBlack #444a5e
terminal.ansiBrightBlue #66CCFF
terminal.ansiBrightCyan #00FFFF
terminal.ansiBrightGreen #66FF99
terminal.ansiBrightMagenta #FF66FF
terminal.ansiBrightRed #FF33FF
terminal.ansiBrightWhite #E0E0FF
terminal.ansiBrightYellow #FFCC33
terminal.ansiCyan #00FFFF
terminal.ansiGreen #66FF99
terminal.ansiMagenta #FF66FF
terminal.ansiRed #FF33FF
terminal.ansiWhite #E0E0FF
terminal.ansiYellow #FFCC33
terminal.background #171c28
terminal.border #171c28
terminal.foreground #E0E0FF
terminal.selectionBackground #8695b733
terminalCursor.background #FF33FF
terminalCursor.foreground #FF33FF
textBlockQuote.background #2f3b54
textBlockQuote.border #2f3b54
textCodeBlock.background #171c28
textLink.activeForeground #66CCFF
textLink.foreground #66CCFF
textPreformat.foreground #E0E0FF
textSeparator.foreground #E0E0FF
titleBar.activeBackground #171c28
titleBar.activeForeground #E0E0FF
titleBar.border #171c28
titleBar.inactiveBackground #171c28
titleBar.inactiveForeground #8695b7
tree.indentGuidesStroke #2f3b54
walkThrough.embeddedEditorBackground #171c28
widget.shadow #00030F keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape #66CCFF —
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks #E0E0FF —
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe #FFCC33 —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object #66CCFF —
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter #00FFFF —
meta.block variable.other #CC99FF —
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property #E0E0FF —
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks #CC99FF —
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key #9966FF —
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite #66CCFF —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name, support.variable.object.node, support.variable.object.process #66CCFF —
entity.name.module.js, variable.import.parameter.js #FF33FF —
variable.language #66CCFF italic
entity.name.method.js #66CCFF italic
meta.class-method.js entity.name.function.js, variable.function.constructor #66CCFF —
entity.other.attribute-name #FFCC33 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCC33 —
entity.other.attribute-name.class, punctuation.definition.entity.css #FFCC33 —
source.sass keyword.control #66CCFF —
constant.character.escape #66CCFF —
*url*, *link*, *uri* — underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag #66CCFF —
source.js constant.other.object.key.js string.unquoted.label.js #FF33FF italic
source.json meta.structure.dictionary.json support.type.property-name.json #66CCFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #66CCFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCC33 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #66CCFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCC33 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #66CCFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCC33 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #66CCFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCC33 —
markup.italic #FF33FF italic
markup.underline #9966FF underline
markup.strike #FFCC33 italic
markup.quote #66CCFF italic
text.html.markdown, punctuation.definition.list_item.markdown #E0E0FF —
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown #66CCFF —
text.html.markdown meta.dummy.line-break #E0E0FF —
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown #CC99FF —
markup.quote, punctuation.definition.blockquote.markdown #66CCFF italic
string.other.link.title.markdown #FFCC33 underline
markup.raw.block.fenced.markdown #E0E0FF —
punctuation.definition.fenced.markdown, variable.language.fenced.markdown #E0E0FF —
variable.language.fenced.markdown #E0E0FF
token.error-token #FF33FF —
token.debug-token #9966FF —
storage.type.error.go #66CCFF —
punctuation.other.period.go #FFCC33 —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @ param id
* @ returns User object or null if ID is invalid
*/
export async function fetchUser (id: string ): Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet (user: User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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...
~/my-project
main*
Button.tsx
31
$
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @ param id
* @ returns User object or null if ID is invalid
*/
export async function fetchUser (id: string ): Promise < User | null > {
if ( ! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method : "GET" ,
headers : { Accept : "application/json" },
});
if ( ! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet (user: User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
CyberDev | Coding Theme