Skip to main content
Synesthesia | 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 #1C1E26 activityBar.foreground #b3bddab3 activityBarBadge.background #fe5e78 activityBarBadge.foreground #1C1E26 badge.background #2E303E badge.foreground #D5D8DA tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #666 italic string.quoted.docstring.multi.python #666 italic string.quoted.docstring.multi.python #666 — punctuation.definition.comment #666 — log.date
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Synesthesia — Synesthesia
breadcrumbPicker.background
#232530
button.background #2E303E
debugToolBar.background #1C1E26
diffEditor.insertedTextBackground #09F7A01A
diffEditor.removedTextBackground #F43E5C1A
dropdown.background #2E303E
dropdown.listBackground #2E303E
editor.background #1C1E26
editor.findMatchBackground #6C6F9380
editor.findMatchHighlightBackground #6C6F934D
editor.findRangeHighlightBackground #6C6F931A
editor.hoverHighlightBackground #6C6F934D
editor.lineHighlightBackground #2E303E4D
editor.rangeHighlightBackground #2E303E80
editor.selectionBackground #2E303EB3
editor.selectionHighlightBackground #6C6F934D
editor.wordHighlightBackground #6C6F9380
editor.wordHighlightStrongBackground #6C6F9380
editorBracketMatch.background #6C6F9380
editorBracketMatch.border #6C6F9300
editorCodeLens.foreground #6C6F9380
editorCursor.background #1C1E26
editorCursor.foreground #ffffff
editorError.foreground #fe5e78
editorGroup.border #1A1C23
editorGroup.dropBackground #6C6F934D
editorGroupHeader.tabsBackground #1C1E26
editorGutter.addedBackground #09F7A0B3
editorGutter.deletedBackground #F43E5CB3
editorGutter.modifiedBackground #21BFC2B3
editorIndentGuide.activeBackground #2E303E
editorIndentGuide.background #2E303E80
editorLineNumber.activeForeground #D5D8DA80
editorLineNumber.foreground #D5D8DA1A
editorOverviewRuler.addedForeground #09F7A080
editorOverviewRuler.border #2E303EB3
editorOverviewRuler.bracketMatchForeground #D5D8DA80
editorOverviewRuler.deletedForeground #F43E5C80
editorOverviewRuler.errorForeground #F43E5CE6
editorOverviewRuler.findMatchForeground #6C6F93
editorOverviewRuler.modifiedForeground #21BFC280
editorOverviewRuler.warningForeground #27D79780
editorRuler.foreground #6C6F934D
editorSuggestWidget.highlightForeground #fe5e78
editorWarning.foreground #f8d64c
editorWidget.background #232530
editorWidget.border #232530
errorForeground #fe5e78
extensionButton.prominentBackground #fe5e78
extensionButton.prominentHoverBackground #fe5e78
focusBorder #fe5e78
foreground #D5D8DA
gitDecoration.addedResourceForeground #27D797B3
gitDecoration.deletedResourceForeground #F43E5C
gitDecoration.ignoredResourceForeground #D5D8DA4D
gitDecoration.modifiedResourceForeground #FAB38E
gitDecoration.untrackedResourceForeground #27D797
input.background #2E303E
inputOption.activeBorder #E9436D80
inputValidation.errorBackground #F43E5C80
inputValidation.errorBorder #F43E5C00
list.activeSelectionBackground #2E303E80
list.activeSelectionForeground #D5D8DA
list.dropBackground #6C6F9380
list.errorForeground #fe5e78E6
list.focusBackground #2E303E80
list.focusForeground #D5D8DA
list.highlightForeground #fe5e78
list.hoverBackground #2E303E80
list.hoverForeground #D5D8DA
list.inactiveFocusBackground #2E303E80
list.inactiveSelectionBackground #2E303E4D
list.inactiveSelectionForeground #D5D8DA
list.warningForeground #ffe683d8
menu.selectionBackground #6C6F9380
menu.selectionBorder #6C6F9380
panelTitle.activeBorder #fe5e78
peekView.border #1A1C23
peekViewEditor.background #232530
peekViewEditor.matchHighlightBackground #6C6F9380
peekViewResult.background #232530
peekViewResult.matchHighlightBackground #6C6F9380
peekViewResult.selectionBackground #2E303E80
peekViewTitle.background #232530
pickerGroup.foreground #fe5e78
progressBar.background #fe5e78
scrollbar.shadow #16161C
scrollbarSlider.activeBackground #6C6F9380
scrollbarSlider.background #6C6F931A
scrollbarSlider.hoverBackground #6C6F934D
selection.background #6C6F9380
sideBar.background #1a1c24
sideBar.dropBackground #6C6F934D
sideBar.foreground #D5D8DA80
sideBarSectionHeader.background #1C1E26
sideBarSectionHeader.foreground #D5D8DAB3
statusBar.background #191b22
statusBar.debuggingBackground #fe5e78
statusBar.debuggingForeground #06060C
statusBar.foreground #D5D8DA80
statusBar.noFolderBackground #191b22
statusBarItem.hoverBackground #2E303E
statusBarItem.prominentBackground #2E303E
statusBarItem.prominentHoverBackground #6C6F93
tab.activeBorder #fe5e78
tab.border #1c1e26b7
tab.inactiveBackground #1C1E26
terminal.ansiBlue #26BBD9
terminal.ansiBrightBlue #3FC4DE
terminal.ansiBrightCyan #6BE4E6
terminal.ansiBrightGreen #3FDAA4
terminal.ansiBrightMagenta #F075B5
terminal.ansiBrightRed #EC6A88
terminal.ansiBrightYellow #FBC3A7
terminal.ansiCyan #59E1E3
terminal.ansiGreen #29D398
terminal.ansiMagenta #EE64AC
terminal.ansiRed #E95678
terminal.ansiYellow #FAB795
terminal.foreground #D5D8DA
terminal.selectionBackground #6C6F934D
terminalCursor.background #D5D8DA
terminalCursor.foreground #6C6F9380
textLink.activeForeground #fe5e78
textLink.foreground #fe5e78
titleBar.activeBackground #16181f
titleBar.inactiveBackground #1C1E26
walkThrough.embeddedEditorBackground #232530
widget.shadow #16161C #5eb34d
markup.inline.raw.string #b2b34d —
markup.underline.link #4d77b3 —
fenced_code.block.language #b36f4d —
constant.numeric.json #b3804d —
constant.numeric.decimal #b3804d —
punctuation.separator.dot.decimal #b3804d —
constant.numeric.css #b3804d —
constant.numeric.float #b3884d —
constant.character.format #b3914d —
constant.other.caps #5d4db3 —
constant.other.option #4db377 —
constant.language #b3994d —
string.quoted.single #b3aa4d —
string.quoted.double #b2b34d —
string.unquoted.argument.shell #90b34d —
string.other.link #b34d77 —
entity.name.decorator #4d4db3 —
entity.name.section #b3aa4d —
entity.name.function #4db355 none
entity.name.function.decorator #4db355 —
entity.other.inherited-class #4d7fb3 bold
entity.other.keyframe-offset #b34d99 —
entity.name.tag #4d66b3 bold
entity.name.variable #4daab3 none
entity.name.namespace #994db3 —
entity.other.attribute-name #4d90b3 —
entity.other.attribute-name.class #6f4db3 —
keyword.control.as #b34da1 —
keyword.control.default #b35e4d —
keyword.control.import #b3554d —
keyword.control.at-rule #b35e4d —
keyword.control.export #b3a24d —
keyword.control.trycatch #AA444d —
keyword.control.continue #b3774d —
keyword.control.flow #b3774d —
keyword.control.conditional #b36f4d —
keyword.control.if #b36f4d —
keyword.control.for #b3664d —
keyword.control.loop #b3664d —
keyword.other.rust #b34d80 —
keyword.other.fn.rust #b3774d —
keyword.operator.comparison #b34d55 —
keyword.operator.borrow #b34d80 —
keyword.operator.expression #b34d80 —
keyword.operator.question #b34d80 —
keyword.operator.new #b34d90 —
keyword.operator.relational #b34d5e —
keyword.operator.logical #b34d66 —
keyword.operator.math #b34d6e —
keyword.operator.arithmetic #b34d6e —
keyword.operator.assignment #b34d77 —
keyword.operator.key-value #FFFFFF —
keyword.operator.namespace #FFFFFF —
meta.interpolation #b3914d —
meta.at-rule.media #4d99b3 —
meta.jsx.children #a1b34d —
meta.function-call #4db355 —
meta.function.call #4DAAB3 —
meta.property-list #4daab3 —
meta.function.calc #4daab3 —
meta.function.parameters #4d4db3 —
meta.bracket.square.access #4d99b3 —
meta.object-literal #4d66b3 —
meta.property-value #b2b34d —
variable.argument #4d99b3 —
variable.parameter #4d99b3 —
variable.object.property #4d90b3 —
variable.object.property #4d90b3 —
variable.language #4db399 —
variable.language.self #4db399 —
variable.language.this #4db391 —
variable.other.object #4d6eb3 —
variable.other.object.property #4d6eb3 —
variable.other.assignment #4d6eb3 —
variable.other.property #4d6eb3 —
variable.other.constant #4d6eb3 —
variable.other.read #4db3a2 —
variable.other.readwrite #4db3aa —
variable.other.write #4db2b3 —
variable.other.rust #4daab3 —
support.constant.property-value #b2b34d —
support.constant.font-name #b3aa4d —
support.function #4db355 bold
support.class.component #4d7fb3 bold
support.type.primitive #4d66b3 bold
support.type.property-name #4D90B3 —
support.type.vendored.property-name #4da1b3 —
support.variable.property #4da1b3 —
storage.type.function #b3774d —
storage.type.class #6f4db3 —
storage.type.interface #7f4db3 —
storage.type.enum #774db3 —
punctuation.definition.string #aab34d —
punctuation.definition.tag #664db3 —
punctuation.definition.decorator #b34d88 —
punctuation.comma #FFFFFF —
punctuation.separator #FFFFFF —
punctuation.separator.dictionary #FFFFFF —
punctuation.separator.arguments #ffffff —
punctuation.separator.key-value #ffffff —
punctuation.separator.comma #ffffff —
punctuation.separator.parameter #ffffff —
punctuation.separator.parameters #ffffff —
punctuation.separator.period #ffffff —
punctuation.accessor #ffffff —
punctuation.terminator.statement #ffffff —
punctuation.definition #b34d4d —
punctuation.brackets.angle #664DB3 —
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 } ! ` ;
}