Nature Syntax Theme

Name: Nature Syntax Theme
Author: Thiago Gomes

Publisher: Thiago GomesThemes in package: 5

A UI and syntax theme for VSCode based on the nature colors.

Open in VS Code GitHub

Color themes

VS Code preview

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

Nature Syntax Theme — Nature Dark

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#0b0c0c
activityBar.border#0d211a
activityBar.foreground#b6dbce
activityBarBadge.background#ad7f4eaa
activityBarBadge.foreground#ffd3fb
badge.background#acd2e0aa
button.background#849b9333
button.foreground#fefefe
button.hoverBackground#acd2e0aa
contrastBorder#0d211a
debugToolBar.background#1a1a1a
diffEditor.insertedTextBackground#5cd69933
dropdown.background#121212
dropdown.border#5cd699
dropdown.foreground#fefefe
editor.actions#8cf28c
editor.background#100f11
editor.findMatchBackground#3e3b4222
editor.findMatchBorder#ffbf0033
editor.findMatchHighlightBackground#3e3b4222
editor.findRangeHighlightBackground#3e3b4222
editor.hoverHighlightBackground#3399ff22
editor.inactiveSelectionBackground#ffaaaa44
editor.lineHighlightBackground#2d2b2255
editor.selectionBackground#baffd122
editor.selectionHighlightBackground#aafff222
editor.selectionHighlightBorder#aafff222
editor.wordHighlightBackground#5cd69922
editor.wordHighlightBorder#d88888
editor.wordHighlightStrongBackground#e0525222
editorCursor.foreground#e0ffa8
editorError.foreground#e05252
editorGroup.background#8c8cf2
editorGroup.border#0d211a
editorGroupHeader.tabsBackground#0b0c0c
editorHoverWidget.background#121212
editorHoverWidget.border#0d211a
editorIndentGuide.background#fefefe33
editorLineNumber.foreground#fefefe55
editorMarkerNavigation.background#8cf28c55
editorRuler.foreground#fefefe33
editorSuggestWidget.background#151515
editorSuggestWidget.border#0d211a
editorSuggestWidget.foreground#fefefe
editorSuggestWidget.selectedBackground#8cf28c55
editorWhitespace.foreground#fefefe22
editorWidget.background#0d0d0d
errorForeground#e05252
focusBorder#0d211a
foreground#fefefe
input.background#000
input.border#0d211a
input.foreground#fff
input.placeholderForeground#abc
inputOption.activeBorder#5cd699
inputValidation.errorBackground#121212
inputValidation.errorBorder#e05252
inputValidation.infoBackground#121212
inputValidation.infoBorder#3399ff
inputValidation.warningBackground#121212
inputValidation.warningBorder#d6d65c
list.activeSelectionBackground#459
list.activeSelectionForeground#fefefe
list.dropBackground#445599
list.focusBackground#954
list.focusForeground#fefefe
list.highlightForeground#fefefe
list.hoverBackground#8c8cf222
list.hoverForeground#fefefe
list.inactiveSelectionBackground#99554422
list.inactiveSelectionForeground#fefefe
notification.background#101010
notification.buttonBackground#849b9388
notification.buttonForeground#fefefe
notification.buttonHoverBackground#8cf2f2aa
notification.errorBackground#e05252aa
notification.errorForeground#fefefe
notification.foreground#fefefe
notification.infoBackground#3399ffaa
notification.infoForeground#fefefe
notification.warningBackground#d6d65caa
notification.warningForeground#fefefe
panel.background#100f11
panel.border#0d211a
panelTitle.activeBorder#444
panelTitle.activeForeground#fefefe
panelTitle.inactiveForeground#9b9b9b
peekView.border#0d211a
peekViewEditor.matchHighlightBackground#000
progressBar.background#f2f28c
scrollbarSlider.activeBackground#99554455
scrollbarSlider.background#44559955
scrollbarSlider.hoverBackground#22997755
selection.background#849b93
sideBar.background#151515
sideBar.border#0d211a
sideBarSectionHeader.background#100f11
sideBarSectionHeader.foreground#fefefe
statusBar.background#0b0c0c
statusBar.border#0d211a
statusBar.debuggingBackground#000
statusBar.foreground#b6dbce
statusBar.noFolderBackground#111
statusBarItem.hoverBackground#9aafd311
tab.activeBackground#000
tab.activeForeground#fefefe
tab.border#0d211a
tab.inactiveBackground#101010
tab.inactiveForeground#666
titleBar.activeBackground#101010
titleBar.activeForeground#fefefe
titleBar.inactiveBackground#151515
titleBar.inactiveForeground#666
widget.shadow#a178c977

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
invalid.deprecated	#1b1b1bFFF	—
markup.changed.diff,token.warn-token	#d6d65c	—
meta.diff.header.from-file,punctuation.definition.from-file.diff	#3399ff	—
markup.inserted.diff	#5cd699	—
markup.deleted.diff,invalid.illegal,invalid.broken,invalid.illegal.non-null-typehinted.php,token.error-token	#e05252	—
support.type.object.console, source.java,meta.definition.variable.name.java, meta.function-call.arguments.python,meta.function-call.python,entity.name.type	#f78f8f	—
support.constant.property-value.scss,support.constant.property-value.css,support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss,support.constant.color.w3c-standard-color-name.css,support.token.decorator.python,meta.function.decorator.identifier.python, meta.require,keyword.other.special-method,support.constant.font-name,entity.other.attribute-name.id,source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json	#F2BF8C	—
support.type.map.key.scss,support.module.node,support.module.node,storage.type.annotation.java,meta.method.java,storage.modifier.import.java,storage.type.java,import.storage.java,meta.function-call.generic.python,control.elements,storage,token.storage.type.java,entity.other.attribute-name.class.css,keyword.other.unit,punctuation.definition.bold,entity.name.section.markdown,punctuation.definition.heading.markdown,punctuation.definition.string.begin.markdown,punctuation.definition.string.end.markdown,punctuation.definition.metadata.markdown,punctuation.definition.metadata.markdown,markup.underline.link.markdown,markup.underline.link.image.markdown,var.this,function.parameter.ruby,function.parameter.cs,function.parameter,function.parameter	#efef88	—
punctuation.definition.string.begin,punctuation.definition.string.end,token.package.keyword,entity.other.inherited-class,none	#8cf28c	—
variable.parameter.function,support.variable.property,support.variable.object.process,support.variable.object.node,support.variable.property.process,punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,storage.type.generic.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,meta.method.body.java,token.variable.parameter.java,meta.function.decorator.python,punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python,support.type.property-name,support.constant.property-value,meta.tag,beginning.punctuation.definition.list.markdown,markup.quote.markdown,punctuation.section.embedded, variable.interpolation,source.json meta.structure.dictionary.json > string.quoted.json,source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string,support.type.property-name.json,meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php,rgb-value,less rgb-value,support.type.primitive.ts, support.type.builtin.ts	#8c8cf2	—
punctuation.terminator.rule.scss,support.constant.math,support.constant.property.math,variable.other.constant,support.constant.json,support.type.posix-reserved.c,token.storage,constant.other.symbol,constant,punctuation.definition.constant,entity.other.attribute-name,markup.italic,punctuation.definition.italic,todo.emphasis,emphasis md,punctuation.definition.variable.php,entity.name.goto-label.php,support.other.php,support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php,text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade,text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade,entity.name.variable.local.cs	#c775f0	—
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end,support.type.object.dom,support.type.vendored.property-name.css,support.type.python,token.package,constant.numeric,none,none,meta.selector,markup.inline.raw.markdown,inline-color-decoration rgb-value,support.type.property-name.json punctuation,support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,selector.sass	#8cf2f2	—
meta.class.body.php,support.class.php,punctuation.definition.bold.markdown,punctuation.definition.metadata.markdown,markup.underline.link.markdown,markup.underline.link.image.markdown,function.parameter,function.parameter,function.parameter.ruby, function.parameter.cs,var.this,variable.language.this.tsx	#f28ce1	—
text.xml,block.scope.end,block.scope.begin,comment,punctuation.definition.comment,comment,comment markup.link	#afafaf	—
text.html.php.blade,text.html.php.laravel-blade,text.html.vue-html,meta.directive.vue	#fefefe	—
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super,var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx,variable.language.special.self.python	—	italic
invalid.unimplemented	#fff	—
string	#affaaf	—
meta.function.c,entity.name.function,entity.name.function.js,support.function,meta.function-call.generic.python	#e6a1c3	—
variable.other.readwrite, support.variable.dom,support.variable.property.dom	#59b359	—
entity.name.tag	#a1c3e6	—
punctuation.definition.tag.begin.html,punctuation.definition.tag.end.html,	#5ca1e6	—
entity.other.attribute-name.html	#CFA1E6	—
variable, support.type.object.module	#8dc3ef	—
variable.other.property.js	#efb3c5	—
keyword.control, variable.language.this.js	#7accad	—
meta.object-literal.key	#60a8f0	—
punctuation,punctuation.definition.block,punctuation.separator.key-value,meta.brace,punctuation.section.array,punctuation.section.array.begin.php,punctuation.section.array.end.php,punctuation.terminator.expression.php,punctuation.separator.delimiter.php,punctuation.definition.class.begin.bracket.curly.php,punctuation.definition.class.end.bracket.curly.php,punctuation.definition.map.begin.bracket.round.scss,punctuation.definition.map.end.bracket.round.scss,punctuation.separator.key-value.scss,meta.structure.dictionary.json,function.brace,punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c,punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,meta.method-call.php	#ffa64d	—
comment,block.scope.end,block.scope.begin,punctuation.definition.comment,comment markup.link	#666	—
storage.modifier	#dbb155	—
keyword.other.namespace.php,keyword.other.use.php,keyword.control.import.python	#8ba6f4	—
keyword.control.flow.python	#91d68b	—
variable.language.special.self.python	#d69cd3	—
keyword.operator.heredoc.php,keyword.operator.nowdoc.php,keyword.operator.type.php,keyword.operator.error-control.php,keyword.operator,keyword.operator.expression.import,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.ternary,keyword.operator.sizeof.c,keyword.operator.less,keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php,keyword.operator.logical.js,keyword.operator.bitwise,keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,support.type.posix-reserved.c,keyword.operator.logical.python,token.storage,keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void,keyword.operator,keyword.operator.comparison.php,keyword.operator.regexp.php	#d69cd3	—
entity.other.alias.php	#8cf28c	—

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