Skip to main content
Home Theme VS Code Bisexual Theme A VSCode extension theme showcasing the colors of the Bisexual Flag in honor of bisexual members of the LGBTQIA+ Community this Pride Month
Bisexual Theme | 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 #2F2F2F activityBar.border #2F2F2F60 activityBar.foreground #d1c9c9 activityBarBadge.background #9C4D96 activityBarBadge.foreground #2F2F2F badge.background #2F2F2F30 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier #D70071 — variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss — italic punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss #D795B7 — constant.other.php #D70071 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Bisexual Theme — Bisexual
badge.foreground
#1339A6
breadcrumb.activeSelectionForeground #1339A6
breadcrumb.background #2F2F2F
breadcrumb.focusForeground #d1c9c9
breadcrumb.foreground #2A79AA
breadcrumbPicker.background #2F2F2F
button.background #1339A650
contrastBorder #1339A640
debugToolBar.background #2F2F2F
diffEditor.insertedTextBackground #D795B715
diffEditor.removedTextBackground #8763B920
dropdown.background #2F2F2F
dropdown.border #B9B9B910
editor.background #041118
editor.findMatchBackground #2F2F2F
editor.findMatchBorder #1339A6
editor.findMatchHighlightBackground #1339A693
editor.findMatchHighlightBorder #B9B9B930
editor.foreground #d1c9c9
editor.lineHighlightBackground #2F2F2F50
editor.selectionBackground #9C4D9630
editor.selectionHighlightBackground #1339A66b
editor.selectionHighlightBorder #9C4D96f0
editorBracketMatch.background #2F2F2F
editorBracketMatch.border #D700717f
editorCursor.foreground #D70071
editorError.foreground #8763B970
editorGroup.border #2F2F2F30
editorGroupHeader.tabsBackground #2F2F2F
editorGutter.addedBackground #D795B760
editorGutter.deletedBackground #8763B960
editorGutter.modifiedBackground #9C4D9660
editorHoverWidget.background #2F2F2F
editorHoverWidget.border #B9B9B910
editorIndentGuide.activeBackground #747474
editorIndentGuide.background #74747470
editorInfo.foreground #9C4D9670
editorLineNumber.activeForeground #9C4D96
editorLineNumber.foreground #1339A6c0
editorLink.activeForeground #d1c9c9
editorMarkerNavigation.background #d1c9c905
editorOverviewRuler.border #2F2F2F
editorOverviewRuler.errorForeground #8763B940
editorOverviewRuler.findMatchForeground #1339A6
editorOverviewRuler.infoForeground #9C4D9640
editorOverviewRuler.warningForeground #D7007170
editorRuler.foreground #747474
editorSuggestWidget.background #2F2F2F
editorSuggestWidget.border #B9B9B910
editorSuggestWidget.foreground #d1c9c9
editorSuggestWidget.highlightForeground #D70071
editorSuggestWidget.selectedBackground #1339A620
editorWarning.foreground #D795B7
editorWhitespace.foreground #d1c9c940
editorWidget.background #2F2F2F
editorWidget.border #D70071
editorWidget.resizeBorder #1339A6
extensionButton.prominentBackground #D795B790
extensionButton.prominentHoverBackground #8763B9
focusBorder #B9B9B900
gitDecoration.conflictingResourceForeground #D70071
gitDecoration.deletedResourceForeground #8763B9
gitDecoration.ignoredResourceForeground #1339A6
gitDecoration.modifiedResourceForeground #2A79AA
gitDecoration.untrackedResourceForeground #9C4D96
input.background #414141
input.border #B9B9B910
input.foreground #d1c9c9
input.placeholderForeground #d1c9c960
inputOption.activeBackground #d1c9c930
inputOption.activeBorder #d1c9c930
inputValidation.errorBorder #8763B950
inputValidation.infoBorder #9C4D9650
inputValidation.warningBorder #D7007150
list.activeSelectionBackground #2F2F2F
list.activeSelectionForeground #1339A6
list.focusBackground #414141
list.focusForeground #9C4D96
list.highlightForeground #1339A6
list.hoverBackground #747474
list.hoverForeground #B9B9B9
list.inactiveSelectionBackground #2F2F2F30
list.inactiveSelectionForeground #1339A6
list.warningForeground #D70071
listFilterWidget.background #2F2F2F30
listFilterWidget.noMatchesOutline #2F2F2F30
listFilterWidget.outline #2F2F2F30
menu.background #2F2F2Ff8
menu.border #1339A650
menu.foreground #d1c9c9
menu.selectionBackground #414141
menu.selectionBorder #2F2F2F30
menu.selectionForeground #8b8686
menu.separatorBackground #d1c9c9
menubar.selectionBackground #414141
menubar.selectionBorder #1339A650
menubar.selectionForeground #847d7d
minimap.background #2F2F2F
minimapGutter.addedBackground #8763B9
minimapGutter.deletedBackground #D70071
minimapGutter.modifiedBackground #D795B7
minimapSlider.activeBackground #D795B7b0
minimapSlider.background #D795B780
minimapSlider.hoverBackground #D795B7a0
notificationLink.foreground #1339A6
notifications.background #2F2F2F
notifications.foreground #d1c9c9
panel.background #2F2F2F
panel.border #2F2F2F60
panelTitle.activeBorder #1339A6
panelTitle.activeForeground #B9B9B9
panelTitle.inactiveForeground #d1c9c9
peekView.border #2F2F2F30
peekViewEditor.background #d1c9c905
peekViewEditor.matchHighlightBackground #1339A650
peekViewEditorGutter.background #d1c9c905
peekViewResult.background #d1c9c905
peekViewResult.matchHighlightBackground #1339A650
peekViewResult.selectionBackground #1339A670
peekViewTitle.background #d1c9c905
peekViewTitleDescription.foreground #d1c9c960
pickerGroup.foreground #1339A6
progressBar.background #1339A6
scrollbar.shadow #2F2F2F00
scrollbarSlider.activeBackground #1339A6cc
scrollbarSlider.background #1339A6bb
scrollbarSlider.hoverBackground #1339A6ee
selection.background #1339A6
settings.checkboxBackground #2F2F2F
settings.checkboxForeground #d1c9c9
settings.dropdownBackground #2F2F2F
settings.dropdownForeground #d1c9c9
settings.headerForeground #1339A6
settings.modifiedItemIndicator #1339A6
settings.numberInputBackground #2F2F2F
settings.numberInputForeground #d1c9c9
settings.textInputBackground #2F2F2F
settings.textInputForeground #d1c9c9
sideBar.background #010409
sideBar.border #1339A650
sideBar.foreground #9C4D96
sideBarSectionHeader.background #010409
sideBarSectionHeader.border #2F2F2F60
sideBarSectionHeader.foreground #9C4D96
sideBarTitle.foreground #d1c9c9
statusBar.background #010409
statusBar.border #2F2F2F60
statusBar.debuggingBackground #D70071
statusBar.debuggingForeground #B9B9B9
statusBar.foreground #515151
statusBar.noFolderBackground #2F2F2F
statusBarItem.hoverBackground #1339A620
statusBarItem.remoteBackground #1339A6
statusBarItem.remoteForeground #2F2F2F
tab.activeBackground #1339A650
tab.activeBorder #1339A6
tab.activeForeground #B9B9B9
tab.activeModifiedBorder #1339A6
tab.border #2F2F2F
tab.inactiveBackground #1339A620
tab.inactiveForeground #8e8787af
tab.unfocusedActiveBackground #1339A640
tab.unfocusedActiveBorder #1339A6
tab.unfocusedActiveForeground #d1c9c9
tab.unfocusedInactiveBackground #1339A610
tab.unfocusedInactiveForeground #d1c9c97f
terminal.ansiBlack #2F2F2F
terminal.ansiBlue #9C4D96
terminal.ansiBrightBlack #1339A6
terminal.ansiBrightBlue #9C4D96
terminal.ansiBrightCyan #DC99D4
terminal.ansiBrightGreen #D795B7
terminal.ansiBrightMagenta #D70071
terminal.ansiBrightRed #8763B9
terminal.ansiBrightWhite #B9B9B9
terminal.ansiBrightYellow #D70071
terminal.ansiCyan #DC99D4
terminal.ansiGreen #D795B7
terminal.ansiMagenta #D70071
terminal.ansiRed #8763B9
terminal.ansiWhite #B9B9B9
terminal.ansiYellow #D70071
terminalCursor.background #2F2F2F
terminalCursor.foreground #D70071
textLink.activeForeground #d1c9c9
textLink.foreground #1339A6
titleBar.activeBackground #2F2F2F
titleBar.activeForeground #d1c9c9
titleBar.border #2F2F2F60
titleBar.inactiveBackground #2F2F2F
titleBar.inactiveForeground #1339A6
tree.indentGuidesStroke #747474
widget.shadow #2F2F2F30 invalid, invalid.illegal #8763B9 —
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss #8763B9 —
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js #2A79AA —
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js #d1c9c9 —
punctuation.definition, string.quoted.single.scss #A7A8AF —
keyword.control #425fbfe4 bold
comment.line.scss, comment.line.py, comment.line.number-sign.python, comment.line.double-slash.js, punctuation.definition.comment.pythoncomment.line.number-sign.python, punctuation.definition.comment.py, punctuation.definition.py, punctuation.definition.tag, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html #676161 —
text.html.derivative #A7A8AF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #9C4D96 —
entity.name.tag.html — bold
variable.parameter.js, variable.parameter.keyframe-list.css #D70071 —
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js #6c98b4
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control #cc62c1 —
punctuation.definition.string.begin.html, punctuation.definition.string.end.html #DC99D4 —
support.other.variable, string.other.link, markup.table #d1c9c9 —
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html #D70071 —
variable.parameter.function.language.special, variable.parameter #8763B9 —
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js #D795B7
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html #D70071 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name #2A79AA —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #8763B9 —
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #cc37c0 italic
entity.other.attribute-name, support.function #D70071 —
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key #e1c6ded4 —
source.scss keyword.control #D70071 —
constant.character.escape #DC99D4 —
*url*, *link*, *uri* — underline
source.js constant.other.object.key.js string.unquoted.label.js #d1c9c9 italic
support.type.property-name.json #d1c9c9 —
text.html.markdown, punctuation.definition.list_item.markdown #d1c9c9 —
text.html.markdown markup.inline.raw.markdown #D70071 —
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown #1339A650 —
text.html.markdown meta.dummy.line-break — —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown #2A79AA bold
markup.underline #9C4D96 underline
markup.quote punctuation.definition.blockquote.markdown #1339A650 —
string.other.link.description.title.markdown #D70071 —
constant.other.reference.link.markdown #D70071 —
punctuation.definition.raw.markdown, punctuation.definition.markdown #DC99D4 —
variable.language.fenced.markdown #1339A6 —
meta.separator #A7A8AF bold
token.error-token #FF293B —
token.debug-token #DC99D4 —
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 } ! ` ;
}