Skip to main content
Home Theme VS Code Flower Boy - Dark A dark theme inspired by cover art for Tyler the Creator's 'Flower Boy
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.activeBackground #a5b48110 activityBar.activeBorder #64853080 activityBar.background #1f1e1e activityBar.foreground #ebd0a9 activityBar.inactiveForeground #586073 activityBarBadge.background #648530 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold header #a5b481 — source #ebd0a9 — meta.diff, meta.diff.header #586073 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Flower Boy - Dark — Flower Boy
activityBarBadge.foreground #ebd0a9
badge.background #1f1e1e
badge.foreground #ebd0a9
breadcrumb.activeSelectionForeground #ebd0a9
breadcrumb.background #000000
breadcrumb.focusForeground #ebd0a9
breadcrumb.foreground #586073
breadcrumbPicker.background #171616
button.background #1f1e1e
button.foreground #ebd0a9
contrastBorder #171616
debugToolBar.background #292826
diffEditor.insertedTextBackground #ff8e1320
diffEditor.removedTextBackground #a5b48150
dropdown.background #1f1e1e
dropdown.border #171616
dropdown.foreground #ebd0a9
editor.background #000000
editor.findMatchBackground #d1757580
editor.findMatchHighlightBackground #FFFFFF40
editor.findRangeHighlightBackground #44475A75
editor.foldBackground #292826
editor.foreground #ebd0a9
editor.hoverHighlightBackground #f4b43050
editor.lineHighlightBorder #1f1e1e
editor.rangeHighlightBackground #a5b48115
editor.selectionBackground #1f1e1e
editor.selectionHighlightBackground #262525
editor.snippetFinalTabstopHighlightBackground #000000
editor.snippetFinalTabstopHighlightBorder #ff8e13
editor.snippetTabstopHighlightBackground #000000
editor.snippetTabstopHighlightBorder #586073
editor.wordHighlightBackground #f4b43050
editor.wordHighlightStrongBackground #ff8e1350
editorCodeLens.foreground #586073
editorError.foreground #a5b481
editorGroup.border #a5b481
editorGroup.dropBackground #44475A70
editorGroupHeader.tabsBackground #171616
editorGutter.addedBackground #ff8e1380
editorGutter.deletedBackground #a5b48180
editorGutter.modifiedBackground #f4b43080
editorHoverWidget.background #000000
editorHoverWidget.border #586073
editorIndentGuide.activeBackground #FFFFFF45
editorIndentGuide.background #FFFFFF1A
editorLineNumber.foreground #586073
editorLink.activeForeground #f4b430
editorMarkerNavigation.background #292826
editorOverviewRuler.addedForeground #ff8e1380
editorOverviewRuler.border #171616
editorOverviewRuler.currentContentForeground #ff8e13
editorOverviewRuler.deletedForeground #a5b48180
editorOverviewRuler.errorForeground #a5b48180
editorOverviewRuler.incomingContentForeground #a5b481
editorOverviewRuler.infoForeground #f4b43080
editorOverviewRuler.modifiedForeground #f4b43080
editorOverviewRuler.selectionHighlightForeground #d17575
editorOverviewRuler.warningForeground #d1757580
editorOverviewRuler.wordHighlightForeground #f4b430
editorOverviewRuler.wordHighlightStrongForeground #ff8e13
editorRuler.foreground #FFFFFF1A
editorSuggestWidget.background #292826
editorSuggestWidget.foreground #ebd0a9
editorSuggestWidget.selectedBackground #1f1e1e
editorWarning.foreground #f4b430
editorWhitespace.foreground #FFFFFF1A
editorWidget.background #292826
errorForeground #a5b481
extensionButton.prominentBackground #ff8e1390
extensionButton.prominentForeground #ebd0a9
extensionButton.prominentHoverBackground #ff8e1360
focusBorder #586073
foreground #ebd0a9
gitDecoration.conflictingResourceForeground #d17575
gitDecoration.deletedResourceForeground #a5b481
gitDecoration.ignoredResourceForeground #586073
gitDecoration.modifiedResourceForeground #f4b430
gitDecoration.untrackedResourceForeground #ff8e13
input.background #000000
input.border #171616
input.foreground #ebd0a9
input.placeholderForeground #586073
inputOption.activeBorder #a5b481
inputValidation.errorBorder #a5b481
inputValidation.infoBorder #648530
inputValidation.warningBorder #d17575
list.activeSelectionBackground #1f1e1e
list.activeSelectionForeground #ebd0a9
list.dropBackground #1f1e1e
list.errorForeground #a5b481
list.focusBackground #44475A75
list.highlightForeground #f4b430
list.hoverBackground #44475A75
list.inactiveSelectionBackground #44475A75
list.warningForeground #d17575
listFilterWidget.background #1f1e1e
listFilterWidget.noMatchesOutline #a5b481
listFilterWidget.outline #262525
merge.currentHeaderBackground #ff8e1390
merge.incomingHeaderBackground #a5b48190
notification.background #000000
notification.buttonBackground #1f1e1e
notification.buttonForeground #ebd0a9
notification.buttonHoverBackground #44475A75
notification.errorBackground #a5b481
notification.errorForeground #ebd0a9
notification.foreground #ebd0a9
notification.infoBackground #f4b430
notification.infoForeground #000000
notification.warningBackground #d17575
notification.warningForeground #000000
panel.background #000000
panel.border #a5b481
panelTitle.activeBorder #648530
panelTitle.activeForeground #ebd0a9
panelTitle.inactiveForeground #586073
peekView.border #1f1e1e
peekViewEditor.background #000000
peekViewEditor.matchHighlightBackground #779d4680
peekViewResult.background #292826
peekViewResult.fileForeground #ebd0a9
peekViewResult.lineForeground #ebd0a9
peekViewResult.matchHighlightBackground #779d4680
peekViewResult.selectionBackground #1f1e1e
peekViewResult.selectionForeground #ebd0a9
peekViewTitle.background #171616
peekViewTitleDescription.foreground #586073
peekViewTitleLabel.foreground #ebd0a9
pickerGroup.border #a5b481
pickerGroup.foreground #f4b430
progressBar.background #648530
selection.background #a5b481
settings.checkboxBackground #292826
settings.checkboxBorder #171616
settings.checkboxForeground #ebd0a9
settings.dropdownBackground #292826
settings.dropdownBorder #171616
settings.dropdownForeground #ebd0a9
settings.headerForeground #ebd0a9
settings.modifiedItemForeground #d17575
settings.modifiedItemIndicator #d17575
settings.numberInputBackground #292826
settings.numberInputBorder #171616
settings.numberInputForeground #ebd0a9
settings.textInputBackground #292826
settings.textInputBorder #171616
settings.textInputForeground #ebd0a9
sideBar.background #292826
sideBarSectionHeader.background #000000
sideBarSectionHeader.border #171616
sideBarTitle.foreground #ebd0a9
statusBar.background #171616
statusBar.debuggingBackground #a5b481
statusBar.debuggingForeground #171616
statusBar.foreground #ebd0a9
statusBar.noFolderBackground #171616
statusBar.noFolderForeground #ebd0a9
statusBarItem.prominentBackground #a5b481
statusBarItem.prominentHoverBackground #d17575
statusBarItem.remoteBackground #a5b481
statusBarItem.remoteForeground #ebd0a9
tab.activeBackground #000000
tab.activeBorderTop #64853080
tab.activeForeground #ebd0a9
tab.border #171616
tab.inactiveBackground #292826
tab.inactiveForeground #586073
terminal.ansiBlack #1f1e1d
terminal.ansiBlue #6dd6c3
terminal.ansiBrightBlack #6d7691
terminal.ansiBrightBlue #D6ACFF
terminal.ansiBrightCyan #8fdbdb
terminal.ansiBrightGreen #449c5d
terminal.ansiBrightMagenta #50e69d
terminal.ansiBrightRed #ed9247
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #ffc5a6
terminal.ansiCyan #6ea9b5
terminal.ansiGreen #50FA7B
terminal.ansiMagenta #deb67e
terminal.ansiRed #e88a0e
terminal.ansiWhite #e8d4be
terminal.ansiYellow #72b583
terminal.background #000000
terminal.foreground #ebd0a9
titleBar.activeBackground #292826
titleBar.activeForeground #ebd0a9
titleBar.inactiveBackground #171616
titleBar.inactiveForeground #586073
walkThrough.embeddedEditorBackground #292826 invalid #a5b481 underline italic
invalid.deprecated #ebd0a9 underline italic
entity.name.filename #779d46 —
markup.underline — underline
markup.heading #a5b481 bold
markup.italic #779d46 italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext #f4b430 —
markup.inline.raw, markup.raw.restructuredtext #ff8e13 —
markup.underline.link, markup.underline.link.image #f4b430 —
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title #648530 —
entity.name.directive.restructuredtext, markup.quote #779d46 italic
meta.separator.markdown #586073 —
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown #ff8e13 —
punctuation.definition.constant.restructuredtext #a5b481 —
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end #a5b481 —
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end #ebd0a9 —
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end #779d46 —
entity.name.type.class, entity.name.class #f4b430 normal
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 #a5b481 italic
entity.other.inherited-class #f4b430 italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment #586073 —
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class #648530 —
comment.block.documentation entity.name.type #f4b430 italic
comment.block.documentation entity.name.type punctuation.definition.bracket #f4b430 —
comment.block.documentation variable #d17575 italic
constant, variable.other.constant #a5b481 —
constant.character.escape, constant.character.string.escape, constant.regexp #648530 —
entity.other.attribute-name.parent-selector #648530 —
entity.other.attribute-name #ff8e13 italic
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 #ff8e13 —
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 #d17575 italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property #ff8e13 italic
meta.decorator variable.other.object #ff8e13 —
keyword, punctuation.definition.keyword #648530 —
keyword.control.new, keyword.operator.new — bold
support.function.magic, support.variable, variable.other.predefined #a5b481 regular
support.function, support.type.property-name — regular
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 #648530 —
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 #ebd0a9 —
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 #648530 —
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml #f4b430 —
constant.other.date, constant.other.timestamp #d17575 —
variable.other.alias.yaml #ff8e13 italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def #648530 regular
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 #f4b430 italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type #d17575 —
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp #779d46 —
punctuation.definition.group.capture.regexp #648530 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #a5b481 —
punctuation.definition.character-class.regexp #f4b430 —
punctuation.definition.group.regexp #d17575 —
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp #a5b481 —
meta.assertion.look-ahead.regexp #ff8e13 —
punctuation.definition.string.begin, punctuation.definition.string.end #b55b22 —
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end #378da1 —
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 #586073 —
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx #ebd0a9 —
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable #d17575 italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable #ebd0a9 normal
meta.selectionset.graphql variable #779d46 —
meta.selectionset.graphql meta.arguments variable #ebd0a9 —
entity.name.fragment.graphql, variable.fragment.graphql #f4b430 —
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 #ebd0a9 —
source.shell variable.other #a5b481 —
support.constant #a5b481 normal
meta.scope.prerequisites.makefile #779d46 —
meta.attribute-selector.scss #779d46 —
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss #ebd0a9 —
meta.preprocessor.haskell #586073 —
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 } !` ;
}
Flower Boy - Dark | Coding Theme