Skip to main content
Home Theme VS Code Fidel A beautiful dark theme inspired by the JSFiddle color scheme!
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 #1a2028 activityBar.border #282a2e activityBarBadge.background #007acc editor.background #1e242c editor.foreground #d4d4d4 editor.lineHighlightBackground #272c34 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle #eeeeee — comment, punctuation.definition.comment #4e6a87 italic variable, string constant.other.placeholder #f8b068 — constant.other.color #ed6e55 — invalid, invalid.illegal
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
editorCursor.foreground
#f5eea2
editorGroupHeader.noTabsBackground #1e242c
editorGroupHeader.tabsBackground #1e242c
editorLineNumber.foreground #4e6a87
sideBar.background #1a2028
sideBar.border #282a2e
sideBarTitle.foreground #bbbbbb
statusBar.background #1a2028
statusBar.border #282a2e
tab.activeBackground #1e242c
tab.activeBorder #4e6a87
tab.inactiveBackground #1e242c
titleBar.activeBackground #1e242c
titleBar.border #282a2e
titleBar.inactiveBackground #1e242c #ff4f68
keyword, storage.type, storage.modifier #b896ed —
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 #eeeeee —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #ff4f68 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #2795ee —
meta.block variable.other #6ce890 —
support.other.variable, string.other.link #6ce890 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #f8b068 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #f5eea2
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 #f8b068 —
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 #6ce890 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #2795ee —
variable.language #2795ee italic
entity.name.method.js #6ce890 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #6ce890 —
entity.other.attribute-name #f8b068 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #f8b068 italic
entity.other.attribute-name.class #f8b068 —
source.sass keyword.control #f8b068 —
constant.character.escape #8abeb7 —
*url*, *link*, *uri* #ed6e55 underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #2795ee italic
source.js constant.other.object.key.js string.unquoted.label.js #ff4f68 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 #2795ee —
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 #6ce890 —
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 #65737E —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #6ce890 —
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 —
markup.quote #65737E italic
string.other.link.title.markdown #2795ee —
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 } ! ` ;
}
Fidel | Coding Theme