Skip to main content
Home Theme VS Code Dark Mage by Ray -A VS Code Theme A theme with less distactions and more focus on your code!
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.activeBackground #26303233 activityBar.activeBorder #b4ddd9 activityBar.activeFocusBorder #a3ffe5 activityBar.background #090e11 activityBar.border #090e11 activityBar.dropBorder #ffdd00 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #b4ddd9 — comment #5f7575 — constant #006699 — entity #c4c4c4 — invalid
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Dark Mage by Ray -A VS Code Theme — Dark Mage
activityBar.foreground
#98bab7
activityBar.inactiveForeground #7b9896
activityBarBadge.background #a3ffe5
activityBarBadge.foreground #090e11
badge.background #a3ffe5
badge.foreground #090e11
breadcrumb.activeSelectionForeground #d1fffa
breadcrumb.background #090e11
breadcrumb.focusForeground #b4ddd9
breadcrumb.foreground #98bab7
breadcrumbPicker.background #090e11
button.background #ffdd00
button.foreground #090e11
button.hoverBackground #c4c4c4
button.secondaryBackground #b4ddd9
button.secondaryForeground #090e11
button.secondaryHoverBackground #98bab7
charts.blue #ffdd00
charts.foreground #b4ddd9
charts.green #bdf7ff
charts.lines #5f7575
charts.orange #8af1ff
charts.purple #a3ffe5
charts.red #9effef
charts.yellow #ffc800
checkbox.background #ffdd00
checkbox.border #263032
checkbox.foreground #090e11
debugConsole.errorForeground #9effef
debugConsole.infoForeground #ffdd00
debugConsole.sourceForeground #a3ffe5
debugConsole.warningForeground #8af1ff
debugConsoleInputIcon.foreground #7b9896
debugExceptionWidget.background #263032
debugExceptionWidget.border #263032
debugIcon.breakpointCurrentStackframeForeground #bdf7ff
debugIcon.breakpointDisabledForeground #7b9896
debugIcon.breakpointForeground #9effef
debugIcon.breakpointStackframeForeground #ffc800
debugIcon.breakpointUnverifiedForeground #98bab7
debugIcon.continueForeground #bdf7ff
debugIcon.disconnectForeground #8af1ff
debugIcon.pauseForeground #ffdd00
debugIcon.restartForeground #006699
debugIcon.startForeground #bdf7ff
debugIcon.stepBackForeground #d1fffa
debugIcon.stepIntoForeground #d1fffa
debugIcon.stepOutForeground #d1fffa
debugIcon.stepOverForeground #d1fffa
debugIcon.stopForeground #9effef
debugTokenExpression.boolean #a3ffe5
debugTokenExpression.error #9effef
debugTokenExpression.name #ffdd00
debugTokenExpression.number #006699
debugTokenExpression.string #bdf7ff
debugTokenExpression.value #d1fffa
debugToolBar.background #263032
debugToolBar.border #425354
debugView.exceptionLabelBackground #263032
debugView.exceptionLabelForeground #ffc800
debugView.stateLabelBackground #263032
debugView.stateLabelForeground #ffdd00
debugView.valueChangedHighlight #ffc80033
descriptionForeground #b4ddd9
diffEditor.border #263032
diffEditor.diagonalFill #2630327f
diffEditor.insertedTextBackground #bdf7ff20
diffEditor.removedTextBackground #9effef20
dropdown.background #263032
dropdown.border #263032
dropdown.foreground #b4ddd9
dropdown.listBackground #263032
editor.background #090e11
editor.findMatchBackground #ffc8003f
editor.findMatchHighlightBackground #ffc80033
editor.findRangeHighlightBackground #263032
editor.focusedStackFrameHighlightBackground #bdf7ff3f
editor.foldBackground #26303266
editor.foreground #d1fffa
editor.hoverHighlightBackground #4253547f
editor.inactiveSelectionBackground #ffdd0033
editor.lineHighlightBackground #090e11
editor.lineHighlightBorder #263032
editor.rangeHighlightBackground #ffc80033
editor.selectionBackground #ffdd0033
editor.selectionForeground #d1fffa
editor.selectionHighlightBackground #263032
editor.snippetFinalTabstopHighlightBackground #4253547f
editor.snippetTabstopHighlightBackground #2630327f
editor.stackFrameHighlightBackground #c4c4c43f
editor.symbolHighlightBackground #a3ffe533
editor.wordHighlightBackground #a3ffe533
editor.wordHighlightStrongBackground #00669933
editorBracketMatch.background #263032
editorBracketMatch.border #425354
editorCodeLens.foreground #98bab7
editorCursor.background #090e11
editorCursor.foreground #a3ffe5
editorError.border #d1fffa
editorError.foreground #9effef
editorGroup.border #263032
editorGroup.dropBackground #4253547f
editorGroup.emptyBackground #090e11
editorGroup.focusedEmptyBorder #263032
editorGroupHeader.border #090e11
editorGroupHeader.noTabsBackground #090e11
editorGroupHeader.tabsBackground #090e11
editorGroupHeader.tabsBorder #090e11
editorGutter.addedBackground #bdf7ff
editorGutter.background #090e11
editorGutter.commentRangeForeground #5f7575
editorGutter.deletedBackground #9effef
editorGutter.foldingControlForeground #98bab7
editorGutter.modifiedBackground #ffc800
editorHint.border #7b9896
editorHint.foreground #006699
editorHoverWidget.background #263032
editorHoverWidget.border #263032
editorHoverWidget.foreground #b4ddd9
editorHoverWidget.statusBarBackground #ffdd0033
editorIndentGuide.activeBackground #425354
editorIndentGuide.background #263032
editorInfo.border #98bab7
editorInfo.foreground #ffdd00
editorLightBulb.foreground #ffc800
editorLightBulbAutoFix.foreground #ffdd00
editorLineNumber.activeForeground #7b9896
editorLineNumber.foreground #425354
editorLink.activeForeground #c4c4c4
editorMarkerNavigation.background #263032
editorMarkerNavigationError.background #9effef
editorMarkerNavigationInfo.background #ffdd00
editorMarkerNavigationWarning.background #8af1ff
editorOverviewRuler.addedForeground #bdf7ff7f
editorOverviewRuler.border #263032
editorOverviewRuler.bracketMatchForeground #5f7575
editorOverviewRuler.commonContentForeground #a3ffe5
editorOverviewRuler.currentContentForeground #c4c4c4
editorOverviewRuler.deletedForeground #9effef7f
editorOverviewRuler.errorForeground #9effef7f
editorOverviewRuler.findMatchForeground #ffc800bf
editorOverviewRuler.incomingContentForeground #ffdd00
editorOverviewRuler.infoForeground #ffdd007f
editorOverviewRuler.modifiedForeground #ffc8007f
editorOverviewRuler.rangeHighlightForeground #425354bf
editorOverviewRuler.selectionHighlightForeground #263032bf
editorOverviewRuler.warningForeground #8af1ff7f
editorOverviewRuler.wordHighlightForeground #425354bf
editorOverviewRuler.wordHighlightStrongForeground #5f7575bf
editorPane.background #090e11
editorRuler.foreground #263032
editorSuggestWidget.background #263032
editorSuggestWidget.border #263032
editorSuggestWidget.foreground #b4ddd9
editorSuggestWidget.highlightForeground #006699
editorSuggestWidget.selectedBackground #425354
editorUnnecessaryCode.opacity #0000007f
editorWarning.border #b4ddd9
editorWarning.foreground #8af1ff
editorWhitespace.foreground #263032
editorWidget.background #263032
editorWidget.border #263032
editorWidget.foreground #b4ddd9
editorWidget.resizeBorder #ffdd00
errorForeground #9effef
extensionBadge.remoteBackground #006699
extensionBadge.remoteForeground #090e11
extensionButton.prominentBackground #ffdd00
extensionButton.prominentForeground #090e11
extensionButton.prominentHoverBackground #c4c4c4
focusBorder #a3ffe5
foreground #d1fffa
gitDecoration.addedResourceForeground #bdf7ff
gitDecoration.conflictingResourceForeground #c4c4c4
gitDecoration.deletedResourceForeground #9effef
gitDecoration.ignoredResourceForeground #5f7575
gitDecoration.modifiedResourceForeground #ffc800
gitDecoration.stageDeletedResourceForeground #9effef
gitDecoration.stageModifiedResourceForeground #c4c4c4
gitDecoration.submoduleResourceForeground #006699
gitDecoration.untrackedResourceForeground #a3ffe5
icon.foreground #b4ddd9
imagePreview.border #263032
input.background #263032
input.border #263032
input.foreground #b4ddd9
input.placeholderForeground #425354
inputOption.activeBackground #425354
inputOption.activeBorder #c4c4c4
inputOption.activeForeground #d1fffa
inputValidation.errorBackground #263032
inputValidation.errorBorder #9effef
inputValidation.errorForeground #9effef
inputValidation.infoBackground #263032
inputValidation.infoBorder #ffdd00
inputValidation.infoForeground #ffdd00
inputValidation.warningBackground #263032
inputValidation.warningBorder #8af1ff
inputValidation.warningForeground #8af1ff
list.activeSelectionBackground #a3ffe533
list.activeSelectionForeground #d1fffa
list.deemphasizedForeground #7b9896
list.dropBackground #263032
list.errorForeground #9effef
list.filterMatchBackground #ffc80033
list.filterMatchBorder #ffc80033
list.focusBackground #5f75753f
list.focusForeground #d1fffa
list.highlightForeground #ffc800
list.hoverBackground #26303233
list.hoverForeground #d1fffa
list.inactiveFocusBackground #2630323f
list.inactiveSelectionBackground #4253543f
list.inactiveSelectionForeground #b4ddd9
list.invalidItemForeground #9effef
list.warningForeground #ffc800
listFilterWidget.background #263032
listFilterWidget.noMatchesOutline #9effef
listFilterWidget.outline #ffdd00
menu.background #090e11
menu.foreground #b4ddd9
menu.selectionBackground #263032
menu.selectionForeground #d1fffa
menu.separatorBackground #425354
menubar.selectionBackground #263032
menubar.selectionForeground #d1fffa
merge.border #7b9896
merge.commonContentBackground #a3ffe54c
merge.commonHeaderBackground #a3ffe54c
merge.currentContentBackground #c4c4c44c
merge.currentHeaderBackground #c4c4c44c
merge.incomingContentBackground #ffdd004c
merge.incomingHeaderBackground #ffdd004c
minimap.background #090e11
minimap.errorHighlight #9effef80
minimap.findMatchHighlight #ffc800
minimap.selectionHighlight #ffdd0080
minimap.warningHighlight #8af1ff80
minimapGutter.addedBackground #bdf7ff80
minimapGutter.deletedBackground #9effef80
minimapGutter.modifiedBackground #ffc80080
minimapSlider.activeBackground #5f757533
minimapSlider.background #26303233
minimapSlider.hoverBackground #42535433
notebook.cellBorderColor #2630323f
notebook.cellHoverBackground #2630323f
notebook.cellInsertionIndicator #bdf7ff
notebook.cellStatusBarItemHoverBackground #2630323f
notebook.cellToolbarSeparator #2630323f
notebook.focusedCellBackground #2630327f
notebook.focusedCellBorder #a3ffe5
notebook.focusedCellShadow #0000003f
notebook.focusedEditorBorder #263032
notebook.focusedRowBorder #a3ffe5
notebook.inactiveFocusedCellBorder #98bab7
notebook.outputContainerBackgroundColor #090e11
notebook.rowHoverBackground #2630327f
notebook.selectedCellBorder #7b9896
notebook.symbolHighlightBackground #a3ffe53f
notebookScrollbarSlider.activeBackground #98bab77f
notebookScrollbarSlider.background #5f75757f
notebookScrollbarSlider.hoverBackground #7b98967f
notebookStatusErrorIcon.foreground #9effef
notebookStatusRunningIcon.foreground #ffdd00
notebookStatusSuccessIcon.foreground #bdf7ff
notificationCenterHeader.background #425354
notificationCenterHeader.foreground #b4ddd9
notificationLink.foreground #ffdd00
notifications.background #263032
notifications.border #5f7575
notifications.foreground #d1fffa
notificationsErrorIcon.foreground #9effef
notificationsInfoIcon.foreground #ffdd00
notificationsWarningIcon.foreground #8af1ff
notificationToast.border #5f7575
panel.background #090e11
panel.border #263032
panel.dropBorder #ffdd00
panelSection.border #263032
panelSection.dropBackground #2630323f
panelSectionHeader.background #425354
panelSectionHeader.border #090e11
panelSectionHeader.foreground #b4ddd9
panelTitle.activeBorder #5f7575
panelTitle.activeForeground #b4ddd9
panelTitle.inactiveForeground #7b9896
peekView.border #006699
peekViewEditor.background #2630327f
peekViewEditor.matchHighlightBackground #ffc8007f
peekViewEditorGutter.background #2630327f
peekViewResult.background #263032
peekViewResult.fileForeground #b4ddd9
peekViewResult.lineForeground #425354
peekViewResult.matchHighlightBackground #ffc800
peekViewResult.selectionBackground #5f7575
peekViewResult.selectionForeground #d1fffa
peekViewTitle.background #263032
peekViewTitleDescription.foreground #98bab7
peekViewTitleLabel.foreground #d1fffa
pickerGroup.border #425354
pickerGroup.foreground #7b9896
problemsErrorIcon.foreground #9effef
problemsInfoIcon.foreground #ffdd00
problemsWarningIcon.foreground #8af1ff
progressBar.background #bdf7ff
quickInput.background #263032
quickInput.foreground #d1fffa
quickInputTitle.background #425354
sash.hoverBorder #ffdd00
scm.providerBorder #425354
scrollbar.shadow #090e11
scrollbarSlider.activeBackground #98bab77f
scrollbarSlider.background #5f75757f
scrollbarSlider.hoverBackground #7b98967f
selection.background #425354
settings.checkboxBackground #ffdd00
settings.checkboxBorder #ffdd00
settings.checkboxForeground #090e11
settings.dropdownBackground #263032
settings.dropdownForeground #b4ddd9
settings.dropdownListBorder #425354
settings.focusedRowBackground #090e11
settings.headerForeground #d1fffa
settings.modifiedItemIndicator #c4c4c4
settings.numberInputBackground #263032
settings.numberInputForeground #b4ddd9
settings.textInputBackground #263032
settings.textInputForeground #b4ddd9
sideBar.background #090e11
sideBar.border #263032
sideBar.dropBackground #2630323f
sideBar.foreground #b4ddd9
sideBarSectionHeader.background #425354
sideBarSectionHeader.border #090e11
sideBarSectionHeader.foreground #b4ddd9
sideBarTitle.foreground #98bab7
statusBar.background #ffdd00
statusBar.border #090e11
statusBar.debuggingBackground #8af1ff
statusBar.debuggingBorder #090e11
statusBar.debuggingForeground #090e11
statusBar.foreground #090e11
statusBar.noFolderBackground #a3ffe5
statusBar.noFolderBorder #090e11
statusBar.noFolderForeground #090e11
statusBarItem.activeBackground #c4c4c4
statusBarItem.errorBackground #9effef
statusBarItem.errorForeground #090e11
statusBarItem.hoverBackground #bdf7ff
statusBarItem.prominentBackground #c4c4c4
statusBarItem.prominentHoverBackground #bdf7ff
statusBarItem.remoteBackground #c4c4c4
statusBarItem.remoteForeground #090e11
symbolIcon.arrayForeground #006699
symbolIcon.booleanForeground #a3ffe5
symbolIcon.classForeground #ffdd00
symbolIcon.colorForeground #c4c4c4
symbolIcon.constantForeground #bdf7ff
symbolIcon.constructorForeground #a3ffe5
symbolIcon.enumeratorForeground #c4c4c4
symbolIcon.enumeratorMemberForeground #ffdd00
symbolIcon.eventForeground #8af1ff
symbolIcon.fieldForeground #9effef
symbolIcon.fileForeground #b4ddd9
symbolIcon.folderForeground #98bab7
symbolIcon.functionForeground #a3ffe5
symbolIcon.interfaceForeground #9effef
symbolIcon.keyForeground #ffc800
symbolIcon.keywordForeground #ffdd00
symbolIcon.methodForeground #c4c4c4
symbolIcon.moduleForeground #c4c4c4
symbolIcon.namespaceForeground #ffdd00
symbolIcon.nullForeground #9effef
symbolIcon.numberForeground #8af1ff
symbolIcon.objectForeground #d1fffa
symbolIcon.operatorForeground #9effef
symbolIcon.packageForeground #8af1ff
symbolIcon.propertyForeground #c4c4c4
symbolIcon.referenceForeground #8af1ff
symbolIcon.snippetForeground #98bab7
symbolIcon.stringForeground #bdf7ff
symbolIcon.structForeground #ffdd00
symbolIcon.textForeground #d1fffa
symbolIcon.typeParameterForeground #ffdd00
symbolIcon.unitForeground #ffc800
symbolIcon.variableForeground #8af1ff
tab.activeBackground #090e11
tab.activeForeground #b4ddd9
tab.activeModifiedBorder #ffc800
tab.border #090e11
tab.hoverBackground #26303280
tab.hoverForeground #98bab7
tab.inactiveBackground #263032
tab.inactiveForeground #5f7575
tab.inactiveModifiedBorder #ffc800
tab.lastPinnedBorder #006699
tab.unfocusedActiveBackground #090e11
tab.unfocusedActiveForeground #5f7575
tab.unfocusedActiveModifiedBorder #ffc800
tab.unfocusedHoverBackground #26303280
tab.unfocusedHoverForeground #7b9896
tab.unfocusedInactiveBackground #263032
tab.unfocusedInactiveForeground #425354
tab.unfocusedInactiveModifiedBorder #ffc800
terminal.ansiBlack #090e11
terminal.ansiBlue #ffdd00
terminal.ansiBrightBlack #263032
terminal.ansiBrightBlue #ffdd00
terminal.ansiBrightCyan #c4c4c4
terminal.ansiBrightGreen #c4c4c4
terminal.ansiBrightMagenta #006699
terminal.ansiBrightRed #8af1ff
terminal.ansiBrightWhite #d1fffa
terminal.ansiBrightYellow #ffc800
terminal.ansiCyan #c4c4c4
terminal.ansiGreen #bdf7ff
terminal.ansiMagenta #006699
terminal.ansiRed #9effef
terminal.ansiWhite #b4ddd9
terminal.ansiYellow #ffc800
terminal.background #090e11
terminal.foreground #b4ddd9
terminal.selectionBackground #ffdd007f
terminalCursor.background #263032
terminalCursor.foreground #98bab7
testing.iconErrored #9effef
testing.iconFailed #8af1ff
testing.iconPassed #bdf7ff
testing.iconQueued #c4c4c4
testing.iconSkipped #7b9896
testing.iconUnset #98bab7
testing.message.error.decorationForeground #9effef
testing.message.error.lineBackground #9effef3f
testing.message.hint.decorationForeground #006699
testing.message.hint.lineBackground #0066993f
testing.message.info.decorationForeground #ffdd00
testing.message.info.lineBackground #ffdd003f
testing.message.warning.decorationForeground #8af1ff
testing.message.warning.lineBackground #8af1ff3f
testing.peekBorder #5f7575
testing.runAction #ffdd00
textBlockQuote.background #263032
textBlockQuote.border #263032
textCodeBlock.background #090e11
textLink.activeForeground #c4c4c4
textLink.foreground #ffdd00
textPreformat.foreground #8af1ff
textSeparator.foreground #7b9896
titleBar.activeBackground #090e11
titleBar.activeForeground #98bab7
titleBar.inactiveBackground #090e11
titleBar.inactiveForeground #5f7575
tree.indentGuidesStroke #263032
walkThrough.embeddedEditorBackground #090e11
welcomePage.background #090e11
welcomePage.buttonBackground #263032
welcomePage.buttonHoverBackground #425354
welcomePage.progress.background #ffdd00
welcomePage.progress.foreground #090e11
widget.shadow #090e11
#9effef
markup.underline — underline
markup.underline.link #ffdd00 —
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 }!` ;
}
Dark Mage by Ray -A VS Code Theme | Coding Theme