Feels Kinda Elegant

Name: Feels Kinda Elegant
Author: Funinnate

Publisher: FuninnateThemes in package: 8

A premium 8-theme pack featuring soft light & deep dark color palettes focusing on focus-driven aesthetics and emotional comfort.

Open in VS Code GitHub

Color themes

VS Code preview

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

Feels Kinda Elegant — Matte Saffron

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#F2E8D1
activityBar.foreground#4A3A28
activityBar.inactiveForeground#A99682
badge.background#C26414
badge.foreground#FBF6E9
editor.background#FBF6E9
editor.foreground#4A3A28
editor.inactiveSelectionBackground#F7EFDD
editor.lineHighlightBackground#F3ECD9
editor.lineHighlightBorder#EADFC8
editor.selectionBackground#F2E7D2
editorCursor.foreground#C26414
editorError.foreground#B33A2B
editorInfo.foreground#6E806B
editorLineNumber.activeForeground#4A3A28
editorLineNumber.foreground#B6A890
editorWarning.foreground#C26414
minimap.background#FBF6E9
panel.background#F7F0DE
panel.border#E2D5BB
progressBar.background#C26414
scrollbarSlider.background#C8BDAA66
scrollbarSlider.hoverBackground#C8BDAA99
sideBar.background#F7F0DE
sideBar.foreground#4A3A28
statusBar.background#F2E8D1
statusBar.foreground#4A3A28
tab.activeBackground#FBF6E9
tab.activeForeground#4A3A28
tab.inactiveBackground#F2E8D1
tab.inactiveForeground#A99682
terminal.background#3A1F14
terminal.foreground#E9DCCF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#A89C88	italic
keyword, storage.type, storage.modifier, keyword.control	#000000	bold
string, string.quoted, string.quoted.double, string.quoted.single, string.interpolated, constant.other.symbol, punctuation.definition.string	#7A4C2E	—
variable, variable.other, identifier, entity.name.variable	#4A3A28	—
constant.numeric, constant.language, constant.character	#A66B1A	—
entity.name.type, entity.name.class	#000000	bold
support.function, entity.name.function, meta.function-call	#6A2FA0	bold
punctuation.section, punctuation.section.block, punctuation.section.bracket, punctuation.section.paren	#9E8C76	—
variable.parameter, function.parameter	#7C6A58	—
invalid, invalid.illegal	#FFFFFF	—

VS Code preview

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

Feels Kinda Elegant — Sattva

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#E3E8FA
activityBar.foreground#18212B
activityBar.inactiveForeground#8A94A5
badge.background#89DCEB
badge.foreground#18212B
editor.background#F5F7FD
editor.foreground#18212B
editor.inactiveSelectionBackground#EDF1FB
editor.lineHighlightBackground#E8ECFA
editor.lineHighlightBorder#E0E6F6
editor.selectionBackground#E1E7F7
editorCursor.foreground#18212B
editorError.foreground#D64557
editorInfo.foreground#4C93A7
editorLineNumber.activeForeground#18212B
editorLineNumber.foreground#8A94A5
editorWarning.foreground#B88A2E
minimap.background#F5F7FD
panel.background#EDF1FB
panel.border#D4DDF3
progressBar.background#89DCEB
scrollbarSlider.background#C2C9DAAA
scrollbarSlider.hoverBackground#B1B9CCDD
sideBar.background#EDF1FB
sideBar.foreground#18212B
statusBar.background#E3E8FA
statusBar.foreground#18212B
tab.activeBackground#F5F7FD
tab.activeForeground#18212B
tab.inactiveBackground#E3E8FA
tab.inactiveForeground#8A94A5
terminal.background#AFAFD9
terminal.foreground#18212B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8A94A5	italic
keyword, keyword.control, keyword.operator, storage.type, storage.modifier	#295FAF	bold
string, string.quoted, string.quoted.double, string.quoted.single, string.interpolated, constant.other.symbol, punctuation.definition.string	#8A5835	—
variable, variable.other, identifier, entity.name.variable	#18212B	—
constant.numeric, constant.language, constant.character	#B88A2E	—
entity.name.type, entity.name.class, support.type	#295FAF	bold
support.function, entity.name.function, meta.function-call, variable.function	#4C93A7	bold
punctuation.section, punctuation.section.group, punctuation.section.block, punctuation.section.brace, punctuation.section.bracket, punctuation.section.paren	#7B8698	—
variable.parameter, function.parameter	#3A5664	—
invalid, invalid.illegal	#FFFFFF	—

VS Code preview

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

Feels Kinda Elegant — Serene Mint

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#B5F2D1
activityBar.foreground#08483D
activityBar.inactiveForeground#6A9C8E
editor.background#CFFFE3
editor.foreground#08483D
editor.inactiveSelectionBackground#E0FFF1
editor.lineHighlightBackground#C6F9DD
editor.lineHighlightBorder#C6F9DD
editor.selectionBackground#BFF8D6
editorCursor.foreground#042F28
editorError.foreground#D72638
editorLineNumber.activeForeground#08483D
editorLineNumber.foreground#7EB5A7
panel.background#B5F2D1
panel.border#90E7BF
sideBar.background#B5F2D1
sideBar.foreground#08483D
statusBar.background#B5F2D1
statusBar.foreground#08483D
tab.activeBackground#CFFFE3
tab.activeForeground#08483D
tab.inactiveBackground#B5F2D1
tab.inactiveForeground#6A9C8E
terminal.background#1F6858
terminal.foreground#E9FFF4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#7DB7A3	italic
keyword, storage.type, storage.modifier, keyword.control	#002B7F	bold
string, string.interpolated, string.quoted.double, string.quoted.single, constant.other.symbol, punctuation.definition.string	#0B5E30	italic
variable, variable.other, identifier	#FF8F00	bold
constant.numeric, constant.language	#FF8F00	—
punctuation.section, punctuation.section.group, punctuation.section.block, punctuation.section.braces, punctuation.section.parens, punctuation.section.bracket, punctuation.section.array	#6FAFA5	—
entity.name.type, entity.name.class	#002B7F	bold
support.function, entity.name.function, meta.function-call	#08483D	bold
variable.parameter	#2F8C7B	—
invalid, invalid.illegal	#FFFFFF	—

VS Code preview

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

Feels Kinda Elegant — Verdant Onyx

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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

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#0F1016
activityBar.foreground#EDF2F4
activityBar.inactiveForeground#4B4E53
badge.background#FF0000
badge.foreground#0F1016
editor.background#0F1016
editor.foreground#EDF2F4
editor.inactiveSelectionBackground#4B4E5380
editor.lineHighlightBackground#15161D
editor.lineHighlightBorder#15161D
editor.selectionBackground#4B4E53
editorCursor.foreground#FF0000
editorError.foreground#FF0000
editorLineNumber.activeForeground#EDF2F4
editorLineNumber.foreground#4B4E53
editorWidget.background#0F1016
editorWidget.border#4B4E53
minimap.background#0F1016
panel.background#0F1016
panel.border#4B4E53
progressBar.background#FF0000
scrollbarSlider.background#4B4E5380
scrollbarSlider.hoverBackground#4B4E53CC
sideBar.background#0F1016
sideBar.foreground#EDF2F4
statusBar.background#0F1016
statusBar.foreground#EDF2F4
tab.activeBackground#0F1016
tab.activeForeground#EDF2F4
tab.inactiveBackground#0B0C11
tab.inactiveForeground#4B4E53
terminal.background#0F1016
terminal.foreground#EDF2F4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4B4E53	italic
storage.type, storage.modifier, keyword.operator, keyword.other, keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.return, keyword.control.trycatch	#00FF6A	bold
variable, variable.other, identifier, entity.name.variable	#D25F5F	—
string, string.quoted, string.quoted.double, string.quoted.single, string.interpolated, constant.other.symbol	#F0E6D2	—
constant.numeric, constant.language, constant.character	#8B8E95	—
entity.name.type, entity.name.class, support.type	#FFFFFF	bold
support.function, entity.name.function, meta.function-call, variable.function	#FFFFFF	bold
punctuation.section, punctuation.section.group, punctuation.section.block, punctuation.section.brace, punctuation.section.bracket, punctuation.section.paren	#EDF2F4	—
variable.parameter, function.parameter	#D25F5F	—
invalid, invalid.illegal	#0F1016	—