Skip to main content
Raiden Mei 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.activeBackground #ff0000 activityBar.activeBorder #ffffff activityBar.background #000000 activityBar.inactiveForeground #ffffff activityBarBadge.background #000000 activityBarBadge.foreground #e70000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold meta.diff.header #df0c0c — comment #868b96 — constant.regexp #8e09a8 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Raiden Mei Theme — Herrscher of Thunder
activityBarTop.inactiveForeground #ffffff
badge.background #d807b5
badge.foreground #ffffff
banner.background #000000
banner.foreground #ffffff
banner.iconForeground #ffffff
breadcrumb.activeSelectionForeground #ffffff
button.background #000000
button.border #ffffff
button.foreground #ee008b
button.separator #ffffff
commandCenter.activeBackground #000000
commandCenter.activeForeground #ffffff
commandCenter.background #000000
commandCenter.foreground #ffffff
debugExceptionWidget.background #00212B
debugExceptionWidget.border #88fabb
debugToolBar.background #00212B
diffEditor.border #ffffff
diffEditor.insertedLineBackground #7e077e9f
diffEditor.insertedTextBackground #ff00004b
diffEditor.removedLineBackground #ff000060
diffEditor.removedTextBackground #d1078eb2
dropdown.background #9804d3
dropdown.border #ffffff
editor.background #08000a
editor.findMatchBackground #2c0a1f
editor.findMatchForeground #ffffff
editor.findMatchHighlightBackground #c41064
editor.findMatchHighlightBorder #ffffff
editor.findMatchHighlightForeground #fa97fd
editor.foreground #e58bf7
editor.lineHighlightBackground #49002b
editor.lineHighlightBorder #ffffff
editor.selectionBackground #650072
editor.selectionForeground #ffffff
editor.selectionHighlightBackground #b30fc99f
editor.wordHighlightBackground #4f1b53
editor.wordHighlightStrongBackground #e741d9be
editorBracketHighlight.foreground1 #fd00c6
editorBracketHighlight.foreground2 #df0016
editorBracketHighlight.foreground3 #f30317
editorBracketHighlight.foreground4 #ffed46
editorCursor.foreground #ff0000
editorGroup.border #f0f1f1
editorGroup.dropBackground #00000080
editorGroupHeader.tabsBackground #000000
editorHoverWidget.background #282038
editorInfo.foreground #ffffff
editorLineNumber.activeForeground #ce0172
editorLineNumber.dimmedForeground #3d343c
editorLineNumber.foreground #661053
editorOverviewRuler.background #ff0000
editorOverviewRuler.modifiedForeground #ffffff
editorWarning.foreground #ffb9e2
editorWidget.background #000000
editorWidget.border #ffffff
errorForeground #ff0000
extensionButton.background #000000
extensionButton.foreground #ca147e
extensionButton.prominentBackground default
extensionButton.prominentForeground #ff00bf
extensionButton.separator #ffffff
extensionIcon.starForeground #e9f729
extensionIcon.verifiedForeground #f30c8b
focusBorder #ff0000
foreground #ffffff
gitDecoration.addedResourceForeground #ffffff
gitDecoration.conflictingResourceForeground #ff0008
gitDecoration.deletedResourceForeground #ff00006b
gitDecoration.modifiedResourceForeground #f75aa3
gitDecoration.stageModifiedResourceForeground #ffffff
gitDecoration.untrackedResourceForeground #f300fc
icon.foreground #ffffff
input.background #1a0025
input.foreground #fca9e0
input.placeholderForeground #ff0000
inputOption.activeBackground #000000
inputOption.activeBorder #ffffff
inputOption.activeForeground #ff00aa
list.activeSelectionBackground #00000080
list.activeSelectionForeground #FFFFFF
list.activeSelectionIconForeground #ff0000
list.dropBackground #b9258880
list.focusForeground #ffffff
list.focusHighlightForeground #ff0000
list.highlightForeground #ffffff
list.hoverBackground #f106061a
list.inactiveSelectionBackground #1d1d1d
menu.border #14011a
menu.foreground #ffffff
menu.selectionBackground #000000
menu.selectionBorder #b90202
menu.selectionForeground #ffffff
menu.separatorBackground #ffffff
menubar.selectionBackground #000000
notificationCenter.border #ffffff
notifications.border #000000
notificationsErrorIcon.foreground #ff0000
notificationsInfoIcon.foreground #f800e3
notificationsWarningIcon.foreground #f3ef1d
notificationToast.border #ffffff
panel.background #000000
panel.border #ffffff
panelSection.dropBackground #000000
panelSectionHeader.background #ffffff
panelTitle.activeBorder #99031780
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #fa0000
peekView.border #000000
peekViewEditor.background #1b1525
peekViewResult.background #282038
peekViewResult.matchHighlightBackground #0e0909
peekViewTitle.background #221b2f
pickerGroup.border #9505a81a
pickerGroup.foreground #c40bc499
profileBadge.foreground #ffffff
scm.historyItemAdditionsForeground #ffffff
scrollbar.shadow #f805d0
scrollbarSlider.activeBackground #f3fd5e
scrollbarSlider.background #cfcfcf
scrollbarSlider.hoverBackground #f3fd5e
selection.background #3d016e
settings.modifiedItemIndicator #e91fb6
settings.textInputBackground #1a0025
settings.textInputForeground #ee66cc
sideBar.background #0c0311
sideBar.border #ffffff
sideBar.foreground #f7a9f7
sideBarSectionHeader.background #0e000c
sideBarSectionHeader.border #ffffff
sideBarSectionHeader.foreground #f363cf
sideBarTitle.background #000000
sideBarTitle.foreground #f577e0
statusBar.background #ff0000
statusBar.border #f8fafa
statusBar.debuggingBackground #d80707
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffffff
statusBar.noFolderBackground #010102
statusBarItem.activeBackground #f302d3
statusBarItem.hoverBackground #f501011a
statusBarItem.remoteBackground #c01d6f
statusBarItem.remoteForeground #ececec
tab.activeBackground #300202
tab.activeBorderTop #410449
tab.activeForeground #ffffff
tab.activeModifiedBorder #db6693
tab.border #000000f3
tab.inactiveBackground #000000
tab.inactiveForeground #b0b1b0
tab.selectedBackground #000000
tab.selectedForeground #ffffff
tab.unfocusedActiveBackground #2c0130
tab.unfocusedActiveForeground #ffffff
tab.unfocusedActiveModifiedBorder #88444f
tab.unfocusedInactiveBackground #000000
tab.unfocusedInactiveForeground #ffffff
tab.unfocusedInactiveModifiedBorder #5e0202
terminal.ansiBlack #fcfcfc
terminal.ansiBlue #ec0eec
terminal.ansiBrightBlack #000000
terminal.ansiBrightBlue #f80000
terminal.ansiBrightCyan #ff37c3
terminal.ansiBrightGreen #fafafa
terminal.ansiBrightWhite #e60b0b
terminal.ansiBrightYellow #ffffff
terminal.ansiCyan #f703ae
terminal.ansiGreen #ffffff
terminal.ansiWhite #f70707
terminal.ansiYellow #ff0000
terminal.background #000000
terminal.findMatchBackground #f3fd5e
terminal.findMatchBorder #f3fd5e
terminal.findMatchHighlightBorder #f3fd5e
terminal.foreground #c212da
terminalCursor.foreground #d60404
textLink.activeForeground #d82fe7
textLink.foreground #f5f5f5
titleBar.activeBackground #000000
titleBar.activeForeground #ffffff
titleBar.border #ffffff
titleBar.inactiveBackground #000000
titleBar.inactiveForeground #ffffff
welcomePage.background #12021a
welcomePage.tileBackground #000000
welcomePage.tileBorder #ffffff
welcomePage.tileHoverBackground #ff0000 entity.name.tag.css #dab2f1 —
entity.other.attribute-name #ff7df9 —
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name #e60baf —
markup.underline — underline
punctuation.definition.tag #e236f1 —
meta.preprocessor #ad0057 —
meta.preprocessor.string #d015ff —
meta.preprocessor.numeric #7700d8 —
meta.structure.dictionary.key.python #cb19e2 —
storage.modifier #e408e4e5 —
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js #ffffff —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less #f54f8e —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python #f30000 —
keyword.other.unit #9c187b —
support.function.git-rebase #e415c8 —
constant.sha.git-rebase #581081 —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #9478a1 —
variable.language.this #f7066a —
entity.name.function, support.function, support.constant.handlebars #fff346 —
entity.name.function.python #ee04bb bold
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type #b40557 —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #ce00bd —
meta.object-literal.key, meta.object-literal.key entity.name.function #af3bb3 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #ffffff —
source.json meta.structure.dictionary.json support.type.property-name.json #a429f7 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #fa6bff —
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 #ff0000 —
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 #b42478 —
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 #fa6bff —
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 #a20ec7 —
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 #b42478 —
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 #f0e224 —
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 #b00ff0 —
text.html.markdown, punctuation.definition.list_item.markdown, meta.paragraph.markdown #c300ff —
text.html.markdown markup.inline.raw.markdown #ffffff —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #b398f1 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #d40d99 —
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.operator.new.ts, meta.object-literal.key.ts #ffee59 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.item-access.arguments.python, #ff95fa —
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, variable.object.property.ts #ff5faa —
meta.function-call.generic.python #c300ff —
constant.character.escape #f3cce9 —
variable.language #a12f68 italic
string.quoted.single, string.quoted.triple #861e8a bold
support.variable, constant.numeric, support.constant #ffffff bold
variable, meta.definition.variable.name, support.variable #fa5eb9 —
support.type.exception #ff0000 —
comment.line.double-slash.cs, comment.block.cs, punctuation.definition.comment.json.comments, comment.line.double-slash.js, meta.structure.array.json.comments, meta.structure.dictionary.value.json.comments, meta.structure.dictionary.json.comments, source.json.comments, comment.block.css, comment.block.html, meta.property-list.css, comment.line.number-sign.python, punctuation.definition.comment.cs, comment.block.documentation.cs, punctuation.definition.comment.ts, comment.line.double-slash.ts, comment.line.scss, comment.block.ts, comment.block.scss, comment.block.documentation.ts, comment.line.double-slash.tsx, comment.block.tsx #868b96 —
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 } ! ` ;
}