Noctis Uva ft. Winter is comming

Name: Noctis Uva ft. Winter is comming
Author: Hai Hoang

Publisher: Hai HoangThemes in package: 3

A mix between Noctis Uva and Winter is comming theme

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Noctis Uva ft. Winter is comming — Noctis Uva ft. Winter is comming - No bold

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#02233d
activityBar.border#219fd544
activityBar.foreground#fbae00
activityBarBadge.background#219fd5
activityBarBadge.foreground#ffffff
badge.background#219fd5
badge.foreground#ffffff
button.background#03648a
button.foreground#ffffff
button.hoverBackground#219fd5
contrastActiveBorder#122d42
contrastBorder#122d42
debugExceptionWidget.background#02233d
debugToolBar.background#022846
diffEditor.insertedTextBackground#99b76d23
diffEditor.insertedTextBorder#addb6733
diffEditor.removedTextBackground#ef535033
diffEditor.removedTextBorder#ef53504d
dropdown.background#02233d
editor.background#02233d
editor.foreground#a7dbf7
editor.hoverHighlightBackground#7e57c25a
editor.inactiveSelectionBackground#7e57c25a
editor.lineHighlightBackground#0007
editor.rangeHighlightBackground#7e57c25a
editor.selectionBackground#03648a
editor.selectionHighlightBackground#03648a
editor.wordHighlightBackground#32374D
editor.wordHighlightStrongBackground#2E3250
editorBracketMatch.background#219fd54d
editorCursor.foreground#219fd5
editorError.foreground#ef5350
editorGroup.border#219fd544
editorGroupHeader.tabsBackground#02233d
editorGutter.background#02233d
editorHoverWidget.background#02233d
editorHoverWidget.border#5f7e97
editorIndentGuide.activeBackground#C792EA
editorIndentGuide.background#0e2c45
editorLineNumber.foreground#219fd5
editorOverviewRuler.commonContentForeground#7e57c2
editorOverviewRuler.currentContentForeground#7e57c2
editorOverviewRuler.incomingContentForeground#7e57c2
editorSuggestWidget.background#2C3043
editorSuggestWidget.border#2B2F40
editorSuggestWidget.foreground#d6deeb
editorSuggestWidget.highlightForeground#ffffff
editorSuggestWidget.selectedBackground#5f7e97
editorWarning.foreground#ffca28
editorWhitespace.foreground#3B3A32
editorWidget.background#0b2942
editorWidget.border#262A39
errorForeground#EF5350
foreground#d6deeb
gitDecoration.modifiedResourceForeground#219fd5
gitDecoration.untrackedResourceForeground#5ABEB0
input.background#0b253a
input.border#5f7e97
input.foreground#ffffffcc
input.placeholderForeground#5f7e97
inputOption.activeBorder#ffffff
inputValidation.errorBackground#ef5350
inputValidation.errorBorder#ef5350
inputValidation.infoBackground#219fd5
inputValidation.infoBorder#219fd5
inputValidation.warningBackground#ffca28
inputValidation.warningBorder#ffca28
list.activeSelectionBackground#219fd533
list.dropBackground#02233d
list.focusBackground#0e293f
list.focusForeground#ffffff
list.highlightForeground#ffffff
list.hoverBackground#02233d
list.hoverForeground#219fd5
list.inactiveSelectionBackground#0e293f
list.inactiveSelectionForeground#5f7e97
list.invalidItemForeground#975f94
notificationLink.foreground#80CBC4
notifications.background#02233d
notifications.foreground#ffffffcc
notificationToast.border#219fd544
panel.background#02233d
panel.border#219fd5
panelTitle.activeBorder#5f7e97
panelTitle.activeForeground#219fd5
panelTitle.inactiveForeground#5f7e97
peekView.border#f7ecb5
peekViewEditor.background#02233d
peekViewEditor.matchHighlightBackground#7e57c25a
peekViewResult.background#02233d
peekViewResult.matchHighlightBackground#7e57c25a
peekViewResult.selectionBackground#2E3250
peekViewResult.selectionForeground#cecece
peekViewTitle.background#02233d
peekViewTitleDescription.foreground#697098
peekViewTitleLabel.foreground#cecece
pickerGroup.border#219fd544
scrollbar.shadow#010b14
scrollbarSlider.activeBackground#084d8180
scrollbarSlider.background#084d8180
scrollbarSlider.hoverBackground#084d8180
selection.background#4373c2
sideBar.background#02233d
sideBar.border#219fd544
sideBar.foreground#7799bb
sideBarSectionHeader.background#02233d
sideBarSectionHeader.foreground#7799bb
sideBarTitle.foreground#7799bb
statusBar.background#02233d
statusBar.debuggingBackground#b15a91
statusBar.debuggingForeground#48d1cc
statusBar.foreground#fbae00
statusBar.noFolderBackground#02233d
statusBarItem.activeBackground#03648a
statusBarItem.hoverBackground#03648a
statusBarItem.prominentBackground#03648a
statusBarItem.prominentHoverBackground#03648a
tab.activeBackground#0b2942
tab.activeForeground#d2dee7
tab.inactiveBackground#010e1a
tab.inactiveForeground#5f7e97
terminal.ansiBlack#02233d
textLink.activeForeground#98c8ed
textLink.foreground#219fd5
titleBar.activeBackground#03648a
titleBar.activeForeground#eeefff
titleBar.border#303030
titleBar.inactiveBackground#000a11
walkThrough.embeddedEditorBackground#001111
welcomePage.buttonBackground#02233d
welcomePage.buttonHoverBackground#02233d
widget.shadow#219fd5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d5ced9	—
comment, punctuation.definition.comment, punctuation.definition.tag, comment.block.documentation punctuation.definition.bracket	#716c93	—
punctuation, meta.brace, constant.character, constant.escape, text.html.markdown, punctuation.definition.list_item.markdown, keyword.begin.tag.ejs, constant.name.attribute.tag.pug, source.clojure meta.symbol, text.html.markdown punctuation.definition.string, constant.other.description.jsdoc, keyword.other.array.phpdoc.php, keyword.operator.other.powershell	#c5c2d6	—
keyword, keyword.control, keyword.other.template, keyword.other.substitution, storage.modifier, meta.tag.sgml, text.html.markdown markup.inline.raw.markdown, punctuation.accessor, constant.other.color, entity.name.section.markdown, text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, markdown.heading, markup.deleted.git_gutter, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.type.function.pug, text.pug storage.type, text.pug meta.tag.other, source.clojure storage.control, meta.expression.clojure, punctuation.separator.slice.python, punctuation.separator.question-mark.cs, punctuation.definition.parameters.varargs, source.go keyword.operator, punctuation.definition.directive.c, punctuation.separator.pointer-access, punctuation.separator.other.ruby, source.ruby punctuation.separator.key-value, keyword.package.go, keyword.import.go, punctuation.definition.keyword, storage.type.modifier.cpp, punctuation.separator.hash.cs, variable.parameter.rest.lua, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css	#df769b	—
variable, variable.object, variable.other, variable.parameter, support, string constant.other.placeholder, source.css.scss variable, entity.name.module, variable.import.parameter, variable.other.class, meta.toc-list.id.html, source.json meta.structure.dictionary.json support.type.property-name.json, markup.list, meta.var.clojure, source.cs entity.name.variable, source.java meta.class.body.java, entity.name.package.go, source.c, source.cpp, source.go, source.python, meta.function-call.arguments.python, source.ruby, source.coffee.embedded.source, source.coffee, storage.modifier.import, storage.modifier.package, storage.type.annotation, punctuation.definition.annotation, source.groovy.embedded.source, punctuation.definition.variable, source.powershell, variable.other.readwrite.global.ruby punctuation.definition.variable.ruby	#e4b781	—
support.variable.dom, meta.var.expr support.variable.property.dom, meta.function.expression support.variable.property.dom, meta.function-call support.variable.property.dom, switch-expression.expr support.variable.property.dom, meta.field.declaration support.variable.property.dom, meta.method.declaration meta.block meta.block support.variable.property.dom, meta.embedded.expression support.variable.property.dom, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, source.ruby variable.other.readwrite, punctuation.definition.variable.ruby, entity.other.attribute-name.id.css, entity.other.attribute-name.id.css punctuation.definition.entity.css	#edc9af	—
constant, variable.other.constant, support.constant, punctuation.definition.entity, constant.character.entity, support.variable.magic, entity.other.attribute-name, markup.quote, source.python support.type.python, keyword.type.cs, support.type.primitive, meta.type.parameters entity.name.type, meta.type.annotation entity.name.type, punctuation.definition.typeparameters, entity.name.type.type-parameter.cs, punctuation.bracket.angle, entity.name.function.preprocessor.c, storage.class.std.rust, storage.modifier.lifetime.rust, storage.modifier.lifetime.rust entity.name.lifetime.rust, comment.block.documentation entity.name.type, comment.block.documentation.phpdoc.php keyword.other.type.php, support.variable.lua, support.type.vb, source.scala entity.name.class, storage.type.c, storage.type.core.rust, storage.type.primitive, source.java storage.type, source.groovy storage.type, storage.type.php, storage.type.scala, storage.type.cs, source.go storage.type, constant.other.symbol.ruby, constant.other.symbol.ruby punctuation.definition.constant.ruby	#cc9900	—
variable.language, variable.parameter.function.language.special, markup.bold, markup.italic, punctuation.definition.italic, punctuation.definition.bold, entity.name.tag, variable.language punctuation.definition.variable.php, keyword.control.clojure, support.type.exception.python, keyword.other.this.cs, keyword.other.base.cs, keyword.other.var.cs, storage.modifier.super, source.go keyword, keyword.function.go, punctuation.separator.namespace, keyword.other.rust, keyword.other.fn.rust, storage.modifier.const.rust, storage.modifier.static.rust, source.r meta.function.r keyword.control.r, storage.type.def, meta.class.identifier storage.modifier, source.scala keyword.declaration, storage.type, comment.block.documentation punctuation.definition.block.tag	#e97749	—
string, constant.other.symbol, constant.other.key, markup.inserted.git_gutter, punctuation.definition.string, source.css support.constant, markup.raw.block, markup.inline.raw.string.markdown, entity.name.import.go	#49e9a6	—
string.template, punctuation.definition.string.template, string.interpolated.python string.quoted.single.python, string.quoted.double.heredoc	#16b673	—
constant.numeric, constant.language, punctuation.separator.decimal.period.php, keyword.operator.null-conditional.cs, punctuation.separator.question-mark.cs	#7060eb	—
variable.function, 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, keyword.other.unit, entity.name.function, string.other.link, support.type.vendored, support.other.variable, meta.function-call.generic.python, meta.method-call.groovy meta.method.groovy, meta.class.body.groovy meta.method.body.java storage.type.groovy	#16a3b6	—
entity.name, entity.other, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type, support.class, punctuation.definition.parameters, support.function, support.function.construct, markup.changed.git_gutter, markup.underline.link.markdown, markup.underline.link.image.markdown, markup.underline, meta.symbol.namespace.clojure, entity.name.type.namespace.cs, support.class.dart	#49d6e9	—
source.js constant.other.object.key.js string.unquoted.label.js, source.js punctuation.section.embedded, punctuation.definition.template-expression, support.class, entity.name.type, storage.type.string.python, string.interpolated.pug, support.constant.handlebars, source.clojure punctuation.section.set, source.clojure punctuation.section.metadata, entity.global.clojure, source.python meta.function-call.python support.type.python, constant.character.format.placeholder.other.python, entity.other.inherited-class.python, punctuation.definition.interpolation, constant.other.placeholder.go, constant.other.placeholder.c, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby source.ruby, support.constant.math, punctuation.section.embedded.coffee, entity.namespace.r, meta.method-call.groovy storage.type.groovy, punctuation.section.embedded.groovy, entity.name.function-table.lua, source.scala entity.name.class.declaration, constant.character.escape	#49ace9	—
invalid, invalid.illegal	#e3541c	—
comment, storage.type.function, punctuation.definition.comment, entity.other, variable.language, support.type.vendored, support.constant.vendored, source.python support.type.python, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, meta.type.annotation entity.name.type, support.variable.property.dom, variable.other.member.c, keyword.control.pseudo-method.ruby, storage.class.std.rust, support.type.core.rust, variable.other.object.property, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, storage.type.modifier, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, variable.other.table.property.lua, storage.type.scala, meta.function.powershell storage.type.powershell, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby	—	italic
keyword, keyword.control, keyword.other.template, keyword.other.substitution, storage.type.function.arrow, constant.other.color, punctuation.accessor, entity.name.section.markdown, markup.bold, markup.bold string, markdown.heading, text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, storage.type.function.pug, storage.type.function.python, punctuation.definition.typeparameters, storage.type.annotation, punctuation.bracket.angle, keyword.other.new, punctuation.separator.question-mark.cs, storage.type.generic.wildcard, source.go keyword.operator, punctuation.separator.namespace, constant.other.symbol.ruby punctuation.definition.constant.ruby, variable.parameter, support.constant.core.rust, support.function.builtin.rust, storage.type.function.coffee, constant.other.rune, source.cs entity.name.variable.parameter, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby	—
markup.bold.markdown markup.italic.markdown, markup.italic.markdown markup.bold.markdown, markup.quote markup.bold.markdown, markup.bold.markdown markup.italic.markdown string, markup.italic markup.bold string, markup.quote markup.bold.markdown string, text.html punctuation.section.embedded, support.type.primitive, keyword.type.cs, keyword.function.go, variable.other.c, meta.function.constructor.cpp entity.name.function.cpp, meta.function.destructor.cpp entity.name.function.cpp, keyword.other.fn.rust, storage.modifier.lifetime.rust, storage.modifier.lifetime.rust entity.name.lifetime.rust, source.rust meta.attribute.rust, storage.type.php, comment.block.documentation.phpdoc.php keyword.other.type.php, keyword.other.special-method.ruby, variable.other.readwrite.global.ruby, variable.other.readwrite.global.ruby punctuation.definition.variable.ruby	—
keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, keyword.control.pseudo-method, keyword.other.rust, storage.modifier.const.rust, storage.modifier.static.rust, variable.parameter.r, variable.parameter.handlebars, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, keyword.operator.other.powershell, source.lua storage.type.function, source.scala keyword.declaration, source.css variable.parameter, storage.type.primitive.dart, string.interpolated variable.parameter	—
variable.other.property	#49ace9	—
storage.type.annotation.java, punctuation.definition.annotation.java	#2cffff
storage.modifier.import.java	#00ced1	—
keyword.control.java, keyword.control.throw.java, keyword.control.new.java, keyword.other.import.java, keyword.other.package.java	#df769b
keyword.operator.assignment.java, keyword.operator.logical.java, keyword.operator.arithmetic.java, keyword.operator.comparison.java, keyword.operator.increment-decrement.java	#00e6b8	—
storage.type.java	#49ace9	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}