Skip to main content
Home Theme VS Code Mo Theme A dark theme, which is based on Fleet Dark theme and One Dark Pro 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.activeBorder #d1d1d1 activityBar.background #292929 activityBar.foreground #d1d1d1 activityBarBadge.background #1a85f6 activityBarBadge.foreground #d1d1d1 badge.background #1a85f6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle entity.name.tag #AF9CFF — punctuation.definition.tag.begin, punctuation.definition.tag.end #777777 — meta.attribute.href #E394DC — entity.name.tag.reference #AF9CFF bold entity.other.attribute-name, punctuation.definition.entity
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Mo Theme — Mo Dark Default
badge.foreground
#d1d1d1
breadcrumb.activeSelectionForeground #d1d1d1
breadcrumb.background #181818
breadcrumb.focusForeground #d1d1d1
breadcrumb.foreground #555555
button.background #0273eb
button.border #ffffff00
button.foreground #d1d1d1
button.hoverBackground #0c6ddd
editor.background #181818
editor.findMatchBackground #163764
editor.findMatchBorder #D49550
editor.findMatchHighlightBackground #163764
editor.foldBackground #232323
editor.foreground #d1d1d1
editor.hoverHighlightBackground #383838
editor.lineHighlightBackground #292929
editor.selectionBackground #163764
editor.wordHighlightBackground #383838
editor.wordHighlightStrongBackground #194176
editorCursor.foreground #1a85f6
editorError.foreground #FF5269
editorGroupHeader.tabsBackground #292929
editorLineNumber.activeForeground #c2c2c2
editorLineNumber.foreground #565656
editorLink.activeForeground #4d9bf8
editorSuggestWidget.background #292929
editorSuggestWidget.foreground #d1d1d1
editorSuggestWidget.selectedBackground #194176
editorWarning.foreground #FACB66
focusBorder #292929
foreground #d1d1d1
gitDecoration.addedResourceForeground #3ea17f
gitDecoration.conflictingResourceForeground #D1A354
gitDecoration.deletedResourceForeground #d93953
gitDecoration.ignoredResourceForeground #555555
gitDecoration.modifiedResourceForeground #4d9bf8
gitDecoration.submoduleResourceForeground #1a85f6
gitDecoration.untrackedResourceForeground #3ea17f
icon.foreground #d1d1d1
input.background #292929
input.border #292929
input.foreground #d1d1d1
input.placeholderForeground #767676
list.activeSelectionBackground #383838
list.activeSelectionForeground #d1d1d1
list.focusForeground #d1d1d1
list.highlightForeground #8f62d9
list.hoverBackground #2d2d2d
list.hoverForeground #d1d1d1
list.inactiveFocusBackground #383838
list.inactiveSelectionBackground #383838
menu.background #292929
menu.foreground #c2c2c2
menu.selectionBackground #194176
menu.selectionForeground #D1d1d1
menu.separatorBackground #313131
minimapSlider.background #46464646
panelTitle.activeForeground #d1d1d1
panelTitle.inactiveForeground #767676
peekView.border #194176
peekViewEditor.matchHighlightBackground #194176
peekViewEditorGutter.background #222222
peekViewResult.background #222222
peekViewResult.matchHighlightBackground #194176
peekViewTitle.background #222222
progressBar.background #1a85f6
quickInputList.focusBackground #2d2d2d
scrollbar.shadow #292929cc
scrollbarSlider.background #46464646
searchEditor.findMatchBackground #D49550
sideBar.background #181818
sideBar.border #292929
sideBar.foreground #aaaaaa
sideBarSectionHeader.foreground #d1d1d1
sideBarTitle.foreground #929292
statusBar.background #292929
statusBar.debuggingBackground #1a85f6
statusBar.debuggingForeground #d1d1d1
statusBar.foreground #787878
statusBar.noFolderBackground #292929
statusBar.noFolderForeground #787878
tab.activeBackground #181818
tab.activeBorder #181818
tab.activeBorderTop #d1d1d1
tab.activeForeground #d1d1d1
tab.border #292929
tab.inactiveBackground #292929
tab.unfocusedActiveBackground #181818
terminal.ansiBlack #282C34
terminal.ansiBlue #61AFEF
terminal.ansiBrightBlack #545862
terminal.ansiBrightBlue #61AFEF
terminal.ansiBrightCyan #82D2CE
terminal.ansiBrightGreen #A8CC7C
terminal.ansiBrightMagenta #E394DC
terminal.ansiBrightRed #E06C75
terminal.ansiBrightWhite #C8CCD4
terminal.ansiBrightYellow #EBC88D
terminal.ansiCyan #82D2CE
terminal.ansiGreen #A8CC7C
terminal.ansiMagenta #E394DC
terminal.ansiRed #E06C75
terminal.ansiWhite #ABB2BF
terminal.ansiYellow #EBC88D
terminal.background #181818
terminal.foreground #ABB2BF
terminalCursor.background #ABB2BF
terminalCursor.foreground #ABB2BF
textBlockQuote.background #163764
textCodeBlock.background #163764
titleBar.activeBackground #292929
titleBar.activeForeground #d1d1d1
titleBar.inactiveBackground #292929
titleBar.inactiveForeground #777777 entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity #87C3FF
variable.parameter — italic
variable.other.object #EBC88D —
variable.other.readwrite #AF9CFF —
variable.other.constant.property, variable.other.object.property, variable.other.constant.object.property, support.variable.property, meta.block variable.other.property #AF9CFF
meta.object-literal.key variable.other.property #E394DC
variable.other.constant #EBC88D —
meta.object-literal.key #AF9CFF —
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special #e06c75 italic
comment, punctuation.definition.comment #828282 italic
entity.name.function, meta.require, support.function.any-method, variable.function, keyword.operator.expression.import #87C3FF —
*url*, *link*, *uri* — underline
punctuation, meta.brace.square, meta.brace.round #c2c2c2 —
punctuation.section.embedded #82D2CE —
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end #E394DC —
string.regexp punctuation.definition.string, punctuation.definition.template-expression #82D2CE —
keyword.operator.quantifier.regexp #E0957B —
entity.name.type, storage.type, keyword.primitive-datatypes, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, support.type.primitive #A8CC7C italic
storage.type.template #82D2CE
storage.type.function #82D2CE
entity.other.inherited-class #A8CC7C italic
entity.name.type.class, entity.name.class #A8CC7C
support.class.component, meta.tag.custom entity.name.tag #A8CC7C —
entity.name.type.interface #A8CC7C italic
keyword, keyword.operator.ternary, keyword.operator.decrement, keyword.operator.increment, keyword.operator.cast.static_cast, keyword.operator.expression, keyword.operator.logical, punctuation.definition.keyword, storage.type.class, storage.type.function.arrow #82D2CE —
keyword.control.new, keyword.operator.new #82D2CE bold
keyword.other.template, keyword.other.substitution #d1d1d1 —
entity.name.namespace #EBC88D —
storage, storage.type.interface, storage.type.type, storage.type.namespace, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def #82D2CE
constant.character.escape, constant.character.string.escape, constant.regexp #82D2CE —
constant, variable.other.constant #EBC88D —
constant.language #E0957B —
constant.other.rgb-value #E0957B —
meta.object.member, meta.block, meta.parameters #d1d1d1 —
comment.block.documentation entity.name.type #A8CC7C italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class #82D2CE —
source.js storage.type, source.ts storage.type, source.jsx storage.type, source.tsx storage.type #82D2CE
meta.tag.metadata.doctype.html entity.name.tag.html #A8CC7C —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.pseudo-class punctuation.definition.entity #56b6c2 italic
meta.at-rule.mixin, meta.at-rule.extend, source.css meta.property-value meta.function, source.css meta.property-value support.function, source.css meta.property-value support.function.any-method #AF9CFF
source.css variable, source.css variable.other, source.css punctuation.definition.variable #6daaf7 —
source.css meta.property-list entity.name.tag #AF9CFF —
source.css meta.property-value support.constant.mathematical-symbols #d1d1d1
source.css keyword.operator #d1d1d1 —
source.css keyword.other.unit #E0957B —
source.css meta.property-value keyword.other.important, source.css keyword.control.at-rule punctuation.definition.keyword, source.css keyword.control.at-rule, meta.tag.metadata.doctype.html entity.name.tag.html, keyword.extend.css, keyword.global.css #A8CC7C —
source.css support.constant.property-value #E394DC —
source.css support.type.property-name #d1d1d1
source.css entity.other.attribute-name, punctuation.definition.entity —
punctuation.definition.constant.css, constant.other.color.rgb-value.hex #E0957B —
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style, source.vue meta.block.template, source.vue meta.block.script, source.vue meta.block.style #AF9CFF italic
meta.tag.structure invalid.illegal.character-not-allowed-here.html #777777 —
meta.tag.other.unrecognized.html.derivative entity.name.tag.html #A8CC7C —
meta.using-namespace.cpp keyword.other.using.directive, meta.using-namespace.c keyword.other.using.directive #6daaf7 —
punctuation.definition.directive.c, punctuation.definition.directive.cpp #82D2CE —
variable.other.property.cpp, variable.other.property.c #AF9CFF —
source.c keyword.operator, source.cpp keyword.operator #82D2CE —
meta.function.c,meta.function.cpp #AF9CFF —
support.type.posix-reserved.c, support.type.posix-reserved.cpp #A8CC7C
storage.modifier.import.java,storage.type.java,storage.type.generic.java #EBC88D —
token.variable.parameter.java #ff0000 —
source.python punctuation.definition.decorator #87C3FF bold
source.ini keyword.other.definition.ini #AF9CFF —
source.ini entity.name.section.group-title.ini #87C3FF —
source.ini punctuation.definition.entity.ini #82D2CE —
source.json meta.structure.dictionary.json support.type.property-name.json #AF9CFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #6daaf7
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 #A8CC7C
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 #CC7C8A
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 #EBC88D
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 #82D2CE
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 #d93953
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 #E0957B
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 #56b6c2
text.html.markdown, punctuation.definition.list_item.markdown #d1d1d1 —
text.html.markdown markup.inline.raw.markdown #AF9CFF —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #65737E —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #AF9CFF —
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #82D2CE —
string.other.link.description.title.markdown #AF9CFF —
constant.other.reference.link.markdown #EBC88D —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #d1d1d1 —
variable.language.fenced.markdown #65737E —
meta.separator #65737E bold
markup.underline.link #82D2CE —
markup.inline.raw.string.markdown #87C3FF —
text.html.markdown punctuation.definition.list #EBC88D —
markup.quote.markdown #777777 —
entity.name.section.markdown #AF9CFF —
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 } !` ;
}
Mo Theme | Coding Theme