Skip to main content
Home Theme VS Code Modern tokyo dark Modern tokyo dark theme. Combine default modern dark and tokyo night
Modern tokyo dark | 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.activeBorder #0078d4 activityBar.background #181818 activityBar.border #ffffff15 activityBar.foreground #d7d7d7 activityBar.inactiveForeground #ffffff80 activityBarBadge.background #0078d4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier — keyword.control.flow.block-scalar.literal — comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation #494949 — keyword.operator.assignment.jsdoc, comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Modern tokyo dark — modern-tokyo
activityBarBadge.foreground
#ffffff
badge.background #0078d4
badge.foreground #ffffff
button.background #0078d4
button.border #ffffff12
button.foreground #ffffff
button.hoverBackground #0078d4e6
button.secondaryBackground #ffffff0f
button.secondaryForeground #cccccc
button.secondaryHoverBackground #ffffff15
checkbox.background #313131
checkbox.border #ffffff1f
debugToolBar.background #181818
descriptionForeground #8b949e
diffEditor.insertedLineBackground #23863633
diffEditor.insertedTextBackground #2386364d
diffEditor.removedLineBackground #da363333
diffEditor.removedTextBackground #da36334d
dropdown.background #313131
dropdown.border #ffffff1f
dropdown.foreground #cccccc
dropdown.listBackground #313131
editor.background #1f1f1f
editor.findMatchBackground #9e6a03
editor.foreground #cccccc
editor.inactiveSelectionBackground #3a3d41
editor.selectionBackground #515c7e4d
editor.selectionHighlightBackground #add6ff26
editorBracketHighlight.foreground1 #ff9e64
editorBracketHighlight.foreground2 #9ece6a
editorBracketHighlight.foreground3 #7DCFFF
editorBracketHighlight.foreground4 #7aa2f7
editorGroup.border #ffffff17
editorGroupHeader.tabsBackground #181818
editorGroupHeader.tabsBorder #ffffff15
editorGutter.addedBackground #2ea043
editorGutter.deletedBackground #f85149
editorGutter.modifiedBackground #0078d4
editorIndentGuide.activeBackground #707070
editorIndentGuide.background #404040
editorInlayHint.background #8b949e33
editorInlayHint.foreground #8b949e
editorInlayHint.typeBackground #8b949e33
editorInlayHint.typeForeground #8b949e
editorLineNumber.activeForeground #e0af68
editorLineNumber.foreground #6e7681
editorOverviewRuler.border #010409
editorWidget.background #1f1f1f
errorForeground #f85149
focusBorder #0078d4
foreground #cccccc
icon.foreground #cccccc
input.background #2a2a2a
input.border #ffffff1f
input.foreground #cccccc
input.placeholderForeground #ffffff79
inputOption.activeBackground #2489db82
inputOption.activeBorder #2488db
keybindingLabel.foreground #cccccc
list.activeSelectionBackground #323232
list.activeSelectionForeground #ffffff
list.activeSelectionIconForeground #ffffff
list.dropBackground #383b3d
menu.background #1f1f1f
menu.border #454545
menu.foreground #cccccc
menu.separatorBackground #454545
notificationCenterHeader.background #1f1f1f
notificationCenterHeader.foreground #cccccc
notifications.background #1f1f1f
notifications.border #ffffff15
notifications.foreground #cccccc
panel.background #181818
panel.border #ffffff15
panelInput.border #ffffff15
panelTitle.activeBorder #0078d4
panelTitle.activeForeground #cccccc
panelTitle.inactiveForeground #8b949e
peekViewEditor.background #1f1f1f
peekViewEditor.matchHighlightBackground #bb800966
peekViewResult.background #1f1f1f
peekViewResult.matchHighlightBackground #bb800966
pickerGroup.border #ffffff15
pickerGroup.foreground #8b949e
ports.iconRunningProcessForeground #369432
progressBar.background #0078d4
quickInput.background #1f1f1f
quickInput.foreground #cccccc
scrollbar.shadow #484f5833
scrollbarSlider.activeBackground #6e768187
scrollbarSlider.background #6e768133
scrollbarSlider.hoverBackground #6e768145
settings.dropdownBackground #313131
settings.dropdownBorder #ffffff1f
settings.headerForeground #ffffff
settings.modifiedItemIndicator #bb800966
sideBar.background #181818
sideBar.border #ffffff15
sideBar.foreground #cccccc
sideBarSectionHeader.background #181818
sideBarSectionHeader.border #ffffff15
sideBarSectionHeader.foreground #cccccc
sideBarTitle.foreground #cccccc
statusBar.background #181818
statusBar.border #ffffff15
statusBar.debuggingBackground #0078d4
statusBar.debuggingForeground #ffffff
statusBar.foreground #cccccc
statusBar.noFolderBackground #1f1f1f
statusBarItem.focusBorder #0078d4
statusBarItem.prominentBackground #6e768166
statusBarItem.remoteBackground #0078d4
statusBarItem.remoteForeground #ffffff
tab.activeBackground #1f1f1f
tab.activeBorder #1f1f1f
tab.activeBorderTop #0078d4
tab.activeForeground #ffffff
tab.border #ffffff15
tab.hoverBackground #1f1f1f
tab.inactiveBackground #181818
tab.inactiveForeground #ffffff80
tab.lastPinnedBorder #cccccc33
tab.unfocusedActiveBorder #1f1f1f
tab.unfocusedActiveBorderTop #ffffff15
tab.unfocusedHoverBackground #6e76811a
terminal.ansiBlue #7aa2f7
terminal.ansiBrightBlack #363b54
terminal.ansiBrightBlue #7aa2f7
terminal.ansiBrightCyan #7dcfff
terminal.ansiBrightGreen #9ece6a
terminal.ansiBrightMagenta #bb9af7
terminal.ansiBrightRed #f7768e
terminal.ansiBrightWhite #acb0d0
terminal.ansiBrightYellow #e0af68
terminal.ansiCyan #7dcfff
terminal.ansiGreen #9ece6a
terminal.ansiMagenta #bb9af7
terminal.ansiRed #f7768e
terminal.ansiWhite #787c99
terminal.ansiYellow #e0af68
terminal.foreground #cccccc
terminal.inactiveSelectionBackground #3a3d41
terminal.tab.activeBorder #0078d4
textBlockQuote.background #010409
textBlockQuote.border #ffffff14
textCodeBlock.background #6e768166
textLink.activeForeground #40a6ff
textLink.foreground #40a6ff
textSeparator.foreground #21262d
titleBar.activeBackground #181818
titleBar.activeForeground #cccccc
titleBar.border #ffffff15
titleBar.inactiveBackground #1f1f1f
titleBar.inactiveForeground #8b949e
welcomePage.progress.foreground #0078d4
welcomePage.tileBackground #ffffff0f
widget.border #ffffff15 meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance #646e9c —
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant #ff9e64 —
string, constant.other.symbol, constant.other.key, meta.attribute-selector #9ece6a
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant #9aa5ce —
invalid, invalid.illegal #ff5370 —
invalid.deprecated #7DCFFF —
meta.var.expr storage.type, storage.modifier #e0af68 —
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig #7dcfff —
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade #0db9d7 —
keyword.operator.spread, keyword.operator.rest #e0af68 bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, expression.embbeded.vue punctuation.definition.tag, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, meta.attribute.directive, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url #89ddff —
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other #bb9af7 —
keyword, keyword.control, keyword.other.important #7DCFFF —
keyword.other.DML #7dcfff —
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp #7DCFFF —
entity.name.tag support.class.component, meta.tag.custom entity.name.tag, meta.tag #ff9e64 —
punctuation.definition.tag #e0af68 —
constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other #e0af68 —
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars, variable.other.object #c0caf5 —
meta.array.literal variable #7dcfff —
meta.object-literal.key, entity.name.type.hcl, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property, meta.block entity.name.label #73daca —
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property #7dcfff —
variable.other.object.property #c0caf5 —
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key #41a6b5 —
source.cpp meta.block variable.other #e0af68 —
support.other.variable #e0af68 —
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs #7aa2f7 —
entity.name.function, variable.other.enummember, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function #7aa2f7 —
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable #e0af68 —
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit #7DCFFF —
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.declaration.hcl variable.other.readwrite.hcl, meta.mapping.key.hcl variable.other.readwrite.hcl, variable.other.declaration #7DCFFF —
entity.other.inherited-class #7DCFFF
support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier, variable.other.constant.object #0db9d7 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key #7aa2f7 —
support.constant.font-name, meta.definition.variable #9ece6a —
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss #9ece6a —
entity.other.attribute-name.id #fc7b7b —
entity.name.tag.css #0db9d7 —
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference #e0af68 —
meta.property-list #9abdf5 —
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else #ff9e64 —
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css #73daca —
meta.property-list meta.property-list #9abdf5 —
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include #7DCFFF —
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword #9d7cd8 —
meta.property-list meta.at-rule.include #c0caf5 —
support.constant.property-value #ff9e64 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #c0caf5 —
variable.language #e0af68 —
variable.other punctuation.definition.variable #c0caf5 —
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this #e0af68 —
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #7DCFFF —
text.html constant.character.entity #0DB9D7 —
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html #7DCFFF —
source.sass keyword.control #7aa2f7 —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value #7DCFFF —
punctuation.definition.group #e0af68 —
constant.other.character-class.regexp #7DCFFF —
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp #e0af68 —
keyword.operator.quantifier.regexp #89ddff —
constant.character.escape.backslash #c0caf5 —
constant.character.escape #89ddff —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #7aa2f7 —
keyword.other.unit #e0af68 —
source.json meta.structure.dictionary.json support.type.property-name.json #7aa2f7 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #0db9d7 —
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 #7dcfff —
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 #7DCFFF —
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 #e0af68 —
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 #0db9d7 —
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 #73daca —
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 #e0af68 —
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 #9ece6a —
punctuation.definition.list_item.markdown #9abdf5 —
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section #9abdf5 —
meta.jsx.children, meta.embedded.block #c0caf5 —
text.html, text.log #9aa5ce —
text.html.markdown markup.inline.raw.markdown #7DCFFF —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #4E5579 —
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown #89ddff bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown #61bdf2 bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown #7aa2f7 bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown #6d91de bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown #9aa5ce bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown #747ca1 bold
markup.italic, markup.italic punctuation #c0caf5 italic
markup.bold, markup.bold punctuation #c0caf5 bold
markup.bold markup.italic, markup.bold markup.italic punctuation #c0caf5 bold italic
markup.underline, markup.underline punctuation — underline
markup.quote punctuation.definition.blockquote.markdown #4e5579 —
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown #73daca —
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown #89ddff —
meta.separator #444b6a bold
token.error-token #db4b4b —
token.debug-token #b267e6 —
entity.tag.apacheconf #e0af68 —
meta.preprocessor #73daca —
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 } ! ` ;
}