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 #2F333D activityBar.foreground #D7DAE0 activityBarBadge.background #528bff activityBarBadge.foreground #F8FAFD button.background #528bff diffEditor.insertedTextBackground #00809B33 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.comment #676f7d — string, string.template #6A8759 — constant.numeric #7A9EC2 — string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded #CC8242 — 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.
Darcula Plus — Darcula Plus
dropdown.background #1d1f23
dropdown.border #181A1F
editor.background #282c34
editor.findMatchBackground #42557B
editor.findMatchHighlightBackground #314365
editor.lineHighlightBackground #383E4A
editor.selectionBackground #3E4451
editorBracketHighlight.foreground1 #FFC66D
editorBracketHighlight.foreground2 #FFC66D
editorCursor.foreground #f8f8f0
editorError.foreground #c24038
editorGroup.border #181A1F
editorGroup.emptyBackground #181A1F
editorGroupHeader.tabsBackground #21252B
editorHoverWidget.background #21252B
editorHoverWidget.border #181A1F
editorIndentGuide.background #3B4048
editorLineNumber.foreground #495162
editorRuler.foreground #484848
editorSuggestWidget.background #21252B
editorSuggestWidget.border #181A1F
editorSuggestWidget.selectedBackground #2c313a
editorUnnecessaryCode.opacity #000000c0
editorWhitespace.foreground #484a50
editorWidget.background #21252B
input.background #1d1f23
list.activeSelectionBackground #2c313a
list.activeSelectionForeground #d7dae0
list.focusBackground #383E4A
list.highlightForeground #C5C5C5
list.hoverBackground #292d35
list.inactiveSelectionBackground #2c313a
list.inactiveSelectionForeground #d7dae0
notifications.background #21252b
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566680
scrollbarSlider.hoverBackground #5A637580
sideBar.background #21252b
sideBarSectionHeader.background #282c34
statusBar.background #21252B
statusBar.debuggingBackground #21252B
statusBar.foreground #9da5b4
statusBar.noFolderBackground #21252B
statusBarItem.hoverBackground #2c313a
tab.activeBackground #383E4A
tab.border #181A1F
tab.inactiveBackground #21252B
terminal.ansiBlack #2d3139
terminal.ansiBlue #528bff
terminal.ansiBrightBlack #7f848e
terminal.ansiBrightBlue #528bff
terminal.ansiBrightCyan #3fa2ae
terminal.ansiBrightGreen #FFC66D
terminal.ansiBrightMagenta #7e0097
terminal.ansiBrightRed #f44747
terminal.ansiBrightWhite #d7dae0
terminal.ansiBrightYellow #6A8759
terminal.ansiCyan #3fa2ae
terminal.ansiGreen #FFC66D
terminal.ansiMagenta #c678dd
terminal.ansiRed #CC8242
terminal.ansiWhite #d7dae0
terminal.ansiYellow #6A8759
terminal.foreground #CCCCCC
titleBar.activeBackground #282c34
titleBar.activeForeground #9da5b4
titleBar.inactiveBackground #282C34
titleBar.inactiveForeground #6B717D constant.language, support.type.builtin #CC8242 —
constant.character, constant.other #3fa2ae —
variable.language #CC8242 —
keyword, keyword.operator.logical, keyword.operator.constructor #CC8242 —
entity.name.type.class #FFC66D —
variable.other, variable.other.property, variable.other.block, entity.name.type.module #CCCCCC —
entity.other.inherited-class #FFC66D —
storage.modifier.import, storage.modifier.package #7A9EC2 —
entity.name.function, support.function #FFC66D —
entity.name.function-call #CCCCCC —
function.support.builtin, function.support.core #FFC66D —
entity.name.tag, entity.name.tag.class.js #CC8242 —
entity.name.tag.class, entity.name.tag.id #3fa2ae —
entity.other.attribute-name #FFC66D —
support.constant.property-value #A5C261 —
support.type.object.module #CC8242 —
support.dictionary.json #3fa2ae —
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass #CCCCCC —
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 #3fa2ae —
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass #FFC66D —
variable.css, variable.scss, variable.less, variable.sass #3fa2ae —
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string #6A8759 —
unit.css, unit.scss, unit.less, unit.sass #c678dd —
function.css, function.scss, function.less, function.sass #3fa2ae —
invalid.deprecated #F8F8F0 —
support.type.property-name.json #6A8759 —
string.detected-link #7A9EC2 —
meta.diff, meta.diff.header #75715E —
constant.numeric.line-number.find-in-files - match #56b6c2A0 —
entity.name.filename.find-in-files #6A8759 —
markup.italic, markup.italic.markdown — italic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown #676f7d —
punctuation.definition.italic.markdown — italic
markup.underline.link.markdown #7A9EC2 —
markup.bold.markdown — bold
markup.heading.markdown #CC8242 bold
markup.quote.markdown #FFC66D —
meta.separator.markdown #c678dd bold
markup.raw.inline.markdown, markup.raw.block.markdown #3fa2ae —
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 } !` ;
}
Darcula Plus | Coding Theme