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

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#d8e4f5
activityBarBadge.background#446743
activityBarBadge.foreground#d8e4f5
badge.background#3b3b3b
badge.foreground#d8e4f5
button.background#446743
button.foreground#d8e4f5
button.hoverBackground#547853
debugToolBar.background#262626
descriptionForeground#bcc8d9b3
diffEditor.insertedTextBackground#39a46233
diffEditor.removedTextBackground#ff000033
dropdown.background#1b1b1b
dropdown.foreground#d8e4f5
editor.background#111111
editor.findMatchBackground#385a37
editor.findMatchBorder#51a254
editor.findMatchHighlightBackground#274127
editor.findRangeHighlightBackground#30303066
editor.foreground#bcc8d9
editor.hoverHighlightBackground#3b3b3b40
editor.inactiveSelectionBackground#303030a4
editor.lineHighlightBackground#1b1b1b
editor.lineHighlightBorder#1b1b1b
editor.linkedEditingBackground#627e604d
editor.selectionBackground#303030
editor.selectionHighlightBackground#95b39318
editor.wordHighlightBackground#51a25430
editor.wordHighlightStrongBackground#3398e730
editorBracketHighlight.foreground1#bcc8d9
editorBracketHighlight.foreground2#8692a2
editorBracketHighlight.foreground3#bcc8d9
editorBracketHighlight.foreground4#8692a2
editorBracketHighlight.foreground5#bcc8d9
editorBracketHighlight.foreground6#8692a2
editorBracketHighlight.unexpectedBracket.foreground#dc6f67
editorBracketMatch.background#5252521a
editorBracketMatch.border#8692a2
editorCodeLens.foreground#bcc8d9
editorCursor.foreground#bcc8d9
editorError.foreground#dc6f67
editorGroup.border#55606e
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#27313f
editorIndentGuide.activeBackground#525252
editorIndentGuide.background#303030
editorInfo.foreground#87d987
editorLineNumber.activeForeground#bcc8d9
editorLineNumber.foreground#55606e
editorLink.activeForeground#51a254
editorOverviewRuler.addedForeground#39a46299
editorOverviewRuler.border#8692a24d
editorOverviewRuler.commonContentForeground#8692a266
editorOverviewRuler.currentContentForeground#bcc8d980
editorOverviewRuler.deletedForeground#dc6f6799
editorOverviewRuler.errorForeground#dc6f67b3
editorOverviewRuler.findMatchForeground#c77e447e
editorOverviewRuler.incomingContentForeground#6493dc80
editorOverviewRuler.infoForeground#6493dc
editorOverviewRuler.modifiedForeground#6493dc99
editorOverviewRuler.rangeHighlightForeground#6493dc99
editorOverviewRuler.selectionHighlightForeground#8692a2cc
editorOverviewRuler.warningForeground#c77e44
editorOverviewRuler.wordHighlightForeground#8692a2cc
editorOverviewRuler.wordHighlightStrongForeground#bcc8d9cc
editorRuler.foreground#55606e
editorSuggestWidget.background#1b1b1b
editorSuggestWidget.border#27313f
editorSuggestWidget.foreground#d8e4f5
editorSuggestWidget.highlightForeground#51a254
editorSuggestWidget.selectedBackground#262626
editorUnnecessaryCode.opacity#000000c0
editorWarning.foreground#c77e44
editorWhitespace.foreground#55606e
editorWidget.background#1b1b1b
editorWidget.border#3b3b3b
errorForeground#dc6f67
extensionButton.prominentBackground#2d6b31
extensionButton.prominentHoverBackground#3f7d42
focusBorder#2d6b31cc
foreground#bcc8d9
gitDecoration.addedResourceForeground#6a9c78
gitDecoration.conflictingResourceForeground#dc6f67
gitDecoration.deletedResourceForeground#bd817a
gitDecoration.ignoredResourceForeground#8692a2
gitDecoration.modifiedResourceForeground#8192b4
gitDecoration.renamedResourceForeground#6a9c78
gitDecoration.stageDeletedResourceForeground#bd817a
gitDecoration.stageModifiedResourceForeground#8192b4
gitDecoration.submoduleResourceForeground#b18768
gitDecoration.untrackedResourceForeground#6a9c78
icon.foreground#bcc8d9
input.background#000000
input.border#27313f
input.foreground#bcc8d9
input.placeholderForeground#8692a2
inputOption.activeBorder#51a254
inputValidation.errorBackground#4a2623
inputValidation.errorBorder#dc6f67
inputValidation.infoBackground#1f314e
inputValidation.infoBorder#6493dc
inputValidation.warningBackground#432a17
inputValidation.warningBorder#c77e44
list.activeSelectionBackground#274127
list.activeSelectionForeground#d8e4f5
list.dropBackground#303030
list.focusBackground#303030
list.highlightForeground#d8e4f5
list.hoverBackground#262626
list.inactiveSelectionBackground#262626
list.inactiveSelectionForeground#d8e4f5
merge.currentContentBackground#39a46233
merge.currentHeaderBackground#39a46280
merge.incomingContentBackground#6493dc33
merge.incomingHeaderBackground#6493dc80
notifications.background#1b1b1b
panel.border#8692a259
panelTitle.activeForeground#d8e4f5
peekView.border#51a254
peekViewEditor.background#1b1b1b66
peekViewEditor.matchHighlightBackground#274127
peekViewEditorGutter.background#1b1b1b66
peekViewResult.background#1b1b1b
peekViewResult.fileForeground#d8e4f5
peekViewResult.matchHighlightBackground#274127
peekViewResult.selectionBackground#51a25433
peekViewResult.selectionForeground#d8e4f5
peekViewTitle.background#1b1b1b66
peekViewTitleDescription.foreground#bcc8d9b3
peekViewTitleLabel.foreground#d8e4f5
progressBar.background#267a30
scrollbar.shadow#000000
scrollbarSlider.activeBackground#8692a280
scrollbarSlider.background#3b3b3b80
scrollbarSlider.hoverBackground#52525280
selection.background#52525280
settings.checkboxBackground#000000
settings.checkboxBorder#55606e
settings.dropdownBackground#000000
settings.dropdownBorder#27313f
settings.dropdownListBorder#27313f
settings.numberInputBackground#000000
settings.numberInputBorder#27313f
settings.textInputBackground#000000
settings.textInputBorder#27313f
sideBar.background#1b1b1b
sideBarSectionHeader.background#262626
sideBarTitle.foreground#bcc8d9
statusBar.background#303030
statusBar.debuggingBackground#303030
statusBar.debuggingForeground#d8e4f5
statusBar.foreground#bcc8d9
statusBar.noFolderBackground#303030
statusBarItem.hoverBackground#3b3b3b
tab.activeBackground#111111
tab.activeForeground#d8e4f5
tab.border#111111
tab.inactiveBackground#262626
tab.inactiveForeground#d8e4f580
tab.unfocusedActiveForeground#d8e4f580
tab.unfocusedInactiveForeground#d8e4f540
terminal.ansiBlack#000000
terminal.ansiBlue#6d7888
terminal.ansiBrightBlack#6d7888
terminal.ansiBrightBlue#6d7888
terminal.ansiBrightCyan#88a586
terminal.ansiBrightGreen#5eaf61
terminal.ansiBrightMagenta#35873c
terminal.ansiBrightRed#b0cfae
terminal.ansiBrightWhite#f4ffff
terminal.ansiBrightYellow#87d987
terminal.ansiCyan#88a586
terminal.ansiGreen#5eaf61
terminal.ansiMagenta#35873c
terminal.ansiRed#b0cfae
terminal.ansiWhite#d8e4f5
terminal.ansiYellow#87d987
terminal.background#111111
terminal.foreground#bcc8d9
textLink.activeForeground#51a254
textLink.foreground#51a254
titleBar.activeBackground#3b3b3b
titleBar.activeForeground#d8e4f5
titleBar.inactiveBackground#3b3b3b
titleBar.inactiveForeground#bcc8d9
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage, entity.name.tag	#8692a2	—
entity.name.tag.html	#87d987	—
entity.name.tag.css	#51a254	—
storage.type, entity.other.attribute-name	#8692a2	italic
entity.name, entity.other.inherited-class	#bcc8d9	—
support	#bcc8d9	italic
variable, variable.language, variable.parameter	#95b393	—
support.variable, support.other.variable	#95b393	—
constant, constant.numeric, constant.language, constant.character.escape, constant.other, keyword.other.unit.px.css	#87d987	—
support.constant	#87d987
string	#51a254	—
comment	#627e60	italic
markup.deleted	#dc6f67	—
markup.inserted	#39a462	—
markup.changed	#6493dc	—
markup.heading, entity.name.section	#87d987	—
markup.bold	#d8e4f5	bold
markup.italic	#bcc8d9	italic
markup.underline	#95b393	underline
markup.inline.raw, markup.fenced_code, markup.raw	#51a254	—
markup.quote	#627e60	—
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}!`;
}