Consonance Themes

Name: Consonance Themes
Author: natecrow

Publisher: natecrowThemes in package: 6

Collection of minimalistic dark color themes that each consist of one primary hue.

GitHub

Color themes

VS Code preview

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

Consonance Themes — Consonance - Gold

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#303030
activityBar.foreground#cde8eb
activityBarBadge.background#685d35
activityBarBadge.foreground#cde8eb
badge.background#3b3b3b
badge.foreground#cde8eb
button.background#685d35
button.foreground#cde8eb
button.hoverBackground#7a6f45
debugToolBar.background#262626
descriptionForeground#b1cccfb3
diffEditor.insertedTextBackground#39a46233
diffEditor.removedTextBackground#ff000033
dropdown.background#1b1b1b
dropdown.foreground#cde8eb
editor.background#111111
editor.findMatchBackground#5c5229
editor.findMatchBorder#a38f32
editor.findMatchHighlightBackground#433b1c
editor.findRangeHighlightBackground#30303066
editor.foreground#b1cccf
editor.hoverHighlightBackground#3b3b3b40
editor.inactiveSelectionBackground#303030a4
editor.lineHighlightBackground#1b1b1b
editor.lineHighlightBorder#1b1b1b
editor.linkedEditingBackground#8076554d
editor.selectionBackground#303030
editor.selectionHighlightBackground#b6aa8718
editor.wordHighlightBackground#a38f3230
editor.wordHighlightStrongBackground#00a5bb30
editorBracketHighlight.foreground1#b1cccf
editorBracketHighlight.foreground2#7c9599
editorBracketHighlight.foreground3#b1cccf
editorBracketHighlight.foreground4#7c9599
editorBracketHighlight.foreground5#b1cccf
editorBracketHighlight.foreground6#7c9599
editorBracketHighlight.unexpectedBracket.foreground#dc6f67
editorBracketMatch.background#5252521a
editorBracketMatch.border#7c9599
editorCodeLens.foreground#b1cccf
editorCursor.foreground#b1cccf
editorError.foreground#dc6f67
editorGroup.border#4b6366
editorGroup.dropBackground#3b3b3b80
editorGroup.emptyBackground#111111
editorGroupHeader.noTabsBackground#111111
editorGroupHeader.tabsBackground#1b1b1b
editorGutter.addedBackground#39a462
editorGutter.background#111111
editorGutter.deletedBackground#dc6f67
editorGutter.modifiedBackground#6493dc
editorHoverWidget.background#1b1b1b
editorHoverWidget.border#1d3437
editorIndentGuide.activeBackground#525252
editorIndentGuide.background#303030
editorInfo.foreground#dcc566
editorLineNumber.activeForeground#b1cccf
editorLineNumber.foreground#4b6366
editorLink.activeForeground#a38f32
editorOverviewRuler.addedForeground#39a46299
editorOverviewRuler.border#7c95994d
editorOverviewRuler.commonContentForeground#7c959966
editorOverviewRuler.currentContentForeground#b1cccf80
editorOverviewRuler.deletedForeground#dc6f6799
editorOverviewRuler.errorForeground#dc6f67b3
editorOverviewRuler.findMatchForeground#c77e447e
editorOverviewRuler.incomingContentForeground#6493dc80
editorOverviewRuler.infoForeground#6493dc
editorOverviewRuler.modifiedForeground#6493dc99
editorOverviewRuler.rangeHighlightForeground#6493dc99
editorOverviewRuler.selectionHighlightForeground#7c9599cc
editorOverviewRuler.warningForeground#c77e44
editorOverviewRuler.wordHighlightForeground#7c9599cc
editorOverviewRuler.wordHighlightStrongForeground#b1cccfcc
editorRuler.foreground#4b6366
editorSuggestWidget.background#1b1b1b
editorSuggestWidget.border#1d3437
editorSuggestWidget.foreground#cde8eb
editorSuggestWidget.highlightForeground#a38f32
editorSuggestWidget.selectedBackground#262626
editorUnnecessaryCode.opacity#000000c0
editorWarning.foreground#c77e44
editorWhitespace.foreground#4b6366
editorWidget.background#1b1b1b
editorWidget.border#3b3b3b
errorForeground#dc6f67
extensionButton.prominentBackground#6c5d16
extensionButton.prominentHoverBackground#7e6e28
focusBorder#6c5d16cc
foreground#b1cccf
gitDecoration.addedResourceForeground#6a9c78
gitDecoration.conflictingResourceForeground#dc6f67
gitDecoration.deletedResourceForeground#bd817a
gitDecoration.ignoredResourceForeground#7c9599
gitDecoration.modifiedResourceForeground#8192b4
gitDecoration.renamedResourceForeground#6a9c78
gitDecoration.stageDeletedResourceForeground#bd817a
gitDecoration.stageModifiedResourceForeground#8192b4
gitDecoration.submoduleResourceForeground#b18768
gitDecoration.untrackedResourceForeground#6a9c78
icon.foreground#b1cccf
input.background#000000
input.border#1d3437
input.foreground#b1cccf
input.placeholderForeground#7c9599
inputOption.activeBorder#a38f32
inputValidation.errorBackground#4a2623
inputValidation.errorBorder#dc6f67
inputValidation.infoBackground#1f314e
inputValidation.infoBorder#6493dc
inputValidation.warningBackground#432a17
inputValidation.warningBorder#c77e44
list.activeSelectionBackground#433b1c
list.activeSelectionForeground#cde8eb
list.dropBackground#303030
list.focusBackground#303030
list.highlightForeground#cde8eb
list.hoverBackground#262626
list.inactiveSelectionBackground#262626
list.inactiveSelectionForeground#cde8eb
merge.currentContentBackground#39a46233
merge.currentHeaderBackground#39a46280
merge.incomingContentBackground#6493dc33
merge.incomingHeaderBackground#6493dc80
notifications.background#1b1b1b
panel.border#7c959959
panelTitle.activeForeground#cde8eb
peekView.border#a38f32
peekViewEditor.background#1b1b1b66
peekViewEditor.matchHighlightBackground#433b1c
peekViewEditorGutter.background#1b1b1b66
peekViewResult.background#1b1b1b
peekViewResult.fileForeground#cde8eb
peekViewResult.matchHighlightBackground#433b1c
peekViewResult.selectionBackground#a38f3233
peekViewResult.selectionForeground#cde8eb
peekViewTitle.background#1b1b1b66
peekViewTitleDescription.foreground#b1cccfb3
peekViewTitleLabel.foreground#cde8eb
progressBar.background#7a6904
scrollbar.shadow#000000
scrollbarSlider.activeBackground#7c959980
scrollbarSlider.background#3b3b3b80
scrollbarSlider.hoverBackground#52525280
selection.background#52525280
settings.checkboxBackground#000000
settings.checkboxBorder#4b6366
settings.dropdownBackground#000000
settings.dropdownBorder#1d3437
settings.dropdownListBorder#1d3437
settings.numberInputBackground#000000
settings.numberInputBorder#1d3437
settings.textInputBackground#000000
settings.textInputBorder#1d3437
sideBar.background#1b1b1b
sideBarSectionHeader.background#262626
sideBarTitle.foreground#b1cccf
statusBar.background#303030
statusBar.debuggingBackground#303030
statusBar.debuggingForeground#cde8eb
statusBar.foreground#b1cccf
statusBar.noFolderBackground#303030
statusBarItem.hoverBackground#3b3b3b
tab.activeBackground#111111
tab.activeForeground#cde8eb
tab.border#111111
tab.inactiveBackground#262626
tab.inactiveForeground#cde8eb80
tab.unfocusedActiveForeground#cde8eb80
tab.unfocusedInactiveForeground#cde8eb40
terminal.ansiBlack#000000
terminal.ansiBlue#637c7f
terminal.ansiBrightBlack#637c7f
terminal.ansiBrightBlue#637c7f
terminal.ansiBrightCyan#a89d7a
terminal.ansiBrightGreen#b19c3f
terminal.ansiBrightMagenta#887616
terminal.ansiBrightRed#d1c6a1
terminal.ansiBrightWhite#e9ffff
terminal.ansiBrightYellow#dcc566
terminal.ansiCyan#a89d7a
terminal.ansiGreen#b19c3f
terminal.ansiMagenta#887616
terminal.ansiRed#d1c6a1
terminal.ansiWhite#cde8eb
terminal.ansiYellow#dcc566
terminal.background#111111
terminal.foreground#b1cccf
textLink.activeForeground#a38f32
textLink.foreground#a38f32
titleBar.activeBackground#3b3b3b
titleBar.activeForeground#cde8eb
titleBar.inactiveBackground#3b3b3b
titleBar.inactiveForeground#b1cccf
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage, entity.name.tag	#7c9599	—
entity.name.tag.html	#dcc566	—
entity.name.tag.css	#a38f32	—
storage.type, entity.other.attribute-name	#7c9599	italic
entity.name, entity.other.inherited-class	#b1cccf	—
support	#b1cccf	italic
variable, variable.language, variable.parameter	#b6aa87	—
support.variable, support.other.variable	#b6aa87	—
constant, constant.numeric, constant.language, constant.character.escape, constant.other, keyword.other.unit.px.css	#dcc566	—
support.constant	#dcc566
string	#a38f32	—
comment	#807655	italic
markup.deleted	#dc6f67	—
markup.inserted	#39a462	—
markup.changed	#6493dc	—
markup.heading, entity.name.section	#dcc566	—
markup.bold	#cde8eb	bold
markup.italic	#b1cccf	italic
markup.underline	#b6aa87	underline
markup.inline.raw, markup.fenced_code, markup.raw	#a38f32	—
markup.quote	#807655	—
invalid	#dc6f67	—

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