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 - Purple

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#ede0d0
activityBarBadge.background#70547c
activityBarBadge.foreground#ede0d0
badge.background#3b3b3b
badge.foreground#ede0d0
button.background#70547c
button.foreground#ede0d0
button.hoverBackground#82658e
debugToolBar.background#262626
descriptionForeground#d1c4b4b3
diffEditor.insertedTextBackground#39a46233
diffEditor.removedTextBackground#ff000033
dropdown.background#1b1b1b
dropdown.foreground#ede0d0
editor.background#111111
editor.findMatchBackground#64496f
editor.findMatchBorder#b67ad0
editor.findMatchHighlightBackground#493451
editor.findRangeHighlightBackground#30303066
editor.foreground#d1c4b4
editor.hoverHighlightBackground#3b3b3b40
editor.inactiveSelectionBackground#303030a4
editor.lineHighlightBackground#1b1b1b
editor.lineHighlightBorder#1b1b1b
editor.linkedEditingBackground#866f8f4d
editor.selectionBackground#303030
editor.selectionHighlightBackground#bca3c518
editor.wordHighlightBackground#b67ad030
editor.wordHighlightStrongBackground#b7873830
editorBracketHighlight.foreground1#d1c4b4
editorBracketHighlight.foreground2#9a8f80
editorBracketHighlight.foreground3#d1c4b4
editorBracketHighlight.foreground4#9a8f80
editorBracketHighlight.foreground5#d1c4b4
editorBracketHighlight.foreground6#9a8f80
editorBracketHighlight.unexpectedBracket.foreground#dc6f67
editorBracketMatch.background#5252521a
editorBracketMatch.border#9a8f80
editorCodeLens.foreground#d1c4b4
editorCursor.foreground#d1c4b4
editorError.foreground#dc6f67
editorGroup.border#675c4f
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#382f22
editorIndentGuide.activeBackground#525252
editorIndentGuide.background#303030
editorInfo.foreground#efafff
editorLineNumber.activeForeground#d1c4b4
editorLineNumber.foreground#675c4f
editorLink.activeForeground#b67ad0
editorOverviewRuler.addedForeground#39a46299
editorOverviewRuler.border#9a8f804d
editorOverviewRuler.commonContentForeground#9a8f8066
editorOverviewRuler.currentContentForeground#d1c4b480
editorOverviewRuler.deletedForeground#dc6f6799
editorOverviewRuler.errorForeground#dc6f67b3
editorOverviewRuler.findMatchForeground#c77e447e
editorOverviewRuler.incomingContentForeground#6493dc80
editorOverviewRuler.infoForeground#6493dc
editorOverviewRuler.modifiedForeground#6493dc99
editorOverviewRuler.rangeHighlightForeground#6493dc99
editorOverviewRuler.selectionHighlightForeground#9a8f80cc
editorOverviewRuler.warningForeground#c77e44
editorOverviewRuler.wordHighlightForeground#9a8f80cc
editorOverviewRuler.wordHighlightStrongForeground#d1c4b4cc
editorRuler.foreground#675c4f
editorSuggestWidget.background#1b1b1b
editorSuggestWidget.border#382f22
editorSuggestWidget.foreground#ede0d0
editorSuggestWidget.highlightForeground#b67ad0
editorSuggestWidget.selectedBackground#262626
editorUnnecessaryCode.opacity#000000c0
editorWarning.foreground#c77e44
editorWhitespace.foreground#675c4f
editorWidget.background#1b1b1b
editorWidget.border#3b3b3b
errorForeground#dc6f67
extensionButton.prominentBackground#7a4d8d
extensionButton.prominentHoverBackground#8c5ea0
focusBorder#7a4d8dcc
foreground#d1c4b4
gitDecoration.addedResourceForeground#6a9c78
gitDecoration.conflictingResourceForeground#dc6f67
gitDecoration.deletedResourceForeground#bd817a
gitDecoration.ignoredResourceForeground#9a8f80
gitDecoration.modifiedResourceForeground#8192b4
gitDecoration.renamedResourceForeground#6a9c78
gitDecoration.stageDeletedResourceForeground#bd817a
gitDecoration.stageModifiedResourceForeground#8192b4
gitDecoration.submoduleResourceForeground#b18768
gitDecoration.untrackedResourceForeground#6a9c78
icon.foreground#d1c4b4
input.background#000000
input.border#382f22
input.foreground#d1c4b4
input.placeholderForeground#9a8f80
inputOption.activeBorder#b67ad0
inputValidation.errorBackground#4a2623
inputValidation.errorBorder#dc6f67
inputValidation.infoBackground#1f314e
inputValidation.infoBorder#6493dc
inputValidation.warningBackground#432a17
inputValidation.warningBorder#c77e44
list.activeSelectionBackground#493451
list.activeSelectionForeground#ede0d0
list.dropBackground#303030
list.focusBackground#303030
list.highlightForeground#ede0d0
list.hoverBackground#262626
list.inactiveSelectionBackground#262626
list.inactiveSelectionForeground#ede0d0
merge.currentContentBackground#39a46233
merge.currentHeaderBackground#39a46280
merge.incomingContentBackground#6493dc33
merge.incomingHeaderBackground#6493dc80
notifications.background#1b1b1b
panel.border#9a8f8059
panelTitle.activeForeground#ede0d0
peekView.border#b67ad0
peekViewEditor.background#1b1b1b66
peekViewEditor.matchHighlightBackground#493451
peekViewEditorGutter.background#1b1b1b66
peekViewResult.background#1b1b1b
peekViewResult.fileForeground#ede0d0
peekViewResult.matchHighlightBackground#493451
peekViewResult.selectionBackground#b67ad033
peekViewResult.selectionForeground#ede0d0
peekViewTitle.background#1b1b1b66
peekViewTitleDescription.foreground#d1c4b4b3
peekViewTitleLabel.foreground#ede0d0
progressBar.background#8d54a6
scrollbar.shadow#000000
scrollbarSlider.activeBackground#9a8f8080
scrollbarSlider.background#3b3b3b80
scrollbarSlider.hoverBackground#52525280
selection.background#52525280
settings.checkboxBackground#000000
settings.checkboxBorder#675c4f
settings.dropdownBackground#000000
settings.dropdownBorder#382f22
settings.dropdownListBorder#382f22
settings.numberInputBackground#000000
settings.numberInputBorder#382f22
settings.textInputBackground#000000
settings.textInputBorder#382f22
sideBar.background#1b1b1b
sideBarSectionHeader.background#262626
sideBarTitle.foreground#d1c4b4
statusBar.background#303030
statusBar.debuggingBackground#303030
statusBar.debuggingForeground#ede0d0
statusBar.foreground#d1c4b4
statusBar.noFolderBackground#303030
statusBarItem.hoverBackground#3b3b3b
tab.activeBackground#111111
tab.activeForeground#ede0d0
tab.border#111111
tab.inactiveBackground#262626
tab.inactiveForeground#ede0d080
tab.unfocusedActiveForeground#ede0d080
tab.unfocusedInactiveForeground#ede0d040
terminal.ansiBlack#000000
terminal.ansiBlue#807567
terminal.ansiBrightBlack#807567
terminal.ansiBrightBlue#807567
terminal.ansiBrightCyan#ae96b7
terminal.ansiBrightGreen#c487de
terminal.ansiBrightMagenta#9a60b4
terminal.ansiBrightRed#d8bee1
terminal.ansiBrightWhite#fffdec
terminal.ansiBrightYellow#efafff
terminal.ansiCyan#ae96b7
terminal.ansiGreen#c487de
terminal.ansiMagenta#9a60b4
terminal.ansiRed#d8bee1
terminal.ansiWhite#ede0d0
terminal.ansiYellow#efafff
terminal.background#111111
terminal.foreground#d1c4b4
textLink.activeForeground#b67ad0
textLink.foreground#b67ad0
titleBar.activeBackground#3b3b3b
titleBar.activeForeground#ede0d0
titleBar.inactiveBackground#3b3b3b
titleBar.inactiveForeground#d1c4b4
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage, entity.name.tag	#9a8f80	—
entity.name.tag.html	#efafff	—
entity.name.tag.css	#b67ad0	—
storage.type, entity.other.attribute-name	#9a8f80	italic
entity.name, entity.other.inherited-class	#d1c4b4	—
support	#d1c4b4	italic
variable, variable.language, variable.parameter	#bca3c5	—
support.variable, support.other.variable	#bca3c5	—
constant, constant.numeric, constant.language, constant.character.escape, constant.other, keyword.other.unit.px.css	#efafff	—
support.constant	#efafff
string	#b67ad0	—
comment	#866f8f	italic
markup.deleted	#dc6f67	—
markup.inserted	#39a462	—
markup.changed	#6493dc	—
markup.heading, entity.name.section	#efafff	—
markup.bold	#ede0d0	bold
markup.italic	#d1c4b4	italic
markup.underline	#bca3c5	underline
markup.inline.raw, markup.fenced_code, markup.raw	#b67ad0	—
markup.quote	#866f8f	—
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}!`;
}