Skip to main content
Home Theme VS Code Norrsken Official Norrsken Theme. Aurora-inspired theme designed to minimize eye strain and improve syntax highlighting.
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 #b5b5fe10 activityBar.activeBorder #BBC4D880 activityBar.background #101117 activityBar.foreground #F7F7FD activityBar.inactiveForeground #606070 activityBarBadge.background #BBC4D8 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold header #b5b5fe — meta.diff, meta.diff.header #606070 — markup.inserted #AEDCFE —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground #F7F7FD
badge.background #303040
badge.foreground #F7F7FD
breadcrumb.activeSelectionForeground #F7F7FD
breadcrumb.background #101117
breadcrumb.focusForeground #F7F7FD
breadcrumb.foreground #606070
breadcrumbPicker.background #101117
button.background #303040
button.foreground #F7F7FD
button.secondaryBackground #101117
button.secondaryForeground #F7F7FD
button.secondaryHoverBackground #101117
debugToolBar.background #101117
diffEditor.insertedTextBackground #AEDCFE20
diffEditor.removedTextBackground #ff2e1850
dropdown.background #101117
dropdown.border #101117
dropdown.foreground #F7F7FD
editor.background #101117
editor.findMatchBackground #98FFC780
editor.findMatchHighlightBackground #F7F7FD40
editor.findRangeHighlightBackground #303040
editor.foldBackground #10111780
editor.foreground #F7F7FD
editor.hoverHighlightBackground #98FFC750
editor.lineHighlightBorder #303040
editor.rangeHighlightBackground #b5b5fe15
editor.selectionBackground #303040
editor.selectionHighlightBackground #101117
editor.snippetFinalTabstopHighlightBackground #101117
editor.snippetFinalTabstopHighlightBorder #AEDCFE
editor.snippetTabstopHighlightBackground #101117
editor.snippetTabstopHighlightBorder #606070
editor.wordHighlightBackground #98FFC750
editor.wordHighlightStrongBackground #AEDCFE50
editorBracketHighlight.foreground1 #606070
editorBracketHighlight.foreground2 #606070
editorBracketHighlight.foreground3 #606070
editorBracketHighlight.foreground4 #606070
editorBracketHighlight.foreground5 #606070
editorBracketHighlight.foreground6 #606070
editorBracketHighlight.unexpectedBracket.foreground #ff2e18
editorCodeLens.foreground #606070
editorError.foreground #ff2e18
editorGroup.border #b5b5fe
editorGroup.dropBackground #101117
editorGroupHeader.tabsBackground #101117
editorGutter.addedBackground #AEDCFE80
editorGutter.deletedBackground #ff2e1880
editorGutter.modifiedBackground #98FFC780
editorHoverWidget.background #101117
editorHoverWidget.border #606070
editorIndentGuide.activeBackground #F7F7FD45
editorIndentGuide.background #303040
editorLineNumber.foreground #606070
editorLink.activeForeground #98FFC7
editorMarkerNavigation.background #101117
editorOverviewRuler.addedForeground #AEDCFE80
editorOverviewRuler.border #101117
editorOverviewRuler.currentContentForeground #AEDCFE
editorOverviewRuler.deletedForeground #ff2e1880
editorOverviewRuler.errorForeground #ff2e1880
editorOverviewRuler.incomingContentForeground #b5b5fe
editorOverviewRuler.infoForeground #98FFC780
editorOverviewRuler.modifiedForeground #98FFC780
editorOverviewRuler.selectionHighlightForeground #98FFC7
editorOverviewRuler.warningForeground #98FFC780
editorOverviewRuler.wordHighlightForeground #98FFC7
editorOverviewRuler.wordHighlightStrongForeground #AEDCFE
editorRuler.foreground #303040
editorSuggestWidget.background #101117
editorSuggestWidget.foreground #F7F7FD
editorSuggestWidget.selectedBackground #303040
editorWarning.foreground #98FFC7
editorWhitespace.foreground #303040
editorWidget.background #101117
errorForeground #ff2e18
extensionButton.prominentBackground #AEDCFE90
extensionButton.prominentForeground #F7F7FD
extensionButton.prominentHoverBackground #AEDCFE60
focusBorder #606070
foreground #F7F7FD
gitDecoration.conflictingResourceForeground #98FFC7
gitDecoration.deletedResourceForeground #ff2e18
gitDecoration.ignoredResourceForeground #606070
gitDecoration.modifiedResourceForeground #98FFC7
gitDecoration.untrackedResourceForeground #AEDCFE
inlineChat.regionHighlight #101117
input.background #101117
input.border #101117
input.foreground #F7F7FD
input.placeholderForeground #606070
inputOption.activeBorder #b5b5fe
inputValidation.errorBorder #ff2e18
inputValidation.infoBorder #BBC4D8
inputValidation.warningBorder #98FFC7
list.activeSelectionBackground #303040
list.activeSelectionForeground #F7F7FD
list.dropBackground #303040
list.errorForeground #ff2e18
list.focusBackground #303040
list.highlightForeground #98FFC7
list.hoverBackground #303040
list.inactiveSelectionBackground #303040
list.warningForeground #98FFC7
listFilterWidget.background #101117
listFilterWidget.noMatchesOutline #ff2e18
listFilterWidget.outline #101117
merge.currentHeaderBackground #AEDCFE90
merge.incomingHeaderBackground #b5b5fe90
panel.background #101117
panel.border #b5b5fe
panelTitle.activeBorder #BBC4D8
panelTitle.activeForeground #F7F7FD
panelTitle.inactiveForeground #606070
peekView.border #303040
peekViewEditor.background #101117
peekViewEditor.matchHighlightBackground #F5F39480
peekViewResult.background #101117
peekViewResult.fileForeground #F7F7FD
peekViewResult.lineForeground #F7F7FD
peekViewResult.matchHighlightBackground #F5F39480
peekViewResult.selectionBackground #303040
peekViewResult.selectionForeground #F7F7FD
peekViewTitle.background #101117
peekViewTitleDescription.foreground #606070
peekViewTitleLabel.foreground #F7F7FD
pickerGroup.border #b5b5fe
pickerGroup.foreground #98FFC7
progressBar.background #BBC4D8
selection.background #b5b5fe
settings.checkboxBackground #101117
settings.checkboxBorder #101117
settings.checkboxForeground #F7F7FD
settings.dropdownBackground #101117
settings.dropdownBorder #101117
settings.dropdownForeground #F7F7FD
settings.headerForeground #F7F7FD
settings.modifiedItemIndicator #98FFC7
settings.numberInputBackground #101117
settings.numberInputBorder #101117
settings.numberInputForeground #F7F7FD
settings.textInputBackground #101117
settings.textInputBorder #101117
settings.textInputForeground #F7F7FD
sideBar.background #101117
sideBarSectionHeader.background #101117
sideBarSectionHeader.border #101117
sideBarTitle.foreground #F7F7FD
statusBar.background #101117
statusBar.debuggingBackground #ff2e18
statusBar.debuggingForeground #101117
statusBar.foreground #F7F7FD
statusBar.noFolderBackground #101117
statusBar.noFolderForeground #F7F7FD
statusBarItem.prominentBackground #ff2e18
statusBarItem.prominentHoverBackground #98FFC7
statusBarItem.remoteBackground #b5b5fe
statusBarItem.remoteForeground #101117
tab.activeBackground #101117
tab.activeBorderTop #BBC4D880
tab.activeForeground #F7F7FD
tab.border #101117
tab.inactiveBackground #101117
tab.inactiveForeground #606070
terminal.ansiBlack #101117
terminal.ansiBlue #b5b5fe
terminal.ansiBrightBlack #101117
terminal.ansiBrightBlue #b5b5fe
terminal.ansiBrightCyan #98FFC7
terminal.ansiBrightGreen #F5F394
terminal.ansiBrightMagenta #BBC4D8
terminal.ansiBrightRed #ff2e18
terminal.ansiBrightWhite #F7F7FD
terminal.ansiBrightYellow #98FFC7
terminal.ansiCyan #98FFC7
terminal.ansiGreen #F5F394
terminal.ansiMagenta #BBC4D8
terminal.ansiRed #ff2e18
terminal.ansiWhite #F7F7FD
terminal.ansiYellow #98FFC7
terminal.background #101117
terminal.foreground #F7F7FD
titleBar.activeBackground #101117
titleBar.activeForeground #F7F7FD
titleBar.inactiveBackground #101117
titleBar.inactiveForeground #606070
walkThrough.embeddedEditorBackground #101117 invalid #ff2e18 underline italic
invalid.deprecated #F7F7FD underline italic
entity.name.filename #F5F394 —
markup.underline — underline
markup.heading #b5b5fe bold
markup.italic #F5F394 italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext #98FFC7 —
markup.inline.raw, markup.raw.restructuredtext #AEDCFE —
markup.underline.link, markup.underline.link.image #98FFC7 —
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title #BBC4D8 —
entity.name.directive.restructuredtext, markup.quote #F5F394 italic
meta.separator.markdown #606070 —
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown #AEDCFE —
punctuation.definition.constant.restructuredtext #BBC4D8 —
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end #b5b5fe —
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end #F7F7FD —
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end #F5F394 —
entity.name.type.class, entity.name.class #98FFC7 normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special #BBC4D8 italic
entity.other.inherited-class #98FFC7 italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment #606070 —
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class #BBC4D8 —
comment.block.documentation entity.name.type #98FFC7 italic
comment.block.documentation entity.name.type punctuation.definition.bracket #98FFC7 —
comment.block.documentation variable #98FFC7 italic
constant, variable.other.constant #98FFC7 —
constant.character.escape, constant.character.string.escape, constant.regexp #BBC4D8 —
entity.other.attribute-name.parent-selector #BBC4D8 —
entity.other.attribute-name #AEDCFE italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix #98FFC7 —
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter #AEDCFE italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property #AEDCFE italic
meta.decorator variable.other.object #AEDCFE —
keyword, punctuation.definition.keyword #BBC4D8 —
keyword.control.new, keyword.operator.new — bold
support.function.magic, support.variable, variable.other.predefined #BBC4D8 regular
support.function, support.type.property-name — regular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation #BBC4D8 —
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor #BBC4D8 —
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile #BBC4D8 —
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml #98FFC7 —
constant.other.date, constant.other.timestamp #98FFC7 —
variable.other.alias.yaml #AEDCFE italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def #BBC4D8 regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml #BBC4D8 italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type #98FFC7 —
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp #F5F394 —
punctuation.definition.group.capture.regexp #BBC4D8 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #ff2e18 —
punctuation.definition.character-class.regexp #98FFC7 —
punctuation.definition.group.regexp #98FFC7 —
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp #ff2e18 —
meta.assertion.look-ahead.regexp #AEDCFE —
punctuation.definition.string.begin, punctuation.definition.string.end #F5F394 —
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end #F5F394 —
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape #606070 —
variable, constant.other.key.perl, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx #AEDCFE —
support.variable.property #AEDCFE —
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable #98FFC7 italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable #F7F7FD normal
meta.selectionset.graphql variable #F5F394 —
meta.selectionset.graphql meta.arguments variable #F7F7FD —
entity.name.fragment.graphql, variable.fragment.graphql #98FFC7 —
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell #F7F7FD —
source.shell variable.other #BBC4D8 —
support.constant #BBC4D8 normal
meta.scope.prerequisites.makefile #F5F394 —
meta.attribute-selector.scss #F5F394 —
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss #F7F7FD —
meta.preprocessor.haskell #606070 —
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 } !` ;
}
Norrsken | Coding Theme