Muted Nature

Name: Muted Nature
Author: Emerion

Publisher: EmerionThemes in package: 2

VS Code color theme in dark, muted colors. Greens, browns, blues. Just like nature.

Open in VS Code GitHub

Color themes

VS Code preview

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

Muted Nature — Muted Nature (Dark)

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#2b2b2b
activityBarBadge.background#214283
button.background#214283
editor.background#252526
editor.foreground#916d3d
editor.inactiveSelectionBackground#3a3d41
editor.selectionBackground#add6ff26
editor.selectionHighlightBackground#add6ff26
editorIndentGuide.activeBackground#3b3b3b
editorIndentGuide.background#2b2b2b
focusBorder#214283
foreground#bbbbbb
gitDecoration.addedResourceForeground#859868
gitDecoration.conflictingResourceForeground#836592
gitDecoration.deletedResourceForeground#9e3725
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#aa9679
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#C6684B
input.placeholderForeground#a6a6a6
list.activeSelectionBackground#214283
list.dropBackground#383b3d
list.focusBackground#214283
menu.background#252526
menu.foreground#bbbbbb
selection.background#214283
settings.numberInputBackground#292929
settings.textInputBackground#292929
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#cccccc33
sideBarTitle.foreground#bbbbbb
statusBar.background#214283
statusBar.debuggingBackground#834521
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#214283
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#ffffff2e
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#00000080
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#0000004d
statusBarItem.remoteBackground#405e99
statusBarItem.remoteForeground#ffffff
tab.activeBackground#214283
tab.hoverBackground#424242
textBlockQuote.background#859868
textLink.activeForeground#5188f7
textLink.foreground#4b6db3
titleBar.activeBackground#252526

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
code-runner.output, code-runner.running, code-runner.output	#D4D4D4	—
meta.embedded, source.groovy.embedded	#D4D4D4	—
emphasis	—	italic
strong	—	bold
header	#214283	—
constant.language	#569CD6	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#B5CEA8	—
constant.regexp	#646695	—
entity.name.tag	#569CD6	—
entity.name.tag.css	#A18B58	—
entity.other.attribute-name	#9CDCFE	—
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.attribute.scss, entity.other.attribute-name.scss	#A18B58	—
invalid	#F44747	—
markup.underline	—	underline
markup.bold	#569CD6	bold
markup.heading	#569CD6	bold
markup.italic	—	italic
markup.inserted	#B5CEA8	—
markup.deleted	#CE9178	—
markup.changed	#569CD6	—
punctuation.definition.quote.begin.markdown	#6A9955	—
punctuation.definition.list.begin.markdown	#6796E6	—
markup.inline.raw	#CE9178	—
punctuation.definition.tag	#808080	—
meta.preprocessor, entity.name.function.preprocessor	#569CD6	—
meta.preprocessor.string	#CE9178	—
meta.preprocessor.numeric	#B5CEA8	—
meta.structure.dictionary.key.python	#9CDCFE	—
meta.diff.header	#569CD6	—
storage	#569CD6	—
storage.type	#569CD6	—
storage.modifier, keyword.operator.noexcept	#569CD6	—
string, meta.embedded.assembly	#CE9178	—
string.tag	#CE9178	—
string.value	#CE9178	—
string.regexp	#D16969	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#916D3D	—
meta.template.expression	#D4D4D4	—
variable.css, variable.scss, variable.other.less, source.coffee.embedded, entity.other.attribute-name.placeholder.css	#7283A0	—
keyword	#569CD6	—
keyword.control	#569CD6	—
keyword.operator	#D4D4D4	—
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	#569CD6	—
keyword.other.unit	#B5CEA8	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#569CD6	—
constant.other.php, constant.other.class.php	#836592	—
support.function.git-rebase	#9CDCFE	—
constant.sha.git-rebase	#B5CEA8	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#D4D4D4	—
variable.language	#569CD6	—
comment	#859868	—
punctuation.definition.comment	#859868	—
string	#859868	—
meta.embedded.assembly	#859868	—
keyword - keyword.operator	#A18B58	—
keyword.control	#A18B58	—
storage	#A18B58	—
storage.type	#A18B58	—
constant.numeric	#C6684B	—
entity.name.type	#916D3D	—
entity.name.class	#916D3D	—
support.type	#916D3D	—
support.class	#916D3D	—
entity.name.function	#916D3D	—
support.function	#916D3D	—
variable	#7283A0	—
entity.name.variable	#7283A0	—
support.type.property-name	#916D3D	—
constant.language	#A18B58	—
constant.numeric	#C6684B	—
entity.name, entity.name.function, entity.name.tag, entity.name.type	#916D3D	—
keyword, keyword.control, keyword.operator	#A18B58	—
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	#916D3D	—
storage, storage.type, storage.modifier	#A18B58	—
variable.language	#A18B58	—
meta.preprocessor, entity.name.function.preprocessor	#A18B58	—
meta.preprocessor.numeric	#C6684B	—
constant.numeric, entity.name.operator.custom-literal.number, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#C6684B	—
variable.other.enummember	#8D7186	—
keyword.other.unit	#916D3D	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#916D3D	—
meta.embedded, source.groovy.embedded	#916D3D	—
text.html.derivative	#AAAAAA	—
entity.other.attribute-name.html, meta.tag.metadata.doctype.html	#A18B58	—
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html	#916D3D	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#836592	—