Skip to main content
Home Theme VS Code Borealis night theme Borealis is an enchanting VS Code theme with a dark background and vivid colors inspired by the Northern Lights. The captivating hues make for an enjoyable and productive coding experience with stunning visual effects.
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 #1d1d2b activityBar.foreground #d7d7d7 activityBarBadge.foreground #0e0e1a breadcrumb.background #1d1d2b breadcrumb.foreground #d7d7d7 editor.background #0e0e1a tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #546E7A italic variable, string constant.other.placeholder #FFEB3B — constant.other.color #FFEB3B — invalid, invalid.illegal #FF5370 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Borealis night theme — Borealis
editorGroupHeader.tabsBackground
#0e0e1a
editorGutter.background #0e0e1a
editorHoverWidget.background #1d1d2b
editorHoverWidget.foreground #8da7f6
editorLineNumber.foreground #8da7f6
editorSuggestWidget.background #1d1d2b
editorSuggestWidget.border #0e0e1a
editorWidget.background #1d1d2b
editorWidget.foreground #d7d7d7
list.activeSelectionBackground #0e0e1a
list.activeSelectionForeground #d7d7d7
list.hoverBackground #09334e
list.inactiveSelectionForeground #8da7f6
menu.background #1d1d2b
menu.foreground #d7d7d7
sideBar.background #1d1d2b
sideBar.foreground #d7d7d7
sideBarTitle.foreground #d7d7d7
statusBar.background #1d1d2b
statusBar.border #0e0e1a
statusBar.focusBorder #0e0e1a
statusBar.foreground #d7d7d7
statusBar.noFolderBackground #1d1d2b
tab.activeBackground #09334e
tab.activeBorder #8da7f6
tab.activeBorderTop #8da7f6
tab.activeForeground #d7d7d7
tab.border #1d1d2b
tab.hoverBackground #09334e
tab.hoverForeground #d7d7d7
tab.inactiveBackground #1d1d2b
tab.inactiveForeground #8da7f6
terminal.ansiBlack #000000
terminal.ansiBlue #0000ff
terminal.ansiBrightBlack #808080
terminal.ansiBrightBlue #0000ff
terminal.ansiBrightCyan #00ffff
terminal.ansiBrightGreen #00ff00
terminal.ansiBrightMagenta #ff00ff
terminal.ansiBrightRed #ff0000
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffff00
terminal.ansiCyan #00ffff
terminal.ansiGreen #00ff00
terminal.ansiMagenta #ff00ff
terminal.ansiRed #ff0000
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffff00
terminal.background #000000
terminal.foreground #ffffff
titleBar.activeBackground #0e0e1a
titleBar.activeForeground #fff
titleBar.inactiveBackground #ffffff 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 #89DDFF —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #f07178 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #82AAFF —
meta.block variable.other #f07178 —
support.other.variable, string.other.link #f07178 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #F78C6C —
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 #C3E88D —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #FFCB6B —
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 —
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 #82AAFF —
entity.other.attribute-name #C792EA —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFCB6B italic
entity.other.attribute-name.class #FFCB6B —
source.sass keyword.control #82AAFF —
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 —
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
variable.language #2196F3 —
entity.name.type.class #E91E63 —
entity.name.function #00BCD4 italic
support.type #00BCD4 italic
meta.definition.variable, meta.object-literal.key #CCD468 italic
meta.object-literal.key #8cd8ed italic
variable.parameter, variable.other.readwrite #FFEB3B —
punctuation.definition.string #8BC34A —
punctuation.section.embedded #FFC107 —
punctuation.terminator.statement, punctuation.separator.comma, punctuation.separator.key-value, punctuation.definition.string.begin, punctuation.definition.string.end, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.relational #e0ad8d —
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*
Borealis night theme | Coding Theme
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 } ! ` ;
}