NTL Themes

Name: NTL Themes
Author: T L Naparajith

Publisher: T L NaparajithThemes in package: 4

A collection of soft, easy on the eyes, light and dark themes with beautiful blues and gentle hues.

GitHub

Color themes

VS Code preview

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

NTL Themes — NTL Light Italic Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

actionBar.toggledBackground#dddddd
activityBar.activeBorder#005FB8
activityBar.background#F8F8F8
activityBar.border#E5E5E5
activityBar.foreground#1F1F1F
activityBar.inactiveForeground#616161
activityBarBadge.background#005FB8
activityBarBadge.foreground#FFFFFF
badge.background#CCCCCC
badge.foreground#3B3B3B
button.background#005FB8
button.border#0000001a
button.foreground#FFFFFF
button.hoverBackground#0258A8
button.secondaryBackground#E5E5E5
button.secondaryForeground#3B3B3B
button.secondaryHoverBackground#CCCCCC
chat.slashCommandBackground#D2ECFF
chat.slashCommandForeground#306CA2
checkbox.background#F8F8F8
checkbox.border#CECECE
descriptionForeground#3B3B3B
dropdown.background#FFFFFF
dropdown.border#CECECE
dropdown.foreground#3B3B3B
dropdown.listBackground#FFFFFF
editor.background#FFFFFF
editor.foreground#3B3B3B
editor.inactiveSelectionBackground#E5EBF1
editor.selectionHighlightBackground#ADD6FF80
editorGroup.border#E5E5E5
editorGroupHeader.tabsBackground#F8F8F8
editorGroupHeader.tabsBorder#E5E5E5
editorGutter.addedBackground#2EA043
editorGutter.deletedBackground#F85149
editorGutter.modifiedBackground#005FB8
editorIndentGuide.activeBackground1#939393
editorIndentGuide.background1#D3D3D3
editorLineNumber.activeForeground#171184
editorLineNumber.foreground#6E7681
editorOverviewRuler.border#E5E5E5
editorSuggestWidget.background#F8F8F8
editorWidget.background#F8F8F8
errorForeground#F85149
focusBorder#005FB8
foreground#3B3B3B
icon.foreground#3B3B3B
input.background#FFFFFF
input.border#CECECE
input.foreground#3B3B3B
input.placeholderForeground#868686
inputOption.activeBackground#BED6ED
inputOption.activeBorder#005FB8
inputOption.activeForeground#000000
keybindingLabel.foreground#3B3B3B
list.activeSelectionBackground#E8E8E8
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.focusAndSelectionOutline#005FB8
list.hoverBackground#F2F2F2
menu.border#CECECE
notebook.cellBorderColor#E5E5E5
notebook.selectedCellBackground#C8DDF150
notificationCenterHeader.background#FFFFFF
notificationCenterHeader.foreground#3B3B3B
notifications.background#FFFFFF
notifications.border#E5E5E5
notifications.foreground#3B3B3B
panel.background#F8F8F8
panel.border#E5E5E5
panelInput.border#E5E5E5
panelTitle.activeBorder#005FB8
panelTitle.activeForeground#3B3B3B
panelTitle.inactiveForeground#3B3B3B
peekViewEditor.matchHighlightBackground#BB800966
peekViewResult.background#FFFFFF
peekViewResult.matchHighlightBackground#BB800966
pickerGroup.border#E5E5E5
pickerGroup.foreground#8B949E
ports.iconRunningProcessForeground#369432
progressBar.background#005FB8
quickInput.background#F8F8F8
quickInput.foreground#3B3B3B
searchEditor.textInputBorder#CECECE
settings.dropdownBackground#FFFFFF
settings.dropdownBorder#CECECE
settings.headerForeground#1F1F1F
settings.modifiedItemIndicator#BB800966
settings.numberInputBorder#CECECE
settings.textInputBorder#CECECE
sideBar.background#F8F8F8
sideBar.border#E5E5E5
sideBar.foreground#3B3B3B
sideBarSectionHeader.background#F8F8F8
sideBarSectionHeader.border#E5E5E5
sideBarSectionHeader.foreground#3B3B3B
sideBarTitle.foreground#3B3B3B
statusBar.background#F8F8F8
statusBar.border#E5E5E5
statusBar.debuggingBackground#FD716C
statusBar.debuggingForeground#000000
statusBar.focusBorder#005FB8
statusBar.foreground#3B3B3B
statusBar.noFolderBackground#F8F8F8
statusBarItem.errorBackground#C72E0F
statusBarItem.focusBorder#005FB8
statusBarItem.prominentBackground#6E768166
statusBarItem.remoteBackground#005FB8
statusBarItem.remoteForeground#FFFFFF
tab.activeBackground#FFFFFF
tab.activeBorder#F8F8F8
tab.activeBorderTop#005FB8
tab.activeForeground#3B3B3B
tab.border#E5E5E5
tab.hoverBackground#FFFFFF
tab.inactiveBackground#F8F8F8
tab.inactiveForeground#868686
tab.lastPinnedBorder#D4D4D4
tab.unfocusedActiveBorder#F8F8F8
tab.unfocusedActiveBorderTop#E5E5E5
tab.unfocusedHoverBackground#F8F8F8
terminal.foreground#3B3B3B
terminal.inactiveSelectionBackground#E5EBF1
terminal.tab.activeBorder#005FB8
terminalCursor.foreground#005FB8
textBlockQuote.background#F8F8F8
textBlockQuote.border#E5E5E5
textCodeBlock.background#F8F8F8
textLink.activeForeground#005FB8
textLink.foreground#005FB8
textSeparator.foreground#21262D
titleBar.activeBackground#F8F8F8
titleBar.activeForeground#1E1E1E
titleBar.border#E5E5E5
titleBar.inactiveBackground#F8F8F8
titleBar.inactiveForeground#8B949E
welcomePage.tileBackground#F3F3F3
widget.border#E5E5E5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#000000ff	—
emphasis	—	italic
strong	—	bold
meta.diff.header	#000080	—
comment	#00A300	—
constant.language	#0000DF	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#098658	—
constant.regexp	#811f3f	—
entity.name.tag	#800000	—
entity.name.selector	#800000	—
entity.other.attribute-name	#e50000	—
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.scss	#800000	—
invalid	#cd3131	—
markup.underline	—	underline
markup.bold	#000080	bold
markup.heading	#800000	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#098658	—
markup.deleted	#a31515	—
markup.changed	#0451a5	—
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown	#0451a5	—
markup.inline.raw	#800000	—
punctuation.definition.tag	#800000	—
meta.preprocessor, entity.name.function.preprocessor	#0000DF	—
meta.preprocessor.string	#a31515	—
meta.preprocessor.numeric	#098658	—
meta.structure.dictionary.key.python	#0451a5	—
storage	#0000DF	—
storage.type, keyword.other	#0000DF	italic
storage.modifier, keyword.operator.noexcept	#0000DF	italic
string, meta.embedded.assembly	#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	#0000DF	—
string.regexp	#811f3f	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#0000DF	—
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	#e50000	—
support.type.property-name.json	#0451a5	—
keyword	#0000DF	—
keyword.control	#0000DF	—
keyword.operator	#000000	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#0000DF	—
keyword.other.unit	#098658	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#800000	—
support.function.git-rebase	#0451a5	—
constant.sha.git-rebase	#098658	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#000000	—
variable.language	#0000DF	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#795E26	—
entity.name.class, entity.name.namespace, entity.name.scope-resolution, entity.name.type, entity.other.attribute, storage.type.annotation.groovy, storage.type.annotation.java, storage.type.boolean.go, storage.type.byte.go, storage.type.cs, storage.type.error.go, storage.type.generic.cs, storage.type.generic.groovy, storage.type.generic.java, storage.type.groovy, storage.type.java, storage.type.modifier.cs, storage.type.numeric.go, storage.type.object.array.groovy, storage.type.object.array.java, storage.type.parameters.groovy, storage.type.primitive.array.groovy, storage.type.primitive.array.java, storage.type.primitive.groovy, storage.type.primitive.java, storage.type.rune.go, storage.type.string.go, storage.type.token.java, storage.type.uintptr.go, storage.type.variable.cs, support.class, support.type	#2D94B4	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#2D94B4	—
keyword.control, source.cpp keyword.operator.new, source.cpp keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator	#AF00DB	italic
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#001080	—
variable.other.constant, variable.other.enummember	#0070C1	—
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	#EE0000	—
constant.character, constant.other.option	#0000DF	—
constant.character.escape	#EE0000	—
entity.name.label	#000000	—

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