Skip to main content
Home Theme VS Code Drew's Themes A package of themes using Segment.io's color palette.
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 #425A70 activityBar.border #425A70 activityBar.dropBackground #f9f9fb3a activityBar.foreground #F9F9FB activityBar.inactiveForeground #C7CED4 activityBarBadge.background #007ACC tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member #795E26 — meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #267f99 — meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Drew's Themes — Segment Light Drew's Themes | Coding Theme
activityBarBadge.foreground
#F9F9FB
badge.background #66788A
badge.foreground #F9F9FB
breadcrumb.activeSelectionForeground #425A70
breadcrumb.background #F5F6F7
breadcrumb.focusForeground #234361
breadcrumb.foreground #7B8B9A
breadcrumbPicker.background #F5F6F7
button.background #66788A
button.foreground #F5F6F7
button.hoverBackground #7B8B9A
editor.background #FFFFFF
editor.foreground #000000
editor.inactiveSelectionBackground #E5EBF1
editor.selectionHighlightBackground #ADD6FF80
editorGroup.dropBackground #435A6F23
editorGroupHeader.noTabsBackground #E4E7EB
editorGroupHeader.tabsBackground #E4E7EB
editorIndentGuide.activeBackground #939393
editorIndentGuide.background #D3D3D3
editorLineNumber.activeForeground #234361
editorLineNumber.foreground #7B8B9A
editorSuggestWidget.background #F3F3F3
editorWarning.foreground #D9822B
gitDecoration.addedResourceForeground #8ED3B2
gitDecoration.modifiedResourceForeground #BB9B34
gitDecoration.untrackedResourceForeground #47B881
input.background #E4E7EB
input.border #C7CED4
input.foreground #234361
input.placeholderForeground #767676
list.activeSelectionBackground #C7CED4
list.dropBackground #C7CED478
list.hoverBackground #E8E8E8
list.inactiveSelectionBackground #C7CED478
list.warningForeground #D9822B
scrollbar.shadow #425a70d5
scrollbarSlider.activeBackground #C7CED4
scrollbarSlider.background #C7CED4ca
scrollbarSlider.hoverBackground #C7CED4da
settings.numberInputBorder #CECECE
settings.textInputBorder #CECECE
sideBar.background #F5F6F7
sideBar.border #7B8B9A
sideBar.foreground #425A70
sideBarSectionHeader.background #E4E7EB
sideBarSectionHeader.border #7B8B9A
sideBarSectionHeader.foreground #425A70
sideBarTitle.foreground #6F6F6F
statusBar.background #47B881
statusBar.debuggingBackground #D9822B
statusBar.foreground #F9F9FB
statusBarItem.remoteBackground #16825D
statusBarItem.remoteForeground #FFF
tab.activeBackground #F5F6F7
tab.activeForeground #234361
tab.border #7B8B9A
tab.inactiveBackground #E4E7EB
tab.inactiveForeground #7B8B9A
#267f99
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #AF00DB —
variable, meta.definition.variable.name, support.variable, entity.name.variable #001080 —
meta.object-literal.key #001080 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #0451a5 —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #d16969 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #811f3f —
keyword.operator.quantifier.regexp #000000 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #ff0000 —
constant.character #0000ff —
constant.character.escape #ff0000 —
entity.name.label #000000 —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member #795E26 —
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #267f99 —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #267f99 —
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #AF00DB —
variable, meta.definition.variable.name, support.variable, entity.name.variable #001080 —
meta.object-literal.key #001080 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #0451a5 —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #d16969 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #811f3f —
keyword.operator.quantifier.regexp #000000 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #ff0000 —
constant.character #0000ff —
constant.character.escape #ff0000 —
entity.name.label #000000 —
meta.embedded, source.groovy.embedded #000000ff —
constant.language #0000ff —
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #09885a —
entity.name.selector #800000 —
entity.other.attribute-name #ff0000 —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss #800000 —
markup.underline — underline
markup.heading #800000 bold
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown #0451a5 —
markup.inline.raw #800000 —
punctuation.definition.tag #800000 —
meta.preprocessor #0000ff —
meta.preprocessor.string #a31515 —
meta.preprocessor.numeric #09885a —
meta.structure.dictionary.key.python #0451a5 —
storage.modifier, keyword.operator.noexcept #0000ff —
string, entity.name.operator.custom-literal.string #a31515 —
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars #0000ff —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #0000ff —
meta.template.expression #000000 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #0451a5 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #ff0000 —
support.type.property-name.json #0451a5 —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #0000ff —
keyword.other.unit #09885a —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #800000 —
support.function.git-rebase #0451a5 —
constant.sha.git-rebase #09885a —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #000000 —
variable.language #0000ff —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member #795E26 —
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #267f99 —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #267f99 —
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #AF00DB —
variable, meta.definition.variable.name, support.variable, entity.name.variable #001080 —
meta.object-literal.key #001080 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #0451a5 —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #d16969 —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #811f3f —
keyword.operator.quantifier.regexp #000000 —
keyword.operator.or.regexp, keyword.control.anchor.regexp #ff0000 —
constant.character #0000ff —
constant.character.escape #ff0000 —
entity.name.label #000000 —
meta.embedded, source.groovy.embedded #000000ff —
constant.language #0000ff —
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #09885a —
entity.name.selector #800000 —
entity.other.attribute-name #ff0000 —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss #800000 —
markup.underline — underline
markup.heading #800000 bold
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown #0451a5 —
markup.inline.raw #800000 —
punctuation.definition.tag #800000 —
meta.preprocessor #0000ff —
meta.preprocessor.string #a31515 —
meta.preprocessor.numeric #09885a —
meta.structure.dictionary.key.python #0451a5 —
storage.modifier, keyword.operator.noexcept #0000ff —
string, entity.name.operator.custom-literal.string #a31515 —
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars #0000ff —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #0000ff —
meta.template.expression #000000 —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #0451a5 —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #ff0000 —
support.type.property-name.json #0451a5 —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #0000ff —
keyword.other.unit #09885a —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #800000 —
support.function.git-rebase #0451a5 —
constant.sha.git-rebase #09885a —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #000000 —
variable.language #0000ff —
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
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
fetchUser
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 } !` ;
}