Niketa Future Theme Light

Name: Niketa Future Theme Light
Author: selfrefactor

Publisher: selfrefactorThemes in package: 18

Large collection of handmade light themes

Open in VS Code

Color themes

VS Code preview

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

Niketa Future Theme Light — AdvancedCat

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.

activityBar.background#C4BE9D
badge.background#e7e7e7
badge.foreground#3f7063
diffEditor.insertedTextBackground#9c824a55
diffEditor.removedTextBackground#64B5F655
editor.background#FAF8F3
editor.findMatchBackground#87a192
editor.findMatchHighlightBackground#71aac355
editor.findRangeHighlightBackground#3f706366
editor.foldBackground#fafafa
editor.inactiveSelectionBackground#aaab9c66
editor.lineHighlightBackground#FAF8F3
editor.lineHighlightBorder#9c824a
editor.selectionBackground#cdd0d255
editor.selectionHighlightBackground#cdd0d277
editor.wordHighlightBackground#aa769b55
editor.wordHighlightStrongBackground#410a0b44
editorBracketMatch.background#e7e7e7
editorBracketMatch.border#fafafa
editorCursor.foreground#544
editorGroupHeader.tabsBackground#cdd0d2
editorHoverWidget.background#d1d3d4
editorHoverWidget.border#d78d9f
editorLineNumber.foreground#2a3343a9
editorLink.activeForeground#034694
editorSuggestWidget.background#d1d3d4
editorSuggestWidget.border#d78d9f
editorSuggestWidget.foreground#2a3343
editorSuggestWidget.highlightForeground#820014
editorSuggestWidget.selectedBackground#2c3d5244
editorWidget.background#cdd0d2
editorWidget.border#d78d9f
errorForeground#B1365Bf3
focusBorder#525e54
foreground#24283b
git.color.modified#4d0e0b
gitDecoration.addedResourceForeground#53245b
gitDecoration.modifiedResourceForeground#034694
gitDecoration.untrackedResourceForeground#aa769b
list.activeSelectionBackground#d1343822
list.activeSelectionForeground#2a3343
list.dropBackground#db82d6cc
list.errorForeground#a50044
list.focusBackground#6d50a188
list.highlightForeground#4d0e0b
list.hoverBackground#ad680066
list.hoverForeground#e7e7e7
list.inactiveFocusBackground#885f66cc
list.inactiveSelectionBackground#eae3cd55
list.inactiveSelectionForeground#4d0e0b
scrollbar.shadow#cf6f4b
scrollbarSlider.background#cdd0d2
scrollbarSlider.hoverBackground#C4BE9D
selection.background#ebe6d9
sideBar.background#cdd0d2
sideBar.border#8382ae
sideBar.foreground#85483d
sideBarSectionHeader.background#aebabe
sideBarSectionHeader.foreground#2a3343
sideBarTitle.foreground#30322e
statusBar.background#cdd0d2
statusBar.foreground#35495f
tab.activeBackground#FAF8F3
tab.activeBorder#35495f
tab.activeForeground#35495f
tab.border#cdd0d2
tab.inactiveBackground#cdd0d2
tab.inactiveForeground#fff
tab.unfocusedActiveBackground#cdd0d2
tab.unfocusedActiveBorder#cdd0d2
tab.unfocusedActiveForeground#aa769b
widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity.name.tag	#1e7abc	underline
source.go	#9d254d	—
source.json	#9d254d	—
source.css	#9d254d	—
markup.italic	#1a6ba6	—
punctuation.accessor.js	#1e7abc	—
punctuation.accessor.jsx	#1e7abc	—
punctuation.accessor.ts	#186399	—
punctuation.accessor.tsx	#1e7abc	—
source.js	#165a8c	—
source.jsx	#1e7abc	—
source.ts	#186399	—
source.tsx	#1a6ba6	—
storage.modifier.js	#2288d2	—
storage.modifier.jsx	#3496df	—
storage.modifier.ts	#1e7abc	—
storage.modifier.tsx	#1e7abc	—
storage.type	#2690dc	—
string.quoted.single.js	#1a6ba6	—
string.quoted.single.jsx	#1e7abc	—
string.quoted.single.ts	#1e7abc	—
string.quoted.single.tsx	#2690dc	—
support.function.dom.js	#165a8c	—
support.function.dom.jsx	#1e7abc	—
support.function.dom.ts	#1e7abc	—
support.function.dom.tsx	#1e7abc	—
support.variable.property.js	#186399	—
support.variable.property.jsx	#1e7abc	—
support.variable.property.ts	#1e7abc	—
support.variable.property.tsx	#1e7abc	—
variable.language.constructor	#165a8c	underline
variable.language.this	#165a8c	—
meta.var.expr.js	#3496df	—
meta.var.expr.jsx	#2288d2	—
meta.var.expr.ts	#1e7abc	—
meta.var.expr.tsx	#1e7abc	—
variable	#0c1109	—
keyword.control.import.js	#0c1109	—
keyword.control.import.jsx	#192112	—
keyword.control.import.ts	#000000	—
keyword.control.import.tsx	#25321b	—
keyword.control.from.js	#344526	—
keyword.control.from.jsx	#192112	—
keyword.control.from.ts	#344526	—
keyword.control.from.tsx	#192112	—
keyword.control.export.js	#192112	—
keyword.control.export.jsx	#192112	—
keyword.control.export.ts	#192112	—
keyword.control.export.tsx	#0c1109	—
variable.parameter	#192112	—
support.function	#192112	—
meta.import.js	#25321b	—
meta.import.jsx	#192112	—
meta.import.ts	#192112	—
meta.import.tsx	#192112	—
meta.paragraph.markdown	#192112	—
entity.other.attribute-name.js	#192112	—
entity.other.attribute-name.jsx	#0c1109	—
entity.other.attribute-name.ts	#25321b	—
entity.other.attribute-name.tsx	#0c1109	—
string.quoted.single.js	#344526	—
string.quoted.single.jsx	#192112	—
string.quoted.single.ts	#0c1109	—
string.quoted.single.tsx	#2d3b20	—
string.quoted.single.json	#192112	—
support.class.promise.js	#0c1109	—
support.class.promise.jsx	#000000	—
support.class.promise.ts	#192112	—
support.class.promise.tsx	#0c1109	—
support.type.object.console.js	#2d3b20	—
support.type.object.console.jsx	#192112	—
support.type.object.console.ts	#0c1109	—
support.type.object.console.tsx	#000000	—
support.function.console.js	#192112	—
support.function.console.jsx	#25321b	—
support.function.console.ts	#192112	—
support.function.console.tsx	#344526	—
punctuation.definition.block.js	#25321b	—
punctuation.definition.block.jsx	#2d3b20	—
punctuation.definition.block.ts	#2d3b20	—
punctuation.definition.block.tsx	#000000	—
keyword	#9d254d	—
keyword.control.default.js	#9d254d	—
keyword.control.default.jsx	#9d254d	—
keyword.control.default.ts	#ca3062	—
keyword.control.default.tsx	#9d254d	—
support.type.object.module.js	#9d254d	—
support.type.object.module.jsx	#b22a56	—
support.type.object.module.ts	#9d254d	—
support.type.object.module.tsx	#9d254d	—
keyword.control.module.js	#7c1d3c	—
keyword.control.module.jsx	#9d254d	—
keyword.control.module.ts	#882042	—
keyword.control.module.tsx	#b22a56	—
keyword.operator.accessor	#9d254d	—
invalid	#9d254d	underline
constant.numeric	#9d254d	—
constant.language.boolean	#b22a56	—
constant.language.null.js	#9d254d	—
constant.language.null.jsx	#701a36	—
constant.language.null.ts	#9d254d	—
constant.language.null.tsx	#882042	—
entity.name.class	#9d254d	underline
entity.name.function	#9d254d	underline
entity.name.type	#be2d5c	underline
markup.heading.markdown	#ca3062	—
punctuation.separator.comma.js	#9d254d	—
punctuation.separator.comma.jsx	#9d254d	—
punctuation.separator.comma.ts	#882042	—
punctuation.separator.comma.tsx	#701a36	—
support.variable.property.js	#882042	—
support.variable.property.jsx	#9d254d	—
support.variable.property.ts	#701a36	—
support.variable.property.tsx	#9d254d	—
support.type.primitive.js	#9d254d	—
support.type.primitive.jsx	#701a36	—
support.type.primitive.ts	#b22a56	—
support.type.primitive.tsx	#be2d5c	—
punctuation.definition.parameters.begin.js	#5d3547	—
punctuation.definition.parameters.begin.jsx	#91526f	—
punctuation.definition.parameters.begin.ts	#874d68	—
punctuation.definition.parameters.begin.tsx	#6d3e54	—
punctuation.definition.parameters.end.js	#492a38	—
punctuation.definition.parameters.end.jsx	#492a38	—
punctuation.definition.parameters.end.ts	#6d3e54	—
punctuation.definition.parameters.end.tsx	#7d4760	—
punctuation.definition.parameters.end.js	#7d4760	—
punctuation.definition.parameters.end.jsx	#5d3547	—
punctuation.definition.parameters.end.ts	#6d3e54	—
punctuation.definition.parameters.end.tsx	#5d3547	—
markup.quote	#6d3e54	—
meta.tag.js	#6d3e54	—
meta.tag.jsx	#6d3e54	—
meta.tag.ts	#6d3e54	—
meta.tag.tsx	#532f40	—
meta.parameters.js	#874d68	—
meta.parameters.jsx	#6d3e54	—
meta.parameters.ts	#874d68	—
meta.parameters.tsx	#7d4760	—
meta.brace.square.js	#6d3e54	—
meta.brace.square.jsx	#6d3e54	—
meta.brace.square.ts	#5d3547	—
meta.brace.square.tsx	#5d3547	—
variable.other.class.js	#5d3547	—
variable.other.class.jsx	#6d3e54	—
variable.other.class.ts	#5d3547	—
variable.other.class.tsx	#5d3547	—
punctuation.separator.key-value.js	#5d3547	—
punctuation.separator.key-value.jsx	#6d3e54	—
punctuation.separator.key-value.ts	#6d3e54	—
punctuation.separator.key-value.tsx	#5d3547	—
storage.modifier.async.js	#7d4760	—
storage.modifier.async.jsx	#532f40	—
storage.modifier.async.ts	#5d3547	—
storage.modifier.async.tsx	#5d3547	—
meta.brace.round.js	#6d3e54	—
meta.brace.round.jsx	#874d68	—
meta.brace.round.ts	#532f40	—
meta.brace.round.tsx	#5d3547	—
constant.other.object.key.js	#7d4760	—
constant.other.object.key.jsx	#7d4760	—
constant.other.object.key.ts	#6d3e54	—
constant.other.object.key.tsx	#5d3547	—
entity.name.function.method	#6d3e54	—
string.template	#6d3e54	—
support.type.property-name.json	#5d3547	—
variable.other.property.js	#492a38	—
variable.other.property.jsx	#532f40	—
variable.other.property.ts	#7d4760	—
variable.other.property.tsx	#6d3e54	—
support.constant	#4c5d3d	—
punctuation.separator.parameter.js	#4c5d3d	—
punctuation.separator.parameter.jsx	#60764d	—
punctuation.separator.parameter.ts	#4c5d3d	—
punctuation.separator.parameter.tsx	#4c5d3d	—
constant.character	#3f4e33	—
constant.language	#4c5d3d	—
constant.other	#4c5d3d	—
comment	#303b27	—
markup.italic	#3f4e33	—
meta.object-literal.key.js	#4c5d3d	—
meta.object-literal.key.jsx	#4c5d3d	—
meta.object-literal.key.ts	#3f4e33	—
meta.object-literal.key.tsx	#3f4e33	—
comment.block.documentation	#3f4e33	—
comment.line.double-slash	#60764d	—
punctuation.accessor.js	#3f4e33	—
punctuation.accessor.jsx	#4c5d3d	—
punctuation.accessor.ts	#4c5d3d	—
punctuation.accessor.tsx	#4c5d3d	—
variable.language	#4c5d3d	—
variable.other.object.js	#303b27	—
variable.other.object.jsx	#4c5d3d	—
variable.other.object.ts	#4c5d3d	—
variable.other.object.tsx	#60764d	—
variable.other.readwrite	#38442d	—
variable.other.readwrite.js	#4c5d3d	—
variable.other.readwrite.jsx	#3f4e33	—
variable.other.readwrite.ts	#4c5d3d	—
variable.other.readwrite.tsx	#4c5d3d	—
entity.other.inherited-class	#687f53	—
support.class.builtin.js	#4c5d3d	—
support.class.builtin.jsx	#687f53	—
support.class.builtin.ts	#4c5d3d	—
support.class.builtin.tsx	#3f4e33	—
meta.tag.attributes.js	#60764d	—
meta.tag.attributes.jsx	#4c5d3d	—
meta.tag.attributes.ts	#4c5d3d	—
meta.tag.attributes.tsx	#4c5d3d	—

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