Skip to main content
Home Theme VS Code Passion Just a beautiful theme to express some colors for passion
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 #24212B activityBar.border #24212B activityBar.dropBackground #5f7e97 activityBar.foreground #5f7e97 activityBarBadge.background #44596b activityBarBadge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #eeffffff — comment, punctuation.definition.comment #d6dcd9a9 italic string.quoted, variable.other.readwrite.js #fdfdfd — constant.language, punctuation.definition.constant, variable.other.constant #7BBE9B — constant.character.escape
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
button.background
#2E303E
dropdown.background #232530
dropdown.listBackground #2E303E
editor.background #24212B
editor.findMatchBackground #6C6F9399
editor.findMatchHighlightBackground #6C6F9333
editor.findRangeHighlightBackground #6C6F931A
editor.foreground #d4d4d4
editor.hoverHighlightBackground #6C6F934D
editor.inactiveSelectionBackground #7e57c25a
editor.lineHighlightBackground #2E303E33
editor.rangeHighlightBackground #2E303E99
editor.selectionBackground #1d3b53
editor.selectionHighlightBackground #5f7e9779
editor.wordHighlightBackground #6C6F9373
editor.wordHighlightStrongBackground #6C6F9373
editorBracketMatch.background #6C6F9366
editorBracketMatch.border #6C6F9300
editorCodeLens.foreground #6C6F9399
editorHoverWidget.background #011627
editorHoverWidget.border #5f7e97
editorIndentGuide.activeBackground #2E303E
editorIndentGuide.background #2E303E99
editorLineNumber.activeForeground #D5D8DA73
editorLineNumber.foreground #D5D8DA1F
editorOverviewRuler.addedForeground #09f7a099
editorOverviewRuler.border #2E303EB3
editorOverviewRuler.bracketMatchForeground #D5D8DA66
editorOverviewRuler.deletedForeground #F43E5C99
editorOverviewRuler.errorForeground #F43E5CE6
editorOverviewRuler.findMatchForeground #6C6F93
editorOverviewRuler.modifiedForeground #21BFC299
editorOverviewRuler.warningForeground #27D79773
editorRuler.foreground #6C6F9333
editorSuggestWidget.background #2C3043
editorSuggestWidget.border #2B2F40
editorSuggestWidget.foreground #d6deeb
editorSuggestWidget.highlightForeground #ffffff
editorSuggestWidget.selectedBackground #5f7e97
editorWidget.background #31364a
editorWidget.border #262A39
errorForeground #F43E5C
focusBorder #1A1C23
foreground #D5D8DA
input.background #2E303E
inputOption.activeBorder #E9436D99
inputValidation.errorBackground #F43E5C80
inputValidation.errorBorder #F43E5C00
list.activeSelectionBackground #5f7e97
list.activeSelectionForeground #ffffff
list.dropBackground #011627
list.focusBackground #010d18
list.focusForeground #ffffff
list.highlightForeground #ffffff
list.hoverBackground #5f7e97
list.hoverForeground #ffffff
list.inactiveSelectionBackground #5f7e97
list.inactiveSelectionForeground #ffffff
list.invalidItemForeground #975f94
scrollbar.shadow #010b14
scrollbarSlider.activeBackground #87d1aa86
scrollbarSlider.background #87d1aa86
scrollbarSlider.hoverBackground #87d1aa86
selection.background #b0f3cf
sideBar.background #1f1d25
sideBar.border #24212B
sideBar.foreground #d4d4d4
sideBarSectionHeader.background #24212B
sideBarSectionHeader.foreground #EBF2EE
sideBarTitle.foreground #EBF2EE
statusBar.background #77AF9C
statusBar.border #262A39
statusBar.debuggingBackground #AAFCB8
statusBar.debuggingBorder #1F2330
statusBar.foreground #24212B
statusBar.noFolderBackground #AAFCB8
statusBar.noFolderBorder #25293A
statusBarItem.activeBackground #AAFCB8
statusBarItem.hoverBackground #AAFCB8
statusBarItem.prominentBackground #AAFCB8
statusBarItem.prominentHoverBackground #AAFCB8
tab.activeBorder #E95378
tab.border #1C1E2600
tab.inactiveBackground #1C1E26
terminal.ansiBlue #30AAD7
terminal.ansiBrightBlue #56C2EA
terminal.ansiBrightCyan #3CE8E6
terminal.ansiBrightGreen #0AF29D
terminal.ansiBrightMagenta #F360C4
terminal.ansiBrightRed #E06783
terminal.ansiBrightYellow #FAC39A
terminal.ansiCyan #1FDAD9
terminal.ansiGreen #14D386
terminal.ansiMagenta #E54EAF
terminal.ansiRed #E95478
terminal.ansiYellow #FAB795
terminal.foreground #D5D8DA
terminal.selectionBackground #6C6F934D
terminalCursor.background #D5D8DA
terminalCursor.foreground #6C6F9399
textLink.activeForeground #E9436D
textLink.foreground #E95378
widget.shadow #16161C constant.other.color #ffffff —
invalid, invalid.illegal #FF5370 —
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx #c792ea italic
storage.type.function.arrow.js #A3D1CB
entity.name.class, meta.class entity.name.type.class #7BBE9B —
entity.other.inherited-class #9DD9D2 —
entity.name.function #568ef7
meta.function punctuation.separator.comma #5f7e97 —
meta.brace.round.ts, meta.field.declaration.ts #568ef7 —
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property #9DD9D2 —
variable.other.object.property #AAFCB8 italic
variable.other.object.js —
entity.name.function #F9849F
variable.function #82AAFF —
variable.interpolation #ec5f67 —
meta.function-call #82AAFF —
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array #ece911 —
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list #0026ff —
string.template, punctuation.definition.string #77AF9C —
string.template punctuation.definition.string #FCFCFC —
storage.modifier #B877DBE6 —
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx #80CBC4 italic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts #B877DBE6
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control #06f5c9 —
punctuation.accessor, keyword #9DD9D2 italic
constant.language.boolean #ff5874 —
support.variable.property #02ffd1 —
punctuation.definition.tag, meta.tag #7fdbca —
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution #9DD9D2 —
meta.class entity.name.type.class.js #8CD790 —
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other #F7567C —
variable.parameter.function.js #7986E7 —
meta.object-literal.key, support.type.property-name #F7567C —
punctuation.separator.key-value #AAFCB8 —
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx #d6deeb —
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 #B2CCD6 —
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass #addb67 —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #82AAFF —
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable #bec5d4 —
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute #F78C6C —
entity.name.tag.scss, entity.name.tag.sass #7fdbca —
keyword.other.unit.scss, keyword.other.unit.sass #FFEB95 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FF5370 —
variable.language #FF5370 italic
entity.name.method.js #82AAFF italic
meta.class-method.js entity.name.function.js, variable.function.constructor #A9DDD6 —
entity.other.attribute-name #C792EA —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCB6B italic
support.type.property-name.css #BBBBBB —
constant.other.color #F09483E6 —
support.constant.font-name #F09483E6 —
entity.other.attribute-name.id #25B0BCE6 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #FAB795E6 —
support.function.misc.css #FAC29AE6 —
markup.heading, entity.name.section #E95678E6 —
markup.quote #BBBBBBCC italic
beginning.punctuation.definition.list #E95678E6 —
markup.underline.link #FAB795E6 —
string.other.link.description #F09483E6 —
constant.character.escape #89DDFF —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #82AAFF italic
source.js constant.other.object.key.js string.unquoted.label.js #FF5370 italic
source.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFCB6B —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F78C6C —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FF5370 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C17E70 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #82AAFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #f07178 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C792EA —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #C3E88D —
text.html.markdown, punctuation.definition.list_item.markdown #EEFFFF —
text.html.markdown markup.inline.raw.markdown #C792EA —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #65737E —
text.html.markdown meta.dummy.line-break —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #C3E88D —
markup.italic #f07178 italic
markup.bold, markup.bold string #f07178 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #f07178 bold
markup.underline #F78C6C underline
markup.quote punctuation.definition.blockquote.markdown #65737E —
string.other.link.title.markdown #82AAFF —
string.other.link.description.title.markdown #C792EA —
constant.other.reference.link.markdown #FFCB6B —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E bold
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...
~/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 } ! ` ;
}
Passion | Coding Theme