Skip to main content
Home Theme VS Code Lasik Super Dark A dark, easy on the eyes theme that has decent contrast for coders with sensitive eyes
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
actionBar.toggledBackground #383a49 activityBar.activeBackground #a8bcfc50 activityBar.activeBorder #a8bcfc activityBar.activeFocusBorder #ff0000 activityBar.background #01030a activityBar.border #01030a tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold markup.underline — underline markup.italic — italic markup.strikethrough — strikethrough meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBar.foreground #a8bcfc
activityBar.inactiveForeground #a8bcfc50
activityBarBadge.background #a8bcfc
activityBarBadge.foreground #01030a
badge.background #616161
badge.foreground #f8f8f8
button.background #0078d4
button.border #ffffff12
button.foreground #ffffff
button.hoverBackground #026ec1
button.secondaryBackground #313131
button.secondaryForeground #cccccc
button.secondaryHoverBackground #3c3c3c
chat.slashCommandBackground #34414b
chat.slashCommandForeground #40a6ff
checkbox.background #313131
checkbox.border #3c3c3c
debugToolBar.background #181818
descriptionForeground #9d9d9d
dropdown.background #313131
dropdown.border #3c3c3c
dropdown.foreground #cccccc
dropdown.listBackground #1f1f1f
editor.background #01030a
editor.findMatchBackground #a8bcfc00
editor.findMatchBorder #a8bcfc20
editor.findMatchHighlightBackground #a1aed828
editor.foreground #cccccc
editor.inactiveSelectionBackground #3a3d41
editor.lineHighlightBackground #a8bcfc1a
editor.lineHighlightBorder #a8bcfc08
editor.selectionBackground #a8bcfc28
editor.selectionHighlightBackground #add6ff26
editor.selectionHighlightBorder #a8bcfc20
editor.wordHighlightBackground #a8bcfc28
editor.wordHighlightBorder #a8bcfc20
editorGroup.border #ffffff17
editorGroupHeader.border #a8bcfc20
editorGroupHeader.tabsBackground #01030a
editorGroupHeader.tabsBorder #a8bcfc20
editorGutter.addedBackground #2ea043
editorGutter.deletedBackground #f85149
editorGutter.modifiedBackground #0078d4
editorIndentGuide.activeBackground1 #707070
editorIndentGuide.background1 #404040
editorLineNumber.activeForeground #a8bcfc
editorLineNumber.foreground #a8bcfc50
editorOverviewRuler.border #010409
editorWidget.background #202020
errorForeground #f85149
focusBorder #0078d4
foreground #cccccc
icon.foreground #a8bcfc
input.background #313131
input.border #3c3c3c
input.foreground #cccccc
input.placeholderForeground #818181
inputOption.activeBackground #2489db82
inputOption.activeBorder #2488db
keybindingLabel.foreground #cccccc
list.activeSelectionBackground #a8bcfc28
list.activeSelectionIconForeground #ffffff
list.dropBackground #383b3d
list.focusOutline #a8bcfc87
list.inactiveSelectionBackground #a8bcfc28
menu.background #1f1f1f
menu.border #454545
menu.foreground #cccccc
menu.separatorBackground #454545
notificationCenterHeader.background #1f1f1f
notificationCenterHeader.foreground #cccccc
notifications.background #1f1f1f
notifications.border #2b2b2b
notifications.foreground #cccccc
panel.background #01030a
panel.border #a8bcfc
panelInput.border #a8bcfc55
panelSection.border #a8bcfc55
panelSection.dropBackground #a8bcfc50
panelTitle.activeBorder #a8bcfc
panelTitle.activeForeground #cccccc
panelTitle.inactiveForeground #9d9d9d
peekViewEditor.background #1f1f1f
peekViewEditor.matchHighlightBackground #bb800966
peekViewResult.background #1f1f1f
peekViewResult.matchHighlightBackground #bb800966
pickerGroup.border #3c3c3c
ports.iconRunningProcessForeground #369432
progressBar.background #0078d4
quickInput.background #222222
quickInput.foreground #cccccc
settings.dropdownBackground #313131
settings.dropdownBorder #3c3c3c
settings.headerForeground #ffffff
settings.modifiedItemIndicator #bb800966
sideBar.background #01030a
sideBar.border #01030a
sideBar.foreground #cccccc
sideBarSectionHeader.background #a8bcfc28
sideBarSectionHeader.border #a8bcfc20
sideBarSectionHeader.foreground #a8bcfc
sideBarTitle.foreground #a8bcfc85
statusBar.background #090b10
statusBar.border #2b2b2b
statusBar.debuggingBackground #0078d4
statusBar.debuggingForeground #ffffff
statusBar.focusBorder #0078d4
statusBar.foreground #cccccc
statusBar.noFolderBackground #1f1f1f
statusBarItem.focusBorder #0078d4
statusBarItem.prominentBackground #6e768166
statusBarItem.remoteBackground #0078d4
statusBarItem.remoteForeground #ffffff
tab.activeBackground #a8bcfc28
tab.activeBorder #1f1f1f
tab.activeBorderTop #a8bcfc
tab.activeForeground #ffffff
tab.border #a8bcfc20
tab.hoverBackground #1f1f1f
tab.inactiveBackground #01030a
tab.inactiveForeground #9d9d9d
tab.lastPinnedBorder #cccccc33
tab.unfocusedActiveBorder #1f1f1f
tab.unfocusedActiveBorderTop #a8bcfc85
tab.unfocusedHoverBackground #1f1f1f
terminal.foreground #cccccc
terminal.inactiveSelectionBackground #3a3d41
terminal.tab.activeBorder #0078d4
textBlockQuote.background #2b2b2b
textBlockQuote.border #616161
textCodeBlock.background #2b2b2b
textLink.activeForeground #4daafc
textLink.foreground #4daafc
textPreformat.background #3c3c3c
textPreformat.foreground #d0d0d0
textSeparator.foreground #21262d
titleBar.activeBackground #010102
titleBar.activeForeground #cccccc
titleBar.border #2b2b2b
titleBar.inactiveBackground #1c1e26
titleBar.inactiveForeground #8f93a2
welcomePage.progress.foreground #0078d4
welcomePage.tileBackground #2b2b2b
widget.border #313131 #D4D4D4
constant.language #569CD6 —
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #B5CEA8 —
entity.name.tag.css #D7BA7D —
entity.other.attribute-name #9CDCFE —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss #D7BA7D —
markup.heading #569CD6 bold
markup.inline.raw #CE9178 —
punctuation.definition.tag #808080 —
meta.preprocessor, entity.name.function.preprocessor #569CD6 —
meta.preprocessor.string #CE9178 —
meta.preprocessor.numeric #B5CEA8 —
meta.structure.dictionary.key.python #9CDCFE —
storage.modifier, keyword.operator.noexcept #569CD6 —
string, meta.embedded.assembly #CE9178 —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #569CD6 —
meta.template.expression #D4D4D4 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #9CDCFE —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #569CD6 —
keyword.other.unit #B5CEA8 —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #569CD6 —
support.function.git-rebase #9CDCFE —
constant.sha.git-rebase #B5CEA8 —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #D4D4D4 —
variable.language #569CD6 —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #DCDCAA —
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #4EC9B0 —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #4EC9B0 —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator #C586C0 —
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder #9CDCFE —
variable.other.constant, variable.other.enummember #4FC1FF —
variable.parameter #FC7E9BE6 —
meta.object-literal.key #9CDCFE —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #CE9178 —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #CE9178 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #D16969 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #DCDCAA —
keyword.operator.quantifier.regexp #D7BA7D —
constant.character, constant.other.option #569CD6 —
constant.character.escape #D7BA7D —
entity.name.label #C8C8C8 —
constant.character.escape #25B0BCE6 —
entity.name.function #02BBCCE6 —
entity.name.type, storage.type.cs #FAC29AE6 —
entity.other.attribute-name #F09483E6 italic
entity.other.inherited-class #FAB795E6 —
entity.other.attribute-name.id #25B0BCE6 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #FAB795E6 —
entity.name.variable, variable #E95678E6 —
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete #B877DBE6 —
keyword.other.unit #F09483E6 —
markup.quote #FAB795B3 italic
markup.heading, entity.name.section #E95678E6 —
markup.italic #25B0BCE6 italic
markup.inline.raw, markup.fenced_code.block #F09483E6 —
markup.underline.link #FAB795E6 —
string.quoted, string.template #FAB795E6 —
string.other.link #F09483E6 —
support.function #25B0BCE6 —
support.variable #E95678E6 —
support.type.property-name, meta.object-literal.key #E95678E6 —
support.type.property-name.css #BBBBBB —
variable.language #FAC29AE6 italic
variable.parameter — italic
string.template meta.embedded #BBBBBB —
punctuation.definition.tag #E95678B3
punctuation.separator #BBBBBB —
punctuation.definition.template-expression #B877DBE6 —
punctuation.section.embedded #B877DBE6 —
punctuation.definition.list #F09483E6 —
token.error-token #F44747 —
token.debug-token #B267E6 —
punctuation.definition.variable.shell #6a283c —
punctuation.definition.evaluation.arithmetic.begin.shell, punctuation.definition.evaluation.arithmetic.end.shell #B5CEA8 —
punctuation.definition.evaluation.parens.begin.shell, punctuation.definition.evaluation.parens.end.shell #F9C859 —
entity.name.command.shell #4EC9B0 —
meta.parameter-expansion #FC7E9BE6 —
markup.heading.markdown #d24e6d bold
punctuation.definition.heading.markdown #e956784d —
text.html.markdown, meta.paragraph.markdown #d9d9da —
markup.italic.markdown #d9d9da italic
punctuation.definition.italic.markdown #67686c —
markup.bold.markdown #e6e6e7 bold
punctuation.definition.bold.markdown #67686c
markup.strikethrough.markdown #999a9d strikethrough
punctuation.definition.strikethrough.markdown #67686c —
markup.quote.markdown, punctuation.definition.quote.begin.markdown #6B99559A —
punctuation.definition.list.begin.markdown #6796E6 —
markup.raw.block.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown, markup.math.inline.markdown, markup.math.block.markdown #F09483E6 —
punctuation.definition.raw.markdown, punctuation.definition.markdown #F0938357 —
punctuation.definition.table.markdown, punctuation.separator.table.markdown #2D456B —
meta.separator.markdown #2D456B —
meta.link.inline.markdown #F09483E6 —
string.other.link.title.markdown #FAB795E6 —
markup.underline.link.markdown #F09483E6 —
string.other.link.description.title.markdown #FAB795E6 —
punctuation.definition.metadata.markdown #FAB7953D —
punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown #FAB7953D —
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown #FAB7953D —
string.other.link.description.markdown #FFE998E6 —
punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown #FAB7953D —
constant.other.reference.link.markdown #5F8387 —
punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.separator.key-value.markdown #5F838756 —
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json #522030 —
punctuation.definition.string.begin.json, punctuation.definition.string.end.json #58423b —
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 } !` ;
}
Lasik Super Dark | Coding Theme