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 #161616 activityBar.border #16161660 activityBar.foreground #F0DEB8 activityBarBadge.background #C0D8F0 activityBarBadge.foreground #161616 badge.background #16161630 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #BC00FF — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #A91AF9 — constant.other.php #BC00FF —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Tomioka Dark Theme — Tomioka Dark Theme
badge.foreground
#A81848
breadcrumb.activeSelectionForeground #A81848
breadcrumb.background #161616
breadcrumb.focusForeground #F0DEB8
breadcrumb.foreground #ED2266
breadcrumbPicker.background #161616
button.background #A8184850
contrastBorder #A8184840
debugToolBar.background #161616
diffEditor.insertedTextBackground #A91AF915
diffEditor.removedTextBackground #00784820
dropdown.background #161616
dropdown.border #FFEEDD10
editor.background #161616
editor.findMatchBackground #161616
editor.findMatchBorder #A81848
editor.findMatchHighlightBackground #A8184893
editor.findMatchHighlightBorder #FFEEDD30
editor.foreground #F0DEB8
editor.lineHighlightBackground #16161650
editor.selectionBackground #C0D8F030
editor.selectionHighlightBackground #A818486b
editor.selectionHighlightBorder #C0D8F0f0
editorBracketMatch.background #161616
editorBracketMatch.border #BC00FF7f
editorCursor.foreground #BC00FF
editorError.foreground #00784870
editorGroup.border #16161630
editorGroupHeader.tabsBackground #161616
editorGutter.addedBackground #A91AF960
editorGutter.deletedBackground #00784860
editorGutter.modifiedBackground #C0D8F060
editorHoverWidget.background #161616
editorHoverWidget.border #FFEEDD10
editorIndentGuide.activeBackground #474747
editorIndentGuide.background #47474770
editorInfo.foreground #C0D8F070
editorLineNumber.activeForeground #C0D8F0
editorLineNumber.foreground #A81848c0
editorLink.activeForeground #F0DEB8
editorMarkerNavigation.background #F0DEB805
editorOverviewRuler.border #161616
editorOverviewRuler.errorForeground #00784840
editorOverviewRuler.findMatchForeground #A81848
editorOverviewRuler.infoForeground #C0D8F040
editorOverviewRuler.warningForeground #BC00FF70
editorRuler.foreground #474747
editorSuggestWidget.background #161616
editorSuggestWidget.border #FFEEDD10
editorSuggestWidget.foreground #F0DEB8
editorSuggestWidget.highlightForeground #BC00FF
editorSuggestWidget.selectedBackground #A8184820
editorWarning.foreground #A91AF9
editorWhitespace.foreground #F0DEB840
editorWidget.background #161616
editorWidget.border #BC00FF
editorWidget.resizeBorder #A81848
extensionButton.prominentBackground #A91AF990
extensionButton.prominentHoverBackground #007848
focusBorder #FFEEDD00
gitDecoration.conflictingResourceForeground #BC00FF
gitDecoration.deletedResourceForeground #007848
gitDecoration.ignoredResourceForeground #A81848
gitDecoration.modifiedResourceForeground #ED2266
gitDecoration.untrackedResourceForeground #C0D8F0
input.background #2B2B2B
input.border #FFEEDD10
input.foreground #F0DEB8
input.placeholderForeground #F0DEB860
inputOption.activeBackground #F0DEB830
inputOption.activeBorder #F0DEB830
inputValidation.errorBorder #00784850
inputValidation.infoBorder #C0D8F050
inputValidation.warningBorder #BC00FF50
list.activeSelectionBackground #161616
list.activeSelectionForeground #A81848
list.focusBackground #2B2B2B
list.focusForeground #C0D8F0
list.highlightForeground #A81848
list.hoverBackground #474747
list.hoverForeground #FFEEDD
list.inactiveSelectionBackground #16161630
list.inactiveSelectionForeground #A81848
list.warningForeground #BC00FF
listFilterWidget.background #16161630
listFilterWidget.noMatchesOutline #16161630
listFilterWidget.outline #16161630
menu.background #161616f8
menu.border #A8184850
menu.foreground #F0DEB8
menu.selectionBackground #2B2B2B
menu.selectionBorder #16161630
menu.selectionForeground #F0DEB8
menu.separatorBackground #F0DEB8
menubar.selectionBackground #2B2B2B
menubar.selectionBorder #A8184850
menubar.selectionForeground #F0DEB8
minimap.background #161616
minimapGutter.addedBackground #007848
minimapGutter.deletedBackground #BC00FF
minimapGutter.modifiedBackground #A91AF9
minimapSlider.activeBackground #A91AF9b0
minimapSlider.background #A91AF980
minimapSlider.hoverBackground #A91AF9a0
notificationLink.foreground #A81848
notifications.background #161616
notifications.foreground #F0DEB8
panel.background #161616
panel.border #16161660
panelTitle.activeBorder #A81848
panelTitle.activeForeground #FFEEDD
panelTitle.inactiveForeground #F0DEB8
peekView.border #16161630
peekViewEditor.background #F0DEB805
peekViewEditor.matchHighlightBackground #A8184850
peekViewEditorGutter.background #F0DEB805
peekViewResult.background #F0DEB805
peekViewResult.matchHighlightBackground #A8184850
peekViewResult.selectionBackground #A8184870
peekViewTitle.background #F0DEB805
peekViewTitleDescription.foreground #F0DEB860
pickerGroup.foreground #A81848
progressBar.background #A81848
scrollbar.shadow #16161600
scrollbarSlider.activeBackground #A81848cc
scrollbarSlider.background #A81848bb
scrollbarSlider.hoverBackground #A81848ee
selection.background #A81848
settings.checkboxBackground #161616
settings.checkboxForeground #F0DEB8
settings.dropdownBackground #161616
settings.dropdownForeground #F0DEB8
settings.headerForeground #A81848
settings.modifiedItemIndicator #A81848
settings.numberInputBackground #161616
settings.numberInputForeground #F0DEB8
settings.textInputBackground #161616
settings.textInputForeground #F0DEB8
sideBar.background #161616
sideBar.border #A8184850
sideBar.foreground #C0D8F0
sideBarSectionHeader.background #161616
sideBarSectionHeader.border #16161660
sideBarSectionHeader.foreground #C0D8F0
sideBarTitle.foreground #F0DEB8
statusBar.background #A81848
statusBar.border #16161660
statusBar.debuggingBackground #BC00FF
statusBar.debuggingForeground #FFEEDD
statusBar.foreground #F0F0F0
statusBar.noFolderBackground #161616
statusBarItem.hoverBackground #A8184820
statusBarItem.remoteBackground #A81848
statusBarItem.remoteForeground #161616
tab.activeBackground #A8184850
tab.activeBorder #A81848
tab.activeForeground #FFEEDD
tab.activeModifiedBorder #A81848
tab.border #161616
tab.inactiveBackground #A8184820
tab.inactiveForeground #F0DEB8af
tab.unfocusedActiveBackground #A8184840
tab.unfocusedActiveBorder #A81848
tab.unfocusedActiveForeground #F0DEB8
tab.unfocusedInactiveBackground #A8184810
tab.unfocusedInactiveForeground #F0DEB87f
terminal.ansiBlack #161616
terminal.ansiBlue #C0D8F0
terminal.ansiBrightBlack #A81848
terminal.ansiBrightBlue #C0D8F0
terminal.ansiBrightCyan #CCE6FF
terminal.ansiBrightGreen #A91AF9
terminal.ansiBrightMagenta #BC00FF
terminal.ansiBrightRed #007848
terminal.ansiBrightWhite #FFEEDD
terminal.ansiBrightYellow #BC00FF
terminal.ansiCyan #CCE6FF
terminal.ansiGreen #A91AF9
terminal.ansiMagenta #BC00FF
terminal.ansiRed #007848
terminal.ansiWhite #FFEEDD
terminal.ansiYellow #BC00FF
terminalCursor.background #161616
terminalCursor.foreground #BC00FF
textLink.activeForeground #F0DEB8
textLink.foreground #A81848
titleBar.activeBackground #161616
titleBar.activeForeground #F0DEB8
titleBar.border #16161660
titleBar.inactiveBackground #161616
titleBar.inactiveForeground #A81848
tree.indentGuidesStroke #474747
widget.shadow #16161630 invalid, invalid.illegal #007848 —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss #A7A8AF —
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #ED2266 —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #F0DEB8 —
punctuation.definition, string.quoted.single.scss #A7A8AF —
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html #6D6F7C —
text.html.derivative #A7A8AF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #F0DEB8 —
entity.name.tag.html — bold
variable.parameter.js, variable.parameter.keyframe-list.css #BC00FF —
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js #ED2266
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control #C0D8F0 —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #CCE6FF —
support.other.variable, string.other.link, markup.table #F0DEB8 —
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html #BC00FF —
variable.parameter.function.language.special, variable.parameter #007848 —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #A91AF9
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, entity.other.attribute-name.html #BC00FF —
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 #ED2266 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #007848 —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #C0D8F0 italic
entity.other.attribute-name, support.function #BC00FF —
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #F0DEB8 —
source.scss keyword.control #BC00FF —
constant.character.escape #CCE6FF —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #F0DEB8 italic
support.type.property-name.json #F0DEB8 —
text.html.markdown, punctuation.definition.list_item.markdown #F0DEB8 —
text.html.markdown markup.inline.raw.markdown #BC00FF —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #A8184850 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #ED2266 bold
markup.underline #C0D8F0 underline
markup.quote punctuation.definition.blockquote.markdown #A8184850 —
string.other.link.description.title.markdown #BC00FF —
constant.other.reference.link.markdown #BC00FF —
punctuation.definition.raw.markdown, punctuation.definition.markdown #CCE6FF —
variable.language.fenced.markdown #A81848 —
meta.separator #A7A8AF bold
token.error-token #FF293B —
token.debug-token #CCE6FF —
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...
main*
Button.tsx
31
~/my-project
$
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 } ! ` ;
}
Tomioka Dark Theme | Coding Theme