Skip to main content
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 #282C3D activityBar.foreground #FFFFFF activityBarBadge.background #3a2e50 activityBarBadge.foreground #ffffff button.background #3a2e50 diffEditor.insertedTextBackground #e0d1f8 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #72707a italic string, string.template #e5c07b string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded, constant.character #C792EA — punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
dropdown.background
#292D3E
dropdown.border #2d2142
editor.background #292D3E
editor.findMatchBackground #373b4bfa
editor.findMatchHighlightBackground #373b4bfa
editor.lineHighlightBackground #373b4bfa
editor.selectionBackground #5e658afa
editorCursor.foreground #C792EA
editorError.foreground #c24038
editorGroup.border #7b7880
editorGroup.emptyBackground #292D3E
editorGroupHeader.tabsBackground #31364A
editorHoverWidget.background #3a2e50
editorHoverWidget.border #292D3E
editorIndentGuide.background #383D56
editorLineNumber.foreground #495173
editorRuler.foreground #373b4bfa
editorSuggestWidget.background #373b4bfa
editorSuggestWidget.border #453069
editorSuggestWidget.selectedBackground #242630fa
editorUnnecessaryCode.opacity #000000c0
editorWhitespace.foreground #383D56
editorWidget.background #383D56
input.background #3a2e50
list.activeSelectionBackground #3a2e50
list.activeSelectionForeground #D4DCE0
list.focusBackground #3a2e50
list.highlightForeground #ffffff
list.hoverBackground #3a2e50
list.inactiveSelectionBackground #3a2e50
list.inactiveSelectionForeground #D4DCE0
notifications.background #3a2e50
scrollbarSlider.activeBackground #747D91
scrollbarSlider.background #4E5666
scrollbarSlider.hoverBackground #5A6375
sideBar.background #2A2E3F
sideBarSectionHeader.background #292D3E
statusBar.background #2c3147
statusBar.debuggingBackground #2c3147
statusBar.foreground #868693
statusBar.noFolderBackground #2c3147
statusBarItem.hoverBackground #535368
tab.activeBackground #292D3E
tab.border #292D3E
tab.inactiveBackground #31364A
terminal.ansiBlack #2f333a
terminal.ansiBlue #5389f7
terminal.ansiBrightBlack #757981
terminal.ansiBrightBlue #528cff
terminal.ansiBrightCyan #5dbbc7
terminal.ansiBrightGreen #a0cc81
terminal.ansiBrightMagenta #84019e
terminal.ansiBrightRed #f84f4f
terminal.ansiBrightWhite #dce0e7
terminal.ansiBrightYellow #ebc784
terminal.ansiCyan #59bdca
terminal.ansiGreen #a3cf83
terminal.ansiMagenta #bc72d3
terminal.ansiRed #e26b75
terminal.ansiWhite #d1d5dd
terminal.ansiYellow #e7c483
terminal.foreground #D4DCE0
titleBar.activeBackground #272b3f
titleBar.activeForeground #d7dcdf
titleBar.inactiveBackground #2b3047
titleBar.inactiveForeground #83838f #abb2bf
constant.language #62e483 italic
variable.language #FF5370 —
keyword, keyword.operator.logical, keyword.operator.constructor #FF5370 italic
keyword.operator #FF5370 italic
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class #C792EA —
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block #C792EA —
variable.other, variable.other.property, variable.other.block #BBBBBB —
entity.other.inherited-class #62e483 —
storage.modifier.import, storage.modifier.package #FF5370 —
entity.name.function, support.function #8094f0 —
variable.parameter, entity.name.variable.parameter, parameter.variable #ffffff italic
entity.name.function-call #BBBBBB —
function.support.builtin, function.support.core #8094f0 —
entity.name.tag, entity.name.tag.class.js #FF5370 italic
entity.name.tag.class, entity.name.tag.id #FF5370 —
entity.other.attribute-name #C792EA italic
support.type, support.variable #62e483 —
support.dictionary.json #FF5370 —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass #BBBBBB —
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass #C792EA
entity.other.attribute-name.class #FFCB6B
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass #C792EA —
variable.css, variable.scss, variable.less, variable.sass #BBBBBB —
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string #e5c07b —
unit.css, unit.scss, unit.less, unit.sass #C792EA —
function.css, function.scss, function.less, function.sass #62e483 —
invalid.deprecated #ffffff —
support.type.property-name.json #C792EA —
string.detected-link #8094f0 —
meta.diff, meta.diff.header #ffffff —
constant.numeric.line-number.find-in-files - match #62e483 —
entity.name.filename.find-in-files #e5c07b —
markup.italic, markup.italic.markdown — italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown #BBBBBB —
punctuation.definition.italic.markdown — italic
markup.underline.link.markdown #8094f0 —
markup.bold.markdown — bold
markup.heading.markdown #FF5370 bold
markup.quote.markdown #62e483 —
meta.separator.markdown #C792EA bold
markup.raw.inline.markdown, markup.raw.block.markdown #8094f0 —
punctuation.definition.list_item.markdown #ffffff bold
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 } !` ;
}
MH Theme | Coding Theme