Skip to main content
Home Theme VS Code Cyberdude Theme 🔥 Never stop learing and Never give up! This theme is super cool.. try it
Cyberdude Theme | Coding Theme
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 #122738 activityBar.border #0d3a58 activityBar.foreground #fff activityBarBadge.background #ffc600 activityBarBadge.foreground #000 badge.background #ffc600 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #0088ff italic constant #ff628c — entity #ffc600 — invalid #f44542 — storage.type.function
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Cyberdude Theme — cyberdude
badge.foreground
#000
button.background #0088ff
button.foreground #fff
button.hoverBackground #ff9d00
contrastBorder #ffffff00
debugExceptionWidget.background #193549
debugExceptionWidget.border #aaa
debugToolBar.background #193549
descriptionForeground #aaa
diffEditor.insertedTextBackground #3ad90033
diffEditor.insertedTextBorder #3ad90055
diffEditor.removedTextBackground #ee3a4333
diffEditor.removedTextBorder #ee3a4355
dropdown.background #193549
dropdown.border #15232d
dropdown.foreground #fff
editor.background #193549
editor.findMatchBackground #FF720066
editor.findMatchHighlightBackground #CAD40F66
editor.findRangeHighlightBackground #243E51
editor.foreground #fff
editor.hoverHighlightBackground #ffc60033
editor.inactiveSelectionBackground #003b8b
editor.lineHighlightBackground #1F4662
editor.lineHighlightBorder #234E6D
editor.rangeHighlightBackground #1F4662
editor.selectionBackground #0050A4
editor.selectionHighlightBackground #0050A480
editor.wordHighlightBackground #ffffff21
editor.wordHighlightStrongBackground #ffffff21
editorBracketMatch.background #0d3a58
editorBracketMatch.border #ffc60080
editorCodeLens.foreground #aaa
editorCursor.foreground #ffc600
editorError.border #0d3a58
editorError.foreground #A22929
editorGroup.border #122738
editorGroup.dropBackground #12273899
editorGroupHeader.noTabsBackground #193549
editorGroupHeader.tabsBackground #193549
editorGroupHeader.tabsBorder #15232d
editorGutter.addedBackground #3C9F4A
editorGutter.background #12273866
editorGutter.deletedBackground #A22929
editorGutter.modifiedBackground #26506D
editorHoverWidget.background #15232d
editorHoverWidget.border #0d3a58
editorIndentGuide.background #3B5364
editorLineNumber.foreground #aaa
editorLink.activeForeground #aaa
editorMarkerNavigation.background #3B536433
editorMarkerNavigationError.background #A22929
editorMarkerNavigationWarning.background #ffc600
editorOverviewRuler.border #0d3a58
editorOverviewRuler.commonContentForeground #ffc60055
editorOverviewRuler.currentContentForeground #ee3a4355
editorOverviewRuler.incomingContentForeground #3ad90055
editorRuler.foreground #1F4662
editorSuggestWidget.background #15232d
editorSuggestWidget.border #15232d
editorSuggestWidget.foreground #aaa
editorSuggestWidget.highlightForeground #ffc600
editorSuggestWidget.selectedBackground #193549
editorWarning.border #ffffff00
editorWarning.foreground #ffc600
editorWhitespace.foreground #ffffff1a
editorWidget.background #15232d
editorWidget.border #0d3a58
errorForeground #A22929
extensionButton.prominentBackground #0088ff
extensionButton.prominentForeground #fff
extensionButton.prominentHoverBackground #ff9d00
focusBorder #0d3a58
foreground #aaa
gitDecoration.conflictingResourceForeground #FF7200
gitDecoration.deletedResourceForeground #ff628c
gitDecoration.ignoredResourceForeground #808080
gitDecoration.modifiedResourceForeground #ffc600
gitDecoration.untrackedResourceForeground #3ad900
input.background #193549
input.border #0d3a58
input.foreground #ffc600
input.placeholderForeground #aaa
inputOption.activeBorder #8dffff
inputValidation.errorBackground #193549
inputValidation.errorBorder #ffc600
inputValidation.infoBackground #193549
inputValidation.infoBorder #0D3A58
inputValidation.warningBackground #193549
inputValidation.warningBorder #ffc600
list.activeSelectionBackground #193549
list.activeSelectionForeground #aaa
list.dropBackground #0d3a58
list.focusBackground #0d3a58
list.focusForeground #aaa
list.highlightForeground #ffc600
list.hoverBackground #193549
list.hoverForeground #aaa
list.inactiveSelectionBackground #0d3a58
list.inactiveSelectionForeground #aaa
menu.background #122738
merge.border #ffffff00
merge.commonContentBackground #c97d0c
merge.commonHeaderBackground #c97d0c
merge.currentContentBackground #2F7366
merge.currentHeaderBackground #2F7366
merge.incomingContentBackground #185294
merge.incomingHeaderBackground #185294
notificationCenter.border #ffc600
notificationCenterHeader.background #122738
notificationCenterHeader.foreground #aaa
notificationLink.foreground #ffc600
notifications.background #122738
notifications.border #ffc600
notifications.foreground #aaa
notificationToast.border #ffc600
panel.background #122738
panel.border #ffc600
panelTitle.activeBorder #ffc600
panelTitle.activeForeground #ffc600
panelTitle.inactiveForeground #aaa
peekView.border #ffc600
peekViewEditor.background #193549
peekViewEditor.matchHighlightBackground #19354900
peekViewEditorGutter.background #122738
peekViewResult.background #15232d
peekViewResult.fileForeground #aaa
peekViewResult.lineForeground #fff
peekViewResult.matchHighlightBackground #0d3a58
peekViewResult.selectionBackground #0d3a58
peekViewResult.selectionForeground #fff
peekViewTitle.background #15232d
peekViewTitleDescription.foreground #aaa
peekViewTitleLabel.foreground #ffc600
pickerGroup.border #0d3a58
pickerGroup.foreground #aaa
progressBar.background #ffc600
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #355166cc
scrollbarSlider.background #1F466280
scrollbarSlider.hoverBackground #406179cc
selection.background #027dff
sideBar.background #15232d
sideBar.border #0d3a58
sideBar.foreground #aaa
sideBarSectionHeader.background #193549
sideBarSectionHeader.foreground #aaaaaa
sideBarTitle.foreground #aaaaaa
statusBar.background #15232d
statusBar.border #0d3a58
statusBar.debuggingBackground #15232d
statusBar.debuggingBorder #ffc600
statusBar.debuggingForeground #ffc600
statusBar.foreground #aaa
statusBar.noFolderBackground #15232d
statusBar.noFolderBorder #0d3a58
statusBar.noFolderForeground #aaa
statusBarItem.activeBackground #0088ff
statusBarItem.hoverBackground #0d3a58
statusBarItem.prominentBackground #15232d
statusBarItem.prominentHoverBackground #0d3a58
tab.activeBackground #122738
tab.activeBorder #ffc600
tab.activeForeground #fff
tab.border #15232D
tab.inactiveBackground #193549
tab.inactiveForeground #aaa
tab.unfocusedActiveForeground #aaa
tab.unfocusedInactiveForeground #aaa
terminal.ansiBlack #000000
terminal.ansiBlue #0088ff
terminal.ansiBrightBlack #0050A4
terminal.ansiBrightBlue #0088ff
terminal.ansiBrightCyan #80fcff
terminal.ansiBrightGreen #3ad900
terminal.ansiBrightMagenta #fb94ff
terminal.ansiBrightRed #ff628c
terminal.ansiBrightWhite #193549
terminal.ansiBrightYellow #ffc600
terminal.ansiCyan #80fcff
terminal.ansiGreen #3ad900
terminal.ansiMagenta #fb94ff
terminal.ansiRed #ff628c
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffc600
terminal.background #122738
terminal.foreground #ffffff
terminalCursor.background #ffc600
terminalCursor.foreground #ffc600
textBlockQuote.background #193549
textBlockQuote.border #0088ff
textCodeBlock.background #193549
textLink.activeForeground #0088ff
textLink.foreground #0088ff
textPreformat.foreground #ffc600
textSeparator.foreground #0d3a58
titleBar.activeBackground #15232D
titleBar.activeForeground #ffffff
titleBar.inactiveBackground #193549
titleBar.inactiveForeground #ffffff33
walkThrough.embeddedEditorBackground #0d3a58
welcomePage.buttonBackground #193549
welcomePage.buttonHoverBackground #0d3a58
widget.shadow #00000026 #ff9d00
keyword, storage.type.class #ff9d00 —
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #fff —
punctuation.definition.parameters #ffee80 —
punctuation.definition.template-expression #ffee80 —
storage.type.function.arrow #ffc600 —
string, punctuation.definition.string #a5ff90 —
string.template, punctuation.definition.string.template #3ad900 —
support.variable.property.dom #e1efff —
source.css entity, source.stylus entity #3ad900 —
entity.other.attribute-name.id.css #FFB454 —
source.css support, source.stylus support #a5ff90 —
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant #ffee80 —
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string #ffee80 —
source.css variable, source.stylus variable #9effff —
text.html.basic entity.name #9effff —
meta.toc-list.id.html #A5FF90 —
text.html.basic entity.other #ffc600 italic
meta.tag.metadata.script.html entity.name.tag.html #ffc600 —
punctuation.definition.string.begin, punctuation.definition.string.end #92fc79 —
source.ini entity #e1efff —
source.ini keyword #ffc600 —
source.ini punctuation.definition #ffee80 —
source.ini punctuation.separator #ff9d00 —
source.js storage.type.function #fb94ff —
variable.language, entity.name.type.class.js #fb94ff —
entity.other.inherited-class.js #ccc —
variable.parameter.function.language.special.self.python #fb94ff —
source.json support #ffc600 —
source.json string, source.json punctuation.definition.string #e1efff —
punctuation.definition.heading.markdown #e1efff —
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ffc600 bold
meta.paragraph.markdown #e1efff —
beginning.punctuation.definition.quote.markdown #ffc600 —
markup.quote.markdown meta.paragraph.markdown #9effff italic
meta.separator.markdown #ffc600 —
markup.bold.markdown #9effff bold
markup.italic.markdown #9effff italic
beginning.punctuation.definition.list.markdown #ffc600 —
string.other.link.title.markdown #a5ff90 —
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown #a5ff90 —
markup.underline.link.markdown, markup.underline.link.image.markdown #9effff —
fenced_code.block.language, markup.inline.raw.markdown #9effff —
fenced_code.block.language, markup.inline.raw.markdown #9effff —
text.jade entity.name #9effff —
text.jade entity.other.attribute-name.tag — italic
text.jade string.interpolated #ffee80 —
source.ts entity.name.type #80ffbb —
source.ts keyword #ffc600 —
source.ts punctuation.definition.parameters #e1efff —
meta.arrow.ts punctuation.definition.parameters #ffee80 —
source.ts storage #9effff —
variable.language, entity.name.type.class.ts, entity.name.type.class.tsx #fb94ff —
entity.other.inherited-class.ts, entity.other.inherited-class.tsx #ccc —
source.php entity #9effff —
variable.other.php #ffc600 —
entity.name.variable.property.cs #9effff —
storage.modifier.cs #80ffbb —
modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html — italic
storage.modifier.cs, keyword.type.cs #fb94ff —
entity.name.type.namespace.cs, entity.name.variable.parameter.cs, entity.name.variable.field.cs, entity.name.variable.property.cs #e1efff —
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 } !` ;
}