Muted Earth Theme

Name: Muted Earth Theme
Author: Kostas D.

Publisher: Kostas D.Themes in package: 1

Muted Earth Theme

GitHub

VS Code preview

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

Muted Earth Theme — Muted Earth Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ffffff10
activityBar.background#1f1f26
activityBar.border#ffffff10
activityBar.dropBorder#ffffff10
activityBar.foreground#707070
activityBar.inactiveForeground#707070
activityBarBadge.background#ffffff10
activityBarBadge.foreground#909090
badge.background#ffffff10
badge.foreground#909090
breadcrumb.background#0a0a0a
button.background#1f1f26
button.foreground#707070
button.hoverBackground#ffffff10
debugExceptionWidget.background#1f1f26
debugExceptionWidget.border#ffffff10
debugIcon.breakpointForeground#800000
debugTokenExpression.boolean#90a020
debugTokenExpression.error#ff000040
debugTokenExpression.name#b0a090
debugTokenExpression.number#90a020
debugTokenExpression.string#90a020
debugTokenExpression.value#b0a090
debugToolBar.background#1f1f26
descriptionForeground#707070
dropdown.background#1f1f26
dropdown.border#ffffff10
dropdown.foreground#909090
dropdown.listBackground#1f1f26
editor.background#101010
editor.findMatchBackground#ffffff00
editor.findMatchBorder#ffff00a0
editor.findMatchHighlightBackground#ffffff00
editor.findMatchHighlightBorder#ffff00a0
editor.findRangeHighlightBackground#ffffff10
editor.foreground#b0a090
editor.hoverHighlightBackground#ffffff10
editor.inactiveSelectionBackground#1f1f26
editor.lineHighlightBackground#1f1f26
editor.lineHighlightBorder#ffffff10
editor.rangeHighlightBackground#ffffff10
editor.rangeHighlightBorder#ffffff10
editor.selectionBackground#2f2f36
editor.selectionHighlightBackground#ffffff00
editor.selectionHighlightBorder#ffff00a0
editor.wordHighlightBackground#ffffff20
editor.wordHighlightBorder#ffffff10
editor.wordHighlightStrongBorder#ffffff10
editorBracketMatch.background#0000ff
editorBracketMatch.border#0000ff
editorCursor.background#0000ff
editorCursor.foreground#ffff00
editorGroup.border#ffffff10
editorGroup.dropBackground#ffffff10
editorGroup.emptyBackground#1f1f26
editorGroupHeader.border#ffffff10
editorGroupHeader.noTabsBackground#1f1f26
editorGroupHeader.tabsBackground#1f1f26
editorGroupHeader.tabsBorder#ffffff10
editorGutter.background#101010
editorHoverWidget.background#1f1f26
editorHoverWidget.border#ffffff10
editorLineNumber.activeForeground#909090
editorLineNumber.foreground#70707050
editorLink.activeForeground#ffffff
editorMarkerNavigation.background#1f1f26
editorMarkerNavigationError.background#ff000060
editorMarkerNavigationInfo.background#0000ff60
editorMarkerNavigationWarning.background#00ff0060
editorOverviewRuler.border#ffffff10
editorOverviewRuler.bracketMatchForeground#0000ff
editorOverviewRuler.findMatchForeground#3e3e4c
editorOverviewRuler.selectionHighlightForeground#3e3e4c
editorRuler.foreground#707070
editorStickyScroll.background#0a0a0a
editorStickyScrollHover.background#ffffff10
editorSuggestWidget.background#1f1f26
editorSuggestWidget.border#ffffff10
editorSuggestWidget.foreground#707070
editorSuggestWidget.highlightForeground#909090
editorSuggestWidget.selectedBackground#1f1f26
editorWidget.background#1f1f26
editorWidget.border#ffffff10
errorForeground#ff0000
errorLens.errorBackground#ff000040
errorLens.errorForeground#ff0000
errorLens.errorMessageBackground#ff000040
errorLens.hintBackground#17a2a240
errorLens.hintForeground#17a2a2ff
errorLens.hintMessageBackground#17a2a240
errorLens.infoBackground#00ff0040
errorLens.infoForeground#00ff00ff
errorLens.infoMessageBackground#00ff0040
errorLens.warningBackground#ff903040
errorLens.warningForeground#ff9030
errorLens.warningMessageBackground#ff903040
extensionButton.prominentBackground#00ff0030
extensionButton.prominentForeground#909090
extensionButton.prominentHoverBackground#00ff0050
focusBorder#ffffff10
foreground#909090
input.background#ffffff10
input.border#ffffff10
input.foreground#909090
input.placeholderForeground#707070
inputOption.activeBorder#ffffff10
list.activeSelectionBackground#ffffff10
list.activeSelectionForeground#909090
list.deemphasizedForeground#707070
list.dropBackground#ffffff10
list.errorForeground#707070
list.focusBackground#1f1f26
list.focusForeground#909090
list.highlightForeground#909090
list.hoverBackground#ffffff10
list.hoverForeground#707070
list.inactiveFocusBackground#1f1f26
list.inactiveSelectionBackground#ffffff10
list.inactiveSelectionForeground#909090
list.invalidItemForeground#ff0000
list.warningForeground#707070
menu.background#1f1f26
menu.foreground#707070
menu.selectionBackground#ffffff10
menu.selectionBorder#ffffff10
menu.selectionForeground#909090
menu.separatorBackground#707070
menubar.selectionBackground#ffffff10
menubar.selectionForeground#909090
minimapSlider.background#ffffff15
minimapSlider.hoverBackground#ffffff20
notificationCenter.border#ffffff10
notificationCenterHeader.background#1f1f26
notificationCenterHeader.foreground#909090
notifications.background#1f1f26
notifications.border#ffffff10
notifications.foreground#707070
notificationToast.border#ffffff10
panel.background#1f1f26
panel.border#ffffff10
panel.dropBorder#ffffff10
panelInput.border#ffffff10
panelSection.border#ffffff10
panelSection.dropBackground#ffffff10
panelSectionHeader.background#1f1f26
panelSectionHeader.border#ffffff10
panelSectionHeader.foreground#707070
panelTitle.activeBorder#ffffff10
panelTitle.activeForeground#909090
panelTitle.inactiveForeground#707070
peekView.border#ffffff10
peekViewEditor.background#1f1f2690
peekViewEditor.matchHighlightBackground#ffffff10
peekViewEditor.matchHighlightBorder#ffffff10
peekViewEditorGutter.background#1f1f2690
peekViewResult.background#1f1f26
peekViewResult.fileForeground#707070
peekViewResult.lineForeground#707070
peekViewResult.matchHighlightBackground#ffffff10
peekViewResult.selectionBackground#ffffff10
peekViewResult.selectionForeground#b0a090
peekViewTitle.background#1f1f2690
peekViewTitleDescription.foreground#707070
peekViewTitleLabel.foreground#707070
pickerGroup.border#ffffff10
pickerGroup.foreground#707070
progressBar.background#909090
scrollbar.shadow#1d1d1d
scrollbarSlider.activeBackground#ffffff10
scrollbarSlider.background#ffffff10
scrollbarSlider.hoverBackground#ffffff10
selection.background#ffffff10
settings.dropdownBackground#1f1f26
settings.dropdownBorder#ffffff10
settings.dropdownForeground#909090
settings.dropdownListBorder#ffffff10
sideBar.background#1f1f26
sideBar.border#ffffff10
sideBar.dropBackground#ffffff10
sideBar.foreground#707070
sideBarSectionHeader.background#1f1f26
sideBarSectionHeader.border#ffffff10
sideBarSectionHeader.foreground#909090
sideBarTitle.foreground#909090
statusBar.background#1f1f26
statusBar.border#ffffff10
statusBar.debuggingBackground#1f1f26
statusBar.debuggingBorder#ffffff10
statusBar.debuggingForeground#707070
statusBar.foreground#707070
statusBar.noFolderBackground#1f1f26
statusBar.noFolderBorder#ffffff10
statusBar.noFolderForeground#707070
statusBarItem.activeBackground#003343
statusBarItem.hoverBackground#ffffff10
statusBarItem.prominentBackground#001020
statusBarItem.prominentForeground#707070
statusBarItem.prominentHoverBackground#0000004d
statusBarItem.remoteBackground#1f1f26
statusBarItem.remoteForeground#707070
tab.activeBackground#ffffff20
tab.activeBorder#ffffff10
tab.activeForeground#909090
tab.border#ffffff10
tab.hoverBackground#ffffff10
tab.hoverBorder#ffffff10
tab.inactiveBackground#1f1f26
tab.inactiveForeground#707070
tab.unfocusedActiveBackground#ffffff10
tab.unfocusedActiveBorder#ffffff10
tab.unfocusedActiveForeground#909090
tab.unfocusedActiveModifiedBorder#ffffff10
tab.unfocusedHoverBackground#ffffff10
tab.unfocusedHoverBorder#ffffff10
tab.unfocusedInactiveForeground#707070
tab.unfocusedInactiveModifiedBorder#ffffff10
terminal.ansiGreen#00ff55
terminal.ansiRed#f88
terminal.background#1f1f26
terminal.border#ffffff10
terminal.foreground#b0a090
terminal.selectionBackground#2f2f36
terminalCommandDecoration.errorBackground#ff0000
terminalCursor.background#0000ff
terminalCursor.foreground#ffff00
textBlockQuote.background#1f1f26
textBlockQuote.border#ffffff10
textCodeBlock.background#ffffff10
textLink.activeForeground#4f8f8f
textLink.foreground#4f8f8f
textPreformat.foreground#909090
textSeparator.foreground#909090
titleBar.activeBackground#1f1f26
titleBar.activeForeground#707070
titleBar.inactiveBackground#1a1a1f
titleBar.inactiveForeground#707070
widget.shadow#001020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment.block, comment.line, comment, punctuation.definition.annotation, punctuation.definition.comment, storage.type.annotation	#707070	italic
entity.name.function.operator, entity.name.section.markdown, entity.name.type.interface, entity.other.attribute-name, keyword.operator.assignment, keyword.operator, keyword.other.unit, markup.bold.markdown, punctuation, source, storage.modifier.pointer, storage.modifier.reference, support.type.property-name, variable.language.wildcard.java, variable.other.definition, variable.other.object, variable.other.property, variable.parameter	#b0a090	—
constant.character, constant.language, constant.numeric, constant.other, constant.regexp, constant.rgb-value, constant, keyword.other.unit.hexadecimal, keyword.other.unit.suffix, string.interpolated.matlab, string.quoted.double, string.quoted.single	#90a020	—
entity.name.class, entity.name.namespace, entity.name.operator, entity.name.scope-resolution.function.call, entity.name.scope-resolution, entity.name.type, entity.other.attribute, entity.other.inherited-class, keyword.control, keyword.operator.delete, keyword.operator.new, keyword.operator.sizeof, keyword.other.operator, keyword.other.using, keyword, meta.return-type, punctuation.definition.list.begin.markdown, storage.modifier, storage.type.class, storage.type.function, storage.type.modifier, storage.type.primitive, storage.type.struct, storage.type.template, storage.type, support.class, support.other.namespace, support.type, variable.language.this, variable.language	#ca9a2a	—
entity.name.function.preprocessor, entity.name.import, keyword.control.directive, meta.import, meta.preprocessor.include, meta.preprocessor.macro, punctuation.definition.directive, storage.modifier.import, storage.modifier.package, string.quoted.other	#4f8f8f	—
entity.name.function.call, entity.name.function, meta.function-call.generic, support.function.any-method, support.function.builtin, support.function.go, support.function.swift	#d56545	—

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