Skip to main content
Home Theme VS Code Bartleby at Night Color theme for use on low brightness displays. Heavily inspired by Dracula at Night and Hisoka themes.
Bartleby at Night | Coding Theme
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 #000000da activityBar.border #5d71f4 activityBar.foreground #ff0ad6dd activityBarBadge.background #b9090b debugToolBar.background #0066ff debugToolBar.border #095bb913 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — strong — bold header #BD93F9 — source #F8F8F2 — meta.diff, meta.diff.header #6272A4 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Bartleby at Night — Bartleby at Night
dropdown.background
#3c3c3cdd
dropdown.listBackground #000000dd
editor.background #000000
editor.foreground #c5ecff
editor.hoverHighlightBackground #5d71f4dd
editor.lineHighlightBackground #5d71f477
editor.wordHighlightBackground #5d71f4bb
editor.wordHighlightBorder #f024e950
editor.wordHighlightStrongBackground #f024e9
editor.wordHighlightStrongBorder #5d71f4dd
editorBracketMatch.background #f024e9
editorBracketMatch.border #f024e9
editorGroup.border #00000050
editorGroup.dropBackground #5d71f444
editorGroupHeader.noTabsBackground #313131e0
editorGroupHeader.tabsBackground #25211fe0
editorGroupHeader.tabsBorder #1f1e1ee0
editorHoverWidget.background #000000ee
editorHoverWidget.border #ff0000a0
editorLineNumber.activeForeground #ff0ad6
editorLineNumber.foreground #c5ecff
editorSuggestWidget.background #000000fd
editorSuggestWidget.border #ff0000a0
editorSuggestWidget.highlightForeground #00ffff
editorSuggestWidget.selectedBackground #5d71f4aa
editorWhitespace.foreground #a14fee44
editorWidget.background #000000
editorWidget.border #ff0000a0
focusBorder #ff0ad6
input.background #000000
list.activeSelectionBackground #5d71f477
list.dropBackground #99999975
list.focusBackground #ff0ad677
list.highlightForeground #00ffff
list.hoverBackground #ff0ad677
list.hoverForeground #ffffff
list.inactiveFocusBackground #999999cc
list.inactiveSelectionBackground #5d71f477
menu.background #000000dd
menu.border #ff0000a0
menu.selectionBackground #ff0000a0
menu.separatorBackground #ff0000a0
notificationCenter.border #ff000000
notificationCenterHeader.background #ff00009a
notificationCenterHeader.foreground #ffffff
notifications.background #0000009c
notifications.border #ff000000
notifications.foreground #ffffff
panel.background #000000d0
panel.border #00000050
panelTitle.activeBorder #00000050
scrollbarSlider.background #99999955
scrollbarSlider.hoverBackground #5d71f4bb
settings.checkboxBackground #000000
settings.checkboxBorder #232323
settings.dropdownBackground #000000
settings.dropdownBorder #232323
settings.dropdownListBorder #232323
settings.modifiedItemIndicator #f50000
settings.numberInputBackground #000000
settings.numberInputBorder #232323
settings.textInputBackground #000000
settings.textInputBorder #232323
sideBar.background #000000d0
sideBar.border #5d71f4cc
sideBarSectionHeader.background #5d71f477
sideBarSectionHeader.border #080808
sideBarTitle.foreground #fafafa
statusBar.background #000000d0
statusBar.border #00000050
tab.activeBackground #000000a0
tab.activeBorder #ff0ad6
tab.activeBorderTop #1f1e1ea0
tab.activeForeground #fafafa
tab.border #1f1e1e07
tab.hoverBackground #00000080
tab.hoverBorder #5f0d0d2c
tab.inactiveBackground #5f0d0d08
tab.inactiveForeground #5d71f4
terminal.background #000000d0
terminal.border #00000050
terminal.selectionBackground #5d71f4dd
titleBar.activeBackground #000000a0
titleBar.activeForeground #fafafa
titleBar.border #f50000
titleBar.inactiveBackground #333333d0
titleBar.inactiveForeground #fafafa invalid.deprecated #F8F8F2 underline
entity.name.filename #F1FA8C —
markup.underline — underline
markup.heading #BD93F9 bold
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext #8BE9FD —
markup.inline.raw, markup.raw.restructuredtext #50FA7B —
markup.underline.link, markup.underline.link.image #8BE9FD —
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title #FF79C6 —
entity.name.directive.restructuredtext, markup.quote #F1FA8C
meta.separator.markdown #6272A4 —
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown #50FA7B —
punctuation.definition.constant.restructuredtext #BD93F9 —
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end #BD93F9 —
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end #F8F8F2 —
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end #F1FA8C —
entity.name.type.class #8BE9FD —
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special #BD93F9 —
entity.other.inherited-class #8BE9FD —
comment, punctuation.definition.comment, unused.comment, wildcard.comment #a14feecc —
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class #FF79C6 —
comment.block.documentation entity.name.type #8BE9FD —
comment.block.documentation entity.name.type punctuation.definition.bracket #8BE9FD —
comment.block.documentation variable #FFB86C —
constant, variable.other.constant #BD93F9 —
constant.character.escape, constant.character.string.escape, constant.regexp #FF79C6 —
entity.other.attribute-name.parent-selector #FF79C6 —
entity.other.attribute-name #50FA7B —
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix #50FA7B —
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter #FFB86C —
meta.decorator variable.other.readwrite, meta.decorator variable.other.property #50FA7B —
meta.decorator variable.other.object #50FA7B —
keyword, punctuation.definition.keyword #FF79C6 —
keyword.control.new, keyword.operator.new — bold
support.function.magic, support.variable, variable.other.predefined #BD93F9 —
support.function, support.type.property-name —
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation #FF79C6 —
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor #F8F8F2 —
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile #FF79C6 —
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml #8BE9FD —
constant.other.date, constant.other.timestamp #FFB86C —
variable.other.alias.yaml #50FA7B underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def #ff0ad6 —
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml #8BE9FD —
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type #FFB86C —
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp #F1FA8C —
punctuation.definition.group.capture.regexp #FF79C6 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #FF5555 —
punctuation.definition.character-class.regexp #8BE9FD —
punctuation.definition.group.regexp #FFB86C —
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp #FF5555 —
meta.assertion.look-ahead.regexp #50FA7B —
punctuation.definition.string.begin, punctuation.definition.string.end #E9F284 —
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end #8BE9FE —
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape #6272A4 —
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx #c5ecff —
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable #FFB86C —
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable #F8F8F2 —
meta.selectionset.graphql variable #F1FA8C —
meta.selectionset.graphql meta.arguments variable #F8F8F2 —
entity.name.fragment.graphql, variable.fragment.graphql #8BE9FD —
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell #F8F8F2 —
source.shell variable.other #BD93F9 —
meta.scope.prerequisites.makefile #F1FA8C —
meta.attribute-selector.scss #F1FA8C —
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss #F8F8F2 —
meta.preprocessor.haskell #6272A4 —
token.error-token #f44747 —
token.debug-token #b267e6 —
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 } !` ;
}