Skip to main content
Home Theme VS Code Macho Man Randy Savage Theme A VSCode theme modeled after the greatest wrestler of all time.
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 #3f303e activityBar.border #dd76c5 activityBar.dropBackground #dd76c5 activityBar.foreground #e9f459 activityBarBadge.background #ff7d7d activityBarBadge.foreground #000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #5daff3 italic constant #ff628c — entity #ff7d7d — invalid #f44542 — storage.type.function
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Macho Man Randy Savage Theme — Macho Man
badge.background
#ff7d7d
badge.foreground #000
button.background #2F7366
button.foreground #e9f459
button.hoverBackground #fc76bf
contrastBorder #ffffff00
debugExceptionWidget.background #67325d
debugExceptionWidget.border #ffeeb3
debugToolBar.background #67325d
descriptionForeground #ffeeb3
diffEditor.insertedTextBackground #3ad90033
diffEditor.insertedTextBorder #3ad90055
diffEditor.removedTextBackground #ee3a4333
diffEditor.removedTextBorder #ee3a4355
dropdown.background #67325d
dropdown.border #2e232e
dropdown.foreground #e9f459
editor.background #27221F
editor.findMatchBackground #FF720066
editor.findMatchHighlightBackground #CAD40F66
editor.findRangeHighlightBackground #243E51
editor.foreground #e9f459
editor.hoverHighlightBackground #ff7d7d33
editor.inactiveSelectionBackground #67325d
editor.lineHighlightBackground #563E56
editor.lineHighlightBorder #67325d
editor.rangeHighlightBackground #563E56
editor.selectionBackground #67325d
editor.selectionHighlightBackground #0050A480
editor.wordHighlightBackground #ffffff21
editor.wordHighlightStrongBackground #ffffff21
editorBracketMatch.background #dd76c5
editorBracketMatch.border #ff7d7d80
editorCodeLens.foreground #ffeeb3
editorCursor.foreground #ff7d7d
editorError.border #dd76c5
editorError.foreground #A22929
editorGroup.border #3f303e
editorGroup.dropBackground #3f303e99
editorGroupHeader.noTabsBackground #67325d
editorGroupHeader.tabsBackground #67325d
editorGroupHeader.tabsBorder #2e232e
editorGutter.addedBackground #3C9F4A
editorGutter.background #3f303e66
editorGutter.deletedBackground #A22929
editorGutter.modifiedBackground #26506D
editorHoverWidget.background #2e232e
editorHoverWidget.border #dd76c5
editorIndentGuide.background #3B5364
editorLineNumber.foreground #ffeeb3
editorLink.activeForeground #ffeeb3
editorMarkerNavigation.background #3B536433
editorMarkerNavigationError.background #A22929
editorMarkerNavigationWarning.background #ff7d7d
editorOverviewRuler.border #dd76c5
editorOverviewRuler.commonContentForeground #ff7d7d55
editorOverviewRuler.currentContentForeground #ee3a4355
editorOverviewRuler.incomingContentForeground #3ad90055
editorRuler.foreground #563E56
editorSuggestWidget.background #2e232e
editorSuggestWidget.border #2e232e
editorSuggestWidget.foreground #ffeeb3
editorSuggestWidget.highlightForeground #ff7d7d
editorSuggestWidget.selectedBackground #67325d
editorWarning.border #ffffff00
editorWarning.foreground #ff7d7d
editorWhitespace.foreground #ffffff1a
editorWidget.background #2e232e
editorWidget.border #dd76c5
errorForeground #A22929
extensionButton.prominentBackground #67325d
extensionButton.prominentForeground #e9f459
extensionButton.prominentHoverBackground #fc76bf
focusBorder #dd76c5
foreground #ffeeb3
gitDecoration.conflictingResourceForeground #FF7200
gitDecoration.deletedResourceForeground #ff628c
gitDecoration.ignoredResourceForeground #747476
gitDecoration.modifiedResourceForeground #ff7d7d
gitDecoration.untrackedResourceForeground #3ad900
input.background #67325d
input.border #dd76c5
input.foreground #ff7d7d
input.placeholderForeground #ffeeb3
inputOption.activeBorder #8dffff
inputValidation.errorBackground #67325d
inputValidation.errorBorder #ff7d7d
inputValidation.infoBackground #67325d
inputValidation.infoBorder #0D3A58
inputValidation.warningBackground #67325d
inputValidation.warningBorder #ff7d7d
list.activeSelectionBackground #67325d
list.activeSelectionForeground #ffeeb3
list.dropBackground #dd76c5
list.focusBackground #dd76c5
list.focusForeground #ffeeb3
list.highlightForeground #ff7d7d
list.hoverBackground #67325d
list.hoverForeground #ffeeb3
list.inactiveSelectionBackground #dd76c5
list.inactiveSelectionForeground #ffeeb3
menu.background #3f303e
merge.border #ffffff00
merge.commonContentBackground #c97d0c
merge.commonHeaderBackground #c97d0c
merge.currentContentBackground #2F7366
merge.currentHeaderBackground #2F7366
merge.incomingContentBackground #67325d
merge.incomingHeaderBackground #67325d
notificationCenter.border #ff7d7d
notificationCenterHeader.background #3f303e
notificationCenterHeader.foreground #ffeeb3
notificationLink.foreground #ff7d7d
notifications.background #3f303e
notifications.border #ff7d7d
notifications.foreground #ffeeb3
notificationToast.border #ff7d7d
panel.background #3f303e
panel.border #ff7d7d
panelTitle.activeBorder #ff7d7d
panelTitle.activeForeground #ff7d7d
panelTitle.inactiveForeground #ffeeb3
peekView.border #ff7d7d
peekViewEditor.background #67325d
peekViewEditor.matchHighlightBackground #67325d00
peekViewEditorGutter.background #3f303e
peekViewResult.background #2e232e
peekViewResult.fileForeground #ffeeb3
peekViewResult.lineForeground #e9f459
peekViewResult.matchHighlightBackground #dd76c5
peekViewResult.selectionBackground #dd76c5
peekViewResult.selectionForeground #e9f459
peekViewTitle.background #2e232e
peekViewTitleDescription.foreground #ffeeb3
peekViewTitleLabel.foreground #ff7d7d
pickerGroup.border #dd76c5
pickerGroup.foreground #ffeeb3
progressBar.background #ff7d7d
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #355166cc
scrollbarSlider.background #563E5680
scrollbarSlider.hoverBackground #406179cc
selection.background #67325d
sideBar.background #2e232e
sideBar.border #dd76c5
sideBar.foreground #ffeeb3
sideBarSectionHeader.background #67325d
sideBarSectionHeader.foreground #aaaaaa
sideBarTitle.foreground #aaaaaa
statusBar.background #2e232e
statusBar.border #dd76c5
statusBar.debuggingBackground #2e232e
statusBar.debuggingBorder #ff7d7d
statusBar.debuggingForeground #ff7d7d
statusBar.foreground #ffeeb3
statusBar.noFolderBackground #2e232e
statusBar.noFolderBorder #dd76c5
statusBar.noFolderForeground #ffeeb3
statusBarItem.activeBackground #5daff3
statusBarItem.hoverBackground #dd76c5
statusBarItem.prominentBackground #2e232e
statusBarItem.prominentHoverBackground #dd76c5
tab.activeBackground #3f303e
tab.activeBorder #ff7d7d
tab.activeForeground #e9f459
tab.border #1e1a1e
tab.inactiveBackground #67325d
tab.inactiveForeground #ffeeb3
tab.unfocusedActiveForeground #ffeeb3
tab.unfocusedInactiveForeground #ffeeb3
terminal.ansiBlack #000000
terminal.ansiBlue #5daff3
terminal.ansiBrightBlack #0050A4
terminal.ansiBrightBlue #5daff3
terminal.ansiBrightCyan #80fcff
terminal.ansiBrightGreen #3ad900
terminal.ansiBrightMagenta #fb94ff
terminal.ansiBrightRed #ff628c
terminal.ansiBrightWhite #67325d
terminal.ansiBrightYellow #ff7d7d
terminal.ansiCyan #80fcff
terminal.ansiGreen #3ad900
terminal.ansiMagenta #fb94ff
terminal.ansiRed #ff628c
terminal.ansiWhite #ffffff
terminal.ansiYellow #ff7d7d
terminal.background #3f303e
terminal.foreground #ffffff
terminalCursor.background #ff7d7d
terminalCursor.foreground #ff7d7d
textBlockQuote.background #67325d
textBlockQuote.border #67325d
textCodeBlock.background #67325d
textLink.activeForeground #ff7d7d
textLink.foreground #ff7d7d
textPreformat.foreground #3ad900
textSeparator.foreground #dd76c5
titleBar.activeBackground #1e1a1e
titleBar.activeForeground #ffffff
titleBar.inactiveBackground #67325d
titleBar.inactiveForeground #ffffff33
walkThrough.embeddedEditorBackground #dd76c5
welcomePage.buttonBackground #67325d
welcomePage.buttonHoverBackground #dd76c5
widget.shadow #00000026 #fc76bf
keyword, storage.type.class #fc76bf —
punctuation.definition.parameters #e9f459 —
punctuation.definition.template-expression #e9f459 —
storage.type.function.arrow #ff7d7d —
string, punctuation.definition.string #80ffbb —
string.template, punctuation.definition.string.template #3ad900 —
support.variable.property.dom #e6d891 —
source.css entity, source.stylus entity #3ad900 —
entity.other.attribute-name.id.css #FFB454 —
source.css support, source.stylus support #dd76c5 —
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant #e9f459 —
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string #e9f459 —
source.css variable, source.stylus variable #ffd9fb —
text.html.basic entity.name #ffd9fb —
meta.toc-list.id.html #A5FF90 —
text.html.basic entity.other #ff7d7d italic
meta.tag.metadata.script.html entity.name.tag.html #ff7d7d —
punctuation.definition.string.begin, punctuation.definition.string.end #80ffbb —
source.ini entity #e6d891 —
source.ini keyword #ff7d7d —
source.ini punctuation.definition #e9f459 —
source.ini punctuation.separator #fc76bf —
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 #ff7d7d —
source.json string, source.json punctuation.definition.string #e6d891 —
punctuation.definition.heading.markdown #e6d891 —
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #ff7d7d bold
meta.paragraph.markdown #e6d891 —
beginning.punctuation.definition.quote.markdown #ff7d7d —
markup.quote.markdown meta.paragraph.markdown #ffd9fb italic
meta.separator.markdown #ff7d7d —
markup.bold.markdown #ffd9fb bold
markup.italic.markdown #ffd9fb italic
beginning.punctuation.definition.list.markdown #ff7d7d —
string.other.link.title.markdown #dd76c5 —
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown #dd76c5 —
markup.underline.link.markdown, markup.underline.link.image.markdown #ffd9fb —
fenced_code.block.language, markup.inline.raw.markdown #ffd9fb —
fenced_code.block.language, markup.inline.raw.markdown #ffd9fb —
markup.heading.markdown #80ffbb —
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string #e9f459 —
punctuation.definition.metadata.markdown #80ffbb —
beginning.punctuation.definition.list.markdown #e9f459 —
markup.inline.raw.string.markdown #80ffbb —
text.jade entity.name #ffd9fb —
text.jade entity.other.attribute-name.tag — italic
text.jade string.interpolated #e9f459 —
source.ts entity.name.type #80ffbb —
source.ts keyword #ff7d7d —
source.ts punctuation.definition.parameters #e6d891 —
meta.arrow.ts punctuation.definition.parameters #e9f459 —
source.ts storage #ffd9fb —
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block #d6deeb —
meta.class entity.name.type.class.tsx #e6d891 —
entity.name.type.tsx, entity.name.type.module.tsx #e6d891 —
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx #ff628c —
meta.tag.js meta.jsx.children.tsx #ff628c —
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx #ff628c —
source.php entity #ffd9fb —
variable.other.php #ff7d7d —
meta.function-call.php punctuation #d6deeb —
entity.name.variable.property.cs #ffd9fb —
storage.modifier.cs #80ffbb —
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*
Macho Man Randy Savage Theme | Coding Theme
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 } !` ;
}