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 #ff00ff activityBar.activeBorder #ff00f2 activityBar.activeFocusBorder #00f7ff activityBar.background #360069 activityBar.border #ffffff activityBar.inactiveForeground #fff173 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 Origin
activityBarBadge.background #a300ee
activityBarBadge.foreground #fdff6f
activityBarTop.inactiveForeground #ffffff
badge.background #d807b5
badge.foreground #ffffff
banner.background #000000
banner.foreground #ffffff
banner.iconForeground #ffffff
breadcrumb.activeSelectionForeground #ff97e5
breadcrumb.background #420b6e
breadcrumb.focusForeground #fcf48c
breadcrumb.foreground #fcf48c
button.background #38047c
button.border #f8a7f1
button.foreground #ea97ff
button.separator #f8f07a
commandCenter.activeBackground #360069
commandCenter.activeForeground #fff9a4
commandCenter.background #350e7e
commandCenter.foreground #fff9a4
debugExceptionWidget.background #00212B
debugExceptionWidget.border #88fabb
debugToolBar.background #00212B
diffEditor.border #ffffff
diffEditor.insertedLineBackground #ff00ff9f
diffEditor.insertedTextBackground #2513223a
diffEditor.removedLineBackground #ff00009d
diffEditor.removedTextBackground #d1078eb2
dropdown.background #9804d3
dropdown.border #ffffff
editor.background #1a083a
editor.findMatchBackground #331870
editor.findMatchForeground #ffffff
editor.findMatchHighlightBackground #8210c4
editor.findMatchHighlightBorder #ffffff
editor.findMatchHighlightForeground #fa97fd
editor.foreground #f7f58b
editor.lineHighlightBackground #450086be
editor.lineHighlightBorder #ffffff
editor.selectionBackground #3c1975
editor.selectionForeground #ffffff
editor.selectionHighlightBackground #6f30d69f
editor.wordHighlightBackground #331870
editor.wordHighlightStrongBackground #e741d9be
editorBracketHighlight.foreground1 #be0f99
editorBracketHighlight.foreground2 #9800df
editorBracketHighlight.foreground3 #7b74da
editorBracketHighlight.foreground4 #ffed46
editorCursor.foreground #ff9af2
editorGroup.border #f0f1f1
editorGroup.dropBackground #00000080
editorGroupHeader.tabsBackground #150047
editorHoverWidget.background #282038
editorInfo.foreground #ffffff
editorLineNumber.activeForeground #fff67d
editorLineNumber.dimmedForeground #3d343c
editorLineNumber.foreground #db70c4c4
editorOverviewRuler.background #5b209f
editorOverviewRuler.modifiedForeground #b01dff
editorWarning.foreground #ffb9e2
editorWidget.background #14002e
editorWidget.border #e4f076
errorForeground #ff0000
extensionButton.background #250855
extensionButton.foreground #f9b3ff
extensionButton.prominentBackground default
extensionButton.prominentForeground #ff00bf
extensionButton.separator #ffffff
extensionIcon.starForeground #e9f729
extensionIcon.verifiedForeground #aa09ca
focusBorder #4d4b4b02
foreground #ffffff
gitDecoration.addedResourceForeground #ffffff
gitDecoration.conflictingResourceForeground #ff0008
gitDecoration.deletedResourceForeground #ff00006b
gitDecoration.modifiedResourceForeground #f75aa3
gitDecoration.stageModifiedResourceForeground #ffffff
gitDecoration.untrackedResourceForeground #f300fc
icon.foreground #fbfd72
input.background #180644
input.foreground #e584fd
input.placeholderForeground #f8f79c
inputOption.activeBackground #64148a
inputOption.activeBorder #ffffff
inputOption.activeForeground #ffa7e2
list.activeSelectionBackground #7716d2
list.activeSelectionForeground #e4f167
list.activeSelectionIconForeground #e4f167
list.dropBackground #b9258880
list.focusForeground #f3beef
list.focusHighlightForeground #faf49b
list.highlightForeground #ffffff
list.hoverBackground #f106061a
list.inactiveSelectionBackground #240144
list.inactiveSelectionForeground #e4f167
menu.background #260161
menu.border #ffffff
menu.foreground #fdff91
menu.selectionBackground #3c066e
menu.selectionBorder #f353e6
menu.selectionForeground #981bc9
menu.separatorBackground #ffffff
menubar.selectionBackground #000000
notificationCenter.border #ff94f1
notifications.background #2d0c69
notifications.border #000000
notifications.foreground #ffc6ff
notificationsErrorIcon.foreground #ff0000
notificationsInfoIcon.foreground #683abe
notificationsWarningIcon.foreground #f3ef1d
notificationToast.border #ffffff
panel.background #2f0c5c
panel.border #ffffff
panelSection.dropBackground #000000
panelSectionHeader.background #fdff90
panelTitle.activeBorder #ff1fda
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #e591ff
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.background #c19bfd
scrollbar.shadow #f805d0
scrollbarSlider.activeBackground #fb00ff
scrollbarSlider.background #f3fd5e
scrollbarSlider.hoverBackground #f3fd5e
selection.background #3d016e
settings.modifiedItemIndicator #f700ff
settings.textInputBackground #4a0366
settings.textInputForeground #fdff91
sideBar.background #351569
sideBar.border #ffffff
sideBar.foreground #f7a0ff
sideBarSectionHeader.background #421d88
sideBarSectionHeader.border #ffffff
sideBarSectionHeader.foreground #f4ff96
sideBarTitle.background #7e12c7
sideBarTitle.foreground #fbfd8f
statusBar.background #200650
statusBar.border #f8fafa
statusBar.debuggingBackground #d80707
statusBar.debuggingForeground #ffffff
statusBar.foreground #ffbceb
statusBar.noFolderBackground #010102
statusBarItem.activeBackground #f302d3
statusBarItem.hoverBackground #d24fecb0
statusBarItem.hoverForeground #c19bfd
statusBarItem.remoteBackground #412780
statusBarItem.remoteForeground #fb7aff
tab.activeBackground #2b026d
tab.activeBorderTop #410449
tab.activeForeground #ffffff
tab.activeModifiedBorder #db6693
tab.border #000000f3
tab.inactiveBackground #12012e
tab.inactiveForeground #ffffff
tab.selectedBackground #000000
tab.selectedForeground #ffffff
tab.unfocusedActiveForeground #ffffff
tab.unfocusedActiveModifiedBorder #88444f
tab.unfocusedInactiveForeground #ffffff
tab.unfocusedInactiveModifiedBorder #5e0202
terminal.ansiBlack #fcfcfc
terminal.ansiBlue #a8eeff
terminal.ansiBrightBlack #000000
terminal.ansiBrightBlue #aaf8fd
terminal.ansiBrightCyan #ffffff
terminal.ansiBrightGreen #ff61dd
terminal.ansiBrightRed #ff00f2
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffffff
terminal.ansiCyan #6d03f7
terminal.ansiGreen #c7a3ff
terminal.ansiMagenta #f94cff
terminal.ansiRed #f800f8
terminal.ansiWhite #ffffff
terminal.ansiYellow #9cc7f8
terminal.background #1a052e
terminal.findMatchBackground #f3fd5e
terminal.findMatchBorder #f3fd5e
terminal.findMatchHighlightBorder #f3fd5e
terminal.foreground #f0ff68
terminalCursor.foreground #fcf162
textLink.activeForeground #d82fe7
textLink.foreground #f5f5f5
titleBar.activeBackground #380e68
titleBar.activeForeground #f7f8ae
titleBar.border #f2ffb7
titleBar.inactiveBackground #300661
titleBar.inactiveForeground #ffffff
welcomePage.background #3c0752
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 #a3d9fde5 —
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 #e100ff —
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 #6200ff —
entity.name.function, support.function, support.constant.handlebars #fdf8a9 —
entity.name.function.python #eb10ff bold
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type #ee82fc —
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 #e2f58e —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f3fa92 —
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 #d15dff —
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 #fbbbfd —
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 #5d1c9b —
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 #f79cff —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, meta.item-access.arguments.python, #ae6afc —
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 #f5ea8b —
meta.function-call.generic.python #f7f7f7 —
constant.character.escape #f3cce9 —
variable.language #f1c2ff italic
string.quoted.single, string.quoted.triple #9ccefd bold
support.variable, constant.numeric, support.constant #f4ff90 bold
variable, meta.definition.variable.name, support.variable #f01bf0 —
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 } ! ` ;
}