Skip to main content
Home Theme VS Code North Star Theme A cyan-ish dark theme extension for Visual Studio Code.
North Star 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.activeBackground #4d7f9120 activityBar.background #132226 activityBar.border #02020245 activityBar.foreground #fdf7ecfa activityBar.inactiveForeground #d3cfc7d6 activityBarBadge.background #97CAD8 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #7F7F7F italic variable #D4D4D4 — keyword, storage.type, storage.modifier #C594C5 — keyword.operator, constant.other.color, punctuation, 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 #a9937a
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
North Star Theme — North Star Theme
activityBarBadge.foreground #192f34
badge.background #97CAD8
badge.foreground #192f34
breadcrumb.background #132226
breadcrumb.focusForeground #C6AC8F
breadcrumb.foreground #f1ece1f5
button.background #348092
button.foreground #f1ece1f5
button.hoverBackground #2B6A78
button.secondaryBackground #34819239
button.secondaryForeground #f1ece1f5
button.secondaryHoverBackground #2b6b7939
editor.background #242b2e
editor.foreground #F1ECE1
editor.inactiveSelectionBackground #99bbbf83
editor.selectionBackground #93b6ba46
editorCursor.background #DED0BE
editorCursor.foreground #DED0BE
editorGroupHeader.tabsBackground #1f2f34
editorGroupHeader.tabsBorder #4d7f91
editorLineNumber.activeForeground #C6AC8F
editorLineNumber.foreground #F1ECE1
focusBorder #706354
foreground #EAE2D6
input.background #34819249
input.border #f1ece1f5
input.foreground #f1ece1a5
input.placeholderForeground #f1ece1a5
inputOption.activeBackground #34819239
inputOption.activeBorder #f1ece1f5
inputOption.activeForeground #f1ece1f5
list.activeSelectionBackground #93b6ba5a
list.activeSelectionForeground #C1D6D7
list.dropBackground #060d0f77
list.highlightForeground #ffffff
list.hoverBackground #93b6ba17
list.hoverForeground #F1ECE1
list.inactiveSelectionBackground #93b6ba31
list.inactiveSelectionForeground #C1D6D7
listFilterWidget.background #93b6bad7
listFilterWidget.noMatchesOutline #ff0000
listFilterWidget.outline #C1D6D7
menu.background #35535ae2
menu.border #20373C
menu.foreground #f1ece1d6
menu.selectionBackground #f1ece130
menu.selectionBorder #20373C
menu.selectionForeground #f1ece1d6
menu.separatorBackground #6599A4
menubar.selectionBackground #35535a7b
menubar.selectionBorder #ff000000
menubar.selectionForeground #e8e1f1d6
notifications.background #132226
notifications.border #4d7f91bb
notifications.foreground #f1ece1f5
notificationsErrorIcon.foreground #ff7777
notificationsInfoIcon.foreground #7bbffb
notificationsWarningIcon.foreground #f9bd73
notificationToast.border #4d7f91bb
panel.background #132226
panel.border #f1ece120
panelTitle.activeBorder #93b6ba
panelTitle.activeForeground #f1ece1f5
panelTitle.inactiveForeground #d3cfc7d6
progressBar.background #706354
scrollbar.shadow #4C6663
scrollbarSlider.activeBackground #4d7f91bb
scrollbarSlider.background #4d7f9133
scrollbarSlider.hoverBackground #4d7f9164
selection.background #4C6663
sideBar.background #192f34
sideBar.border #20373C
sideBar.foreground #f1ece1f5
sideBarSectionHeader.background #6599a438
sideBarSectionHeader.border #192f34
sideBarSectionHeader.foreground #C1D6D7
sideBarTitle.foreground #ffffff
statusBar.background #348092
statusBar.border #22333B
statusBar.debuggingBackground #768937
statusBar.debuggingBorder #2B5353
statusBar.debuggingForeground #F1ECE1
statusBar.foreground #F1ECE1
statusBar.noFolderBackground #504A8b
statusBar.noFolderBorder #373554
statusBar.noFolderForeground #F1ECE1
statusBarItem.hoverBackground #DCE5E350
statusBarItem.remoteBackground #192f34
statusBarItem.remoteForeground #F1ECE1
tab.activeBackground #f1ece120
tab.activeBorder #6599A4
tab.activeForeground #fafafaf5
tab.border #ff000000
tab.hoverBackground #f1ece120
tab.inactiveBackground #192f34
tab.inactiveForeground #e8e1f1d6
tab.unfocusedActiveBorder #f1ece1f5
tab.unfocusedActiveForeground #f1ece1f5
tab.unfocusedInactiveForeground #f1ece1f5
terminal.background #1C1B1A
terminal.border #20373C
terminal.foreground #f1ece1f5
terminal.selectionBackground #93b6ba46
terminal.selectionForeground #f1ece1f5
textLink.activeForeground #93B6BA
textLink.foreground #3C6067
titleBar.activeBackground #35535A
titleBar.activeForeground #f1ece1b6
titleBar.border #93b6ba45
titleBar.inactiveBackground #35535A
titleBar.inactiveForeground #f1ece19b
tree.indentGuidesStroke #F1ECE1 entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #e3bc8c —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level #6699CC —
support.other.variable, string.other.link #F2777A —
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit #F99157 —
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 #99C794 —
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter #FAC863 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #E15A60 —
variable.language #E15A60 italic
entity.name.method.js #D8DEE9 —
meta.class-method.js entity.name.function.js, variable.function.constructor #D8DEE9 —
entity.other.attribute-name #BB80B3 —
constant.character.escape #5FB3B3 —
*url*, *link*, *uri* — underline
constant.numeric.line-number.find-in-files - match #AB7967 —
entity.name.filename.find-in-files #99C794 —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #6699CC italic
source.js constant.other.object.key.js string.unquoted.label.js #E15A60 italic
token.error-token #f44747 —
token.debug-token #b267e6 —
source.js entity.other.attribute-name.js — italic
text.html.basic entity.other.attribute-name.html — italic
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 } ! ` ;
}