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 #122738 activityBar.border #0d3a58 activityBar.dropBackground #0d3a58 activityBar.foreground #fff activityBarBadge.background #fbff00 activityBarBadge.foreground #000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #a7a7a7 italic constant #fc799c — entity #fbff00 — invalid #f44542 — storage.type.function
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background
#fbff00
badge.foreground #000
button.background #0099ff
button.foreground #fff
button.hoverBackground #0084ff
contrastBorder #ffffff00
debugExceptionWidget.background #2b3654
debugExceptionWidget.border #aaa
debugToolBar.background #2b3654
descriptionForeground #aaa
diffEditor.insertedTextBackground #3ad90033
diffEditor.insertedTextBorder #3ad90055
diffEditor.removedTextBackground #ee3a4333
diffEditor.removedTextBorder #ee3a4355
dropdown.background #2b3654
dropdown.border #15232d
dropdown.foreground #fff
editor.background #2f3852
editor.findMatchBackground #FF720066
editor.findMatchHighlightBackground #CAD40F66
editor.findRangeHighlightBackground #243E51
editor.foreground #eee
editor.hoverHighlightBackground #fbff0033
editor.inactiveSelectionBackground #5883c0
editor.lineHighlightBackground #1F4662
editor.lineHighlightBorder #234E6D
editor.rangeHighlightBackground #1F4662
editor.selectionBackground #356ca7
editor.selectionHighlightBackground #0050A480
editor.wordHighlightBackground #ffffff21
editor.wordHighlightStrongBackground #ffffff21
editorBracketMatch.background #0d3a58
editorBracketMatch.border #fbff0080
editorCodeLens.foreground #aaa
editorCursor.foreground #fbff00
editorError.border #0d3a58
editorError.foreground #A22929
editorGroup.background #A22929
editorGroup.border #122738
editorGroup.dropBackground #12273899
editorGroupHeader.noTabsBackground #2b3654
editorGroupHeader.tabsBackground #122738
editorGroupHeader.tabsBorder #15232d
editorGutter.addedBackground #3C9F4A
editorGutter.background #12273866
editorGutter.deletedBackground #A22929
editorGutter.modifiedBackground #26506D
editorHoverWidget.background #15232d
editorHoverWidget.border #0d3a58
editorIndentGuide.background #3B5364
editorLineNumber.foreground #aaa
editorLink.activeForeground #aaa
editorMarkerNavigation.background #3B536433
editorMarkerNavigationError.background #A22929
editorMarkerNavigationWarning.background #fbff00
editorOverviewRuler.border #0d3a58
editorOverviewRuler.commonContentForeground #fbff0055
editorOverviewRuler.currentContentForeground #ee3a4355
editorOverviewRuler.incomingContentForeground #3ad90055
editorRuler.foreground #1F4662
editorSuggestWidget.background #15232d
editorSuggestWidget.border #15232d
editorSuggestWidget.foreground #aaa
editorSuggestWidget.highlightForeground #fffb00
editorSuggestWidget.selectedBackground #2b3654
editorWarning.border #ffffff00
editorWarning.foreground #fbff00
editorWhitespace.foreground #ffffff1a
editorWidget.background #15232d
editorWidget.border #0d3a58
errorForeground #A22929
extensionButton.prominentBackground #2889dd
extensionButton.prominentForeground #fff
extensionButton.prominentHoverBackground #fffb00
focusBorder #0d3a58
foreground #aaa
gitDecoration.conflictingResourceForeground #FF7200
gitDecoration.deletedResourceForeground #fc799c
gitDecoration.ignoredResourceForeground #808080
gitDecoration.modifiedResourceForeground #fbff00
gitDecoration.untrackedResourceForeground #3ad900
input.background #2b3654
input.border #0d3a58
input.foreground #fbff00
input.placeholderForeground #aaa
inputOption.activeBorder #8dffff
inputValidation.errorBackground #2b3654
inputValidation.errorBorder #fbff00
inputValidation.infoBackground #2b3654
inputValidation.infoBorder #0D3A58
inputValidation.warningBackground #2b3654
inputValidation.warningBorder #fbff00
list.activeSelectionBackground #2b3654
list.activeSelectionForeground #aaa
list.dropBackground #0d3a58
list.focusBackground #0d3a58
list.focusForeground #aaa
list.highlightForeground #fbff00
list.hoverBackground #2b3654
list.hoverForeground #aaa
list.inactiveSelectionBackground #0d3a58
list.inactiveSelectionForeground #aaa
menu.background #122738
menu.selectionForeground #fff
menubar.selectionBackground #0d3a58
merge.border #ffffff00
merge.commonContentBackground #c97d0c
merge.commonHeaderBackground #c97d0c
merge.currentContentBackground #2F7366
merge.currentHeaderBackground #2F7366
merge.incomingContentBackground #185294
merge.incomingHeaderBackground #185294
notificationCenter.border #fbff00
notificationCenterHeader.background #122738
notificationCenterHeader.foreground #aaa
notificationLink.foreground #fbff00
notifications.background #122738
notifications.border #fbff00
notifications.foreground #aaa
notificationToast.border #fbff00
panel.background #122738
panel.border #fbff00
panelTitle.activeBorder #fbff00
panelTitle.activeForeground #fbff00
panelTitle.inactiveForeground #aaa
peekView.border #fbff00
peekViewEditor.background #2b3654
peekViewEditor.matchHighlightBackground #2b365400
peekViewEditorGutter.background #122738
peekViewResult.background #15232d
peekViewResult.fileForeground #aaa
peekViewResult.lineForeground #fff
peekViewResult.matchHighlightBackground #0d3a58
peekViewResult.selectionBackground #0d3a58
peekViewResult.selectionForeground #fff
peekViewTitle.background #15232d
peekViewTitleDescription.foreground #aaa
peekViewTitleLabel.foreground #fbff00
pickerGroup.border #0d3a58
pickerGroup.foreground #aaa
progressBar.background #fbff00
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #355166cc
scrollbarSlider.background #1F466280
scrollbarSlider.hoverBackground #406179cc
selection.background #027dff
sideBar.background #15232d
sideBar.border #0d3a58
sideBar.foreground #aaa
sideBarSectionHeader.background #2b3654
sideBarSectionHeader.foreground #aaaaaa
sideBarTitle.foreground #aaaaaa
statusBar.background #15232d
statusBar.border #0d3a58
statusBar.debuggingBackground #15232d
statusBar.debuggingBorder #fbff00
statusBar.debuggingForeground #fbff00
statusBar.foreground #aaa
statusBar.noFolderBackground #15232d
statusBar.noFolderBorder #0d3a58
statusBar.noFolderForeground #aaa
statusBarItem.activeBackground #0088ff
statusBarItem.hoverBackground #0d3a58
statusBarItem.prominentBackground #15232d
statusBarItem.prominentHoverBackground #0d3a58
tab.activeBackground #2b3654
tab.activeBorder #fbff00
tab.activeForeground #fff
tab.border #15232D
tab.inactiveBackground #122738
tab.inactiveForeground #aaa
tab.unfocusedActiveForeground #aaa
tab.unfocusedInactiveForeground #aaa
terminal.ansiBlack #000000
terminal.ansiBlue #0088ff
terminal.ansiBrightBlack #0050A4
terminal.ansiBrightBlue #0088ff
terminal.ansiBrightCyan #80fcff
terminal.ansiBrightGreen #3ad900
terminal.ansiBrightMagenta #fb94ff
terminal.ansiBrightRed #fc799c
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #fbff00
terminal.ansiCyan #80fcff
terminal.ansiGreen #3ad900
terminal.ansiMagenta #fb94ff
terminal.ansiRed #fc799c
terminal.ansiWhite #ffffff
terminal.ansiYellow #fbff00
terminal.background #122738
terminal.foreground #ffffff
terminalCursor.background #fbff00
terminalCursor.foreground #fbff00
textBlockQuote.background #2b3654
textBlockQuote.border #0088ff
textCodeBlock.background #2b3654
textLink.activeForeground #0088ff
textLink.foreground #0088ff
textPreformat.foreground #fbff00
textSeparator.foreground #0d3a58
titleBar.activeBackground #15232D
titleBar.activeForeground #ffffff
titleBar.inactiveBackground #2b3654
titleBar.inactiveForeground #ffffff33
walkThrough.embeddedEditorBackground #0d3a58
welcomePage.buttonBackground #2b3654
welcomePage.buttonHoverBackground #0d3a58
widget.shadow #00000026 #ffb375
keyword, storage.type.class, keyword.control.default.ts #ffb375 —
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx #fff —
punctuation.definition.parameters #ffee80 —
punctuation.definition.template-expression #ffee80 —
storage.type.function.arrow #fbff00 —
string, punctuation.definition.string #c1e1fd —
string.template, punctuation.definition.string.template #3ad900 —
support.variable.property.dom #e1efff —
source.css entity, source.stylus entity #3ad900 —
entity.other.attribute-name.id.css #FFB454 —
source.css support, source.stylus support #e2a3ff —
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant #ffee80 —
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string #ffee80 —
source.css variable, source.stylus variable #9effff —
text.html.basic entity.name #9effff —
meta.toc-list.id.html #e2a3ff —
text.html.basic entity.other #fbff00 italic
meta.tag.metadata.script.html entity.name.tag.html #fbff00 —
punctuation.definition.string.begin, punctuation.definition.string.end #79d2fc —
source.ini entity #e1efff —
source.ini keyword #fbff00 —
source.ini punctuation.definition #ffee80 —
source.ini punctuation.separator #ffb375 —
source.js storage.type.function, source.ts storage.type.function #fb94ff —
variable.language, entity.name.type.class.js #fb94ff —
entity.other.inherited-class.js #ccc —
variable.parameter.function.language.special.self.python #fb94ff —
source.json support #fbff00 —
source.json string, source.json punctuation.definition.string #e1efff —
punctuation.definition.heading.markdown #e1efff —
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown #fbff00 bold
meta.paragraph.markdown #e1efff —
beginning.punctuation.definition.quote.markdown #fbff00 —
markup.quote.markdown meta.paragraph.markdown #9effff italic
meta.separator.markdown #fbff00 —
markup.bold.markdown #9effff bold
markup.italic.markdown #9effff italic
beginning.punctuation.definition.list.markdown #fbff00 —
string.other.link.title.markdown #e2a3ff —
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown #e2a3ff —
markup.underline.link.markdown, markup.underline.link.image.markdown #9effff —
fenced_code.block.language, markup.inline.raw.markdown #9effff —
fenced_code.block.language, markup.inline.raw.markdown #9effff —
text.jade entity.name #9effff —
text.jade entity.other.attribute-name.tag — italic
text.jade string.interpolated #ffee80 —
source.ts entity.name.type #80ffbb —
source.ts keyword #fbff00 —
source.ts punctuation.definition.parameters #e1efff —
meta.arrow.ts punctuation.definition.parameters #ffee80 —
source.php entity #9effff —
variable.other.php #fbff00 —
entity.name.variable.property.cs #9effff —
storage.modifier.cs #80ffbb —
modifier, this, comment, storage.modifier, entity.other.attribute-name.js, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html — italic
keyword.control.export #ffb375 italic
meta.return.type.ts #ff0088 italic
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 } !` ;
}
Dootan Theme | Coding Theme