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.activeBorder #f9826c activityBar.background #24292e activityBar.border #1b1f23 activityBar.foreground #e1e4e8 activityBar.inactiveForeground #6a737d activityBarBadge.background #0366d6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #839496 — comment #586E75 string #2AA198 — string #586E75 — string.regexp
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Solarized Dark++ — Solarized Dark++
activityBarBadge.foreground
#ffffff
badge.background #044289
badge.foreground #c8e1ff
breadcrumb.activeSelectionForeground #d1d5da
breadcrumb.focusForeground #e1e4e8
breadcrumb.foreground #959da5
breadcrumbPicker.background #2b3036
button.background #176f2c
button.foreground #dcffe4
button.hoverBackground #22863a
button.secondaryBackground #444d56
button.secondaryForeground #ffffff
button.secondaryHoverBackground #586069
checkbox.background #444d56
checkbox.border #1b1f23
debugToolBar.background #2b3036
descriptionForeground #959da5
diffEditor.insertedTextBackground #28a74530
diffEditor.removedTextBackground #d73a4930
dropdown.background #2f363d
dropdown.border #1b1f23
dropdown.foreground #e1e4e8
dropdown.listBackground #24292e
editor.background #24292e
editor.findMatchBackground #ffd33d44
editor.findMatchHighlightBackground #ffd33d22
editor.focusedStackFrameHighlightBackground #2b6a3033
editor.foldBackground #58606915
editor.foreground #e1e4e8
editor.inactiveSelectionBackground #3392ff22
editor.lineHighlightBackground #2b3036
editor.linkedEditingBackground #3392ff22
editor.selectionBackground #3392ff44
editor.selectionHighlightBackground #17e5e633
editor.selectionHighlightBorder #17e5e600
editor.stackFrameHighlightBackground #c6902625
editor.wordHighlightBackground #17e5e600
editor.wordHighlightBorder #17e5e699
editor.wordHighlightStrongBackground #17e5e600
editor.wordHighlightStrongBorder #17e5e666
editorBracketHighlight.foreground1 #79b8ff
editorBracketHighlight.foreground2 #ffab70
editorBracketHighlight.foreground3 #b392f0
editorBracketHighlight.foreground4 #79b8ff
editorBracketHighlight.foreground5 #ffab70
editorBracketHighlight.foreground6 #b392f0
editorBracketMatch.background #17e5e650
editorBracketMatch.border #17e5e600
editorCursor.foreground #c8e1ff
editorError.foreground #f97583
editorGroup.border #1b1f23
editorGroupHeader.tabsBackground #1f2428
editorGroupHeader.tabsBorder #1b1f23
editorGutter.addedBackground #28a745
editorGutter.deletedBackground #ea4a5a
editorGutter.modifiedBackground #2188ff
editorIndentGuide.activeBackground #444d56
editorIndentGuide.background #2f363d
editorLineNumber.activeForeground #e1e4e8
editorLineNumber.foreground #444d56
editorOverviewRuler.border #1b1f23
editorWarning.foreground #ffea7f
editorWhitespace.foreground #444d56
editorWidget.background #1f2428
errorForeground #f97583
focusBorder #005cc5
foreground #d1d5da
gitDecoration.addedResourceForeground #34d058
gitDecoration.conflictingResourceForeground #ffab70
gitDecoration.deletedResourceForeground #ea4a5a
gitDecoration.ignoredResourceForeground #6a737d
gitDecoration.modifiedResourceForeground #79b8ff
gitDecoration.submoduleResourceForeground #6a737d
gitDecoration.untrackedResourceForeground #34d058
input.background #2f363d
input.border #1b1f23
input.foreground #e1e4e8
input.placeholderForeground #959da5
list.activeSelectionBackground #39414a
list.activeSelectionForeground #e1e4e8
list.focusBackground #044289
list.hoverBackground #282e34
list.hoverForeground #e1e4e8
list.inactiveFocusBackground #1d2d3e
list.inactiveSelectionBackground #282e34
list.inactiveSelectionForeground #e1e4e8
notificationCenterHeader.background #24292e
notificationCenterHeader.foreground #959da5
notifications.background #2f363d
notifications.border #1b1f23
notifications.foreground #e1e4e8
notificationsErrorIcon.foreground #ea4a5a
notificationsInfoIcon.foreground #79b8ff
notificationsWarningIcon.foreground #ffab70
panel.background #1f2428
panel.border #1b1f23
panelInput.border #2f363d
panelTitle.activeBorder #f9826c
panelTitle.activeForeground #e1e4e8
panelTitle.inactiveForeground #959da5
peekViewEditor.background #1f242888
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #1f2428
peekViewResult.matchHighlightBackground #ffd33d33
pickerGroup.border #444d56
pickerGroup.foreground #e1e4e8
progressBar.background #0366d6
quickInput.background #24292e
quickInput.foreground #e1e4e8
scrollbar.shadow #00000088
scrollbarSlider.activeBackground #6a737d88
scrollbarSlider.background #6a737d33
scrollbarSlider.hoverBackground #6a737d44
settings.headerForeground #e1e4e8
settings.modifiedItemIndicator #0366d6
sideBar.background #1f2428
sideBar.border #1b1f23
sideBar.foreground #d1d5da
sideBarSectionHeader.background #1f2428
sideBarSectionHeader.border #1b1f23
sideBarSectionHeader.foreground #e1e4e8
sideBarTitle.foreground #e1e4e8
statusBar.background #24292e
statusBar.border #1b1f23
statusBar.debuggingBackground #931c06
statusBar.debuggingForeground #ffffff
statusBar.foreground #d1d5da
statusBar.noFolderBackground #24292e
statusBarItem.prominentBackground #282e34
statusBarItem.remoteBackground #24292e
statusBarItem.remoteForeground #d1d5da
tab.activeBackground #24292e
tab.activeBorder #24292e
tab.activeBorderTop #f9826c
tab.activeForeground #e1e4e8
tab.border #1b1f23
tab.hoverBackground #24292e
tab.inactiveBackground #1f2428
tab.inactiveForeground #959da5
tab.unfocusedActiveBorder #24292e
tab.unfocusedActiveBorderTop #1b1f23
tab.unfocusedHoverBackground #24292e
terminal.ansiBlack #586069
terminal.ansiBlue #2188ff
terminal.ansiBrightBlack #959da5
terminal.ansiBrightBlue #79b8ff
terminal.ansiBrightCyan #56d4dd
terminal.ansiBrightGreen #85e89d
terminal.ansiBrightMagenta #b392f0
terminal.ansiBrightRed #f97583
terminal.ansiBrightWhite #fafbfc
terminal.ansiBrightYellow #ffea7f
terminal.ansiCyan #39c5cf
terminal.ansiGreen #34d058
terminal.ansiMagenta #b392f0
terminal.ansiRed #ea4a5a
terminal.ansiWhite #d1d5da
terminal.ansiYellow #ffea7f
terminal.foreground #d1d5da
terminal.tab.activeBorder #f9826c
terminalCursor.background #586069
terminalCursor.foreground #79b8ff
textBlockQuote.background #24292e
textBlockQuote.border #444d56
textCodeBlock.background #2f363d
textLink.activeForeground #c8e1ff
textLink.foreground #79b8ff
textPreformat.foreground #d1d5da
textSeparator.foreground #586069
titleBar.activeBackground #24292e
titleBar.activeForeground #e1e4e8
titleBar.border #1b1f23
titleBar.inactiveBackground #1f2428
titleBar.inactiveForeground #959da5
tree.indentGuidesStroke #2f363d
#D30102
variable.language, variable.other #268BD2 —
entity.name.class, entity.name.type.class #268BD2 —
entity.name.function #268BD2 —
punctuation.definition.variable #859900 —
punctuation.section.embedded.begin, punctuation.section.embedded.end #D30102 —
constant.language, meta.preprocessor #B58900 —
support.function.construct, keyword.other.new #D30102 —
constant.character, constant.other #CB4B16 —
entity.other.inherited-class — —
entity.name.tag #268BD2 bold
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end #586E75 —
entity.other.attribute-name #93A1A1 —
punctuation.separator.continuation #D30102 —
support.type, support.class #859900 —
support.type.exception #CB4B16 —
keyword.other.special-method #CB4B16 —
string.quoted.double, string.quoted.single #269186 —
punctuation.definition.string.begin, punctuation.definition.string.end #C60000 —
entity.name.tag.css, support.type.property-name.css, meta.property-name.css #A57800
punctuation.section.property-list.css #5A74CF —
meta.property-value.css constant.numeric.css, keyword.other.unit.css, constant.other.color.rgb-value.css #269186
meta.property-value.css #269186
keyword.other.important.css #D01F1E —
support.constant.color #269186 —
entity.name.tag.css #738A13 —
punctuation.separator.key-value.css, punctuation.terminator.rule.css #536871
entity.other.attribute-name.class.css #268BD2
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css #BD3800
entity.other.attribute-name.id.css #268BD2
meta.function.js, entity.name.function.js, support.function.dom.js #A57800 —
text.html.basic source.js.embedded.html #A57800
storage.type.function.js #268BD2 —
constant.numeric.js #269186 —
meta.brace.square.js #268BD2 —
meta.brace.round, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js #93A1A1 —
meta.brace.curly.js #268BD2 —
entity.name.tag.doctype.html, meta.tag.sgml.html, string.quoted.double.doctype.identifiers-and-DTDs.html #899090 italic
comment.block.html #839496 italic
entity.name.tag.script.html — italic
source.css.embedded.html string.quoted.double.html #269186
text.html.ruby #BD3800 bold
text.html.basic meta.tag.other.html, text.html.basic meta.tag.any.html, text.html.basic meta.tag.block.any, text.html.basic meta.tag.inline.any, text.html.basic meta.tag.structure.any.html, text.html.basic source.js.embedded.html, punctuation.separator.key-value.html #708284
text.html.basic entity.other.attribute-name.html #708284 —
text.html.basic meta.tag.structure.any.html punctuation.definition.string.begin.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html #269186
entity.name.tag.block.any.html #268BD2 bold
source.css.embedded.html entity.name.tag.style.html — italic
entity.name.tag.style.html —
text.html.basic punctuation.section.property-list.css —
source.css.embedded.html, comment.block.html #819090 italic
punctuation.definition.variable.ruby #268BD2
meta.function.method.with-arguments.ruby #708284 —
variable.language.ruby #469186 —
entity.name.function.ruby #268BD2 —
keyword.control.ruby, keyword.control.def.ruby #738A05 bold
keyword.control.class.ruby, meta.class.ruby #748B00 —
entity.name.type.class.ruby #A57800
keyword.control.ruby #748B00
support.class.ruby #A57800
keyword.other.special-method.ruby #748B00 —
constant.language.ruby, constant.numeric.ruby #269186 —
variable.other.constant.ruby #A57800
constant.other.symbol.ruby #269186
punctuation.section.embedded.ruby, punctuation.definition.string.begin.ruby, punctuation.definition.string.end.ruby #D01F1E —
keyword.other.special-method.ruby #BD3800 —
keyword.control.import.include.php #BD3800 —
text.html.ruby meta.tag.inline.any.html #819090
text.html.ruby punctuation.definition.string.begin, text.html.ruby punctuation.definition.string.end #269186
punctuation.definition.string.begin, punctuation.definition.string.end #839496 —
support.class.php #839496 —
keyword.operator.index-start.php, keyword.operator.index-end.php #D31E1E —
meta.array.php support.function.construct.php, meta.array.empty.php support.function.construct.php #A57800
support.function.construct.php #A57800 —
punctuation.definition.array.begin, punctuation.definition.array.end #D31E1E —
constant.numeric.php #269186 —
keyword.other.new.php #CB4B16 —
keyword.operator.class #839496
variable.other.property.php #899090 —
storage.modifier.extends.php, storage.type.class.php, keyword.operator.class.php #A57800 —
punctuation.terminator.expression.php #839496 —
meta.other.inherited-class.php #536871
entity.name.function.php #899090 —
support.function.construct.php #748B00 —
entity.name.type.class.php, meta.function-call.php, meta.function-call.static.php, meta.function-call.object.php #839496 —
keyword.other.phpdoc #899090
source.php.embedded.block.html #BD3613 —
storage.type.function.php #BD3800 —
constant.numeric.c #269186
meta.preprocessor.c.include, meta.preprocessor.macro.c #BB3700
keyword.control.import.define.c, keyword.control.import.include.c #BB3700
entity.name.function.preprocessor.c #BB3700
meta.preprocessor.c.include string.quoted.other.lt-gt.include.c, meta.preprocessor.c.include punctuation.definition.string.begin.c, meta.preprocessor.c.include punctuation.definition.string.end.c #269186
support.function.C99.c, support.function.any-method.c, entity.name.function.c #536871
punctuation.definition.string.begin.c, punctuation.definition.string.end.c #269186
meta.diff, meta.diff.header #E0EDDD italic
text.html.markdown meta.dummy.line-break #E0EDDD —
text.html.markdown markup.raw.inline #269186 —
text.restructuredtext markup.raw #269186 —
other.package.exclude, other.remove #D3201F
punctuation.section.group.tex, punctuation.definition.arguments.begin.latex, punctuation.definition.arguments.end.latex, punctuation.definition.arguments.latex #B81D1C
meta.group.braces.tex #A57705
string.other.math.tex #A57705
variable.parameter.function.latex #BD3800
punctuation.definition.constant.math.tex #D01F1E
text.tex.latex constant.other.math.tex, constant.other.general.math.tex, constant.other.general.math.tex, constant.character.math.tex #269186
string.other.math.tex #A57800
punctuation.definition.string.begin.tex, punctuation.definition.string.end.tex #D3201F
keyword.control.label.latex, text.tex.latex constant.other.general.math.tex #269186
variable.parameter.definition.label.latex #D01F1E
support.function.be.latex #748B00
support.function.section.latex #BD3800
support.function.general.tex #269186
punctuation.definition.comment.tex, comment.line.percentage.tex — italic
keyword.control.ref.latex #269186
storage.type.class.python, storage.type.function.python, storage.modifier.global.python #748B00
keyword.control.import.python, keyword.control.import.from.python #BD3800 —
support.type.exception.python #A57800 —
support.function.builtin.shell #748B00 —
variable.other.normal.shell #BD3800 —
meta.scope.for-in-loop.shell, variable.other.loop.shell #536871
punctuation.definition.string.end.shell, punctuation.definition.string.begin.shell #748B00
meta.scope.case-block.shell, meta.scope.case-body.shell #536871
punctuation.definition.logical-expression.shell #CD1E1D
comment.line.number-sign.shell — italic
keyword.other.import.java #BD3800
storage.modifier.import.java #586E75
meta.class.java storage.modifier.java #A57800
source.java comment.block #536871
comment.block meta.documentation.tag.param.javadoc keyword.other.documentation.param.javadoc #536871
punctuation.definition.variable.perl, variable.other.readwrite.global.perl, variable.other.predefined.perl, keyword.operator.comparison.perl #B58900 —
support.function.perl #859900 —
comment.line.number-sign.perl #586E75 italic
punctuation.definition.string.begin.perl, punctuation.definition.string.end.perl #2AA198 —
constant.character.escape.perl #DC322F —
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 }!` ;
}
Solarized Dark++ | Coding Theme