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

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#f6ddd9
activityBarBadge.background#495f87
activityBarBadge.foreground#f6ddd9
badge.background#3b3b3b
badge.foreground#f6ddd9
button.background#495f87
button.foreground#f6ddd9
button.hoverBackground#5b7199
debugToolBar.background#262626
descriptionForeground#d9c1bdb3
diffEditor.insertedTextBackground#39a46233
diffEditor.removedTextBackground#ff000033
dropdown.background#1b1b1b
dropdown.foreground#f6ddd9
editor.background#111111
editor.findMatchBackground#3d547a
editor.findMatchBorder#5793e9
editor.findMatchHighlightBackground#2b3c59
editor.findRangeHighlightBackground#30303066
editor.foreground#d9c1bd
editor.hoverHighlightBackground#3b3b3b40
editor.inactiveSelectionBackground#303030a4
editor.lineHighlightBackground#1b1b1b
editor.lineHighlightBorder#1b1b1b
editor.linkedEditingBackground#6878994d
editor.selectionBackground#303030
editor.selectionHighlightBackground#9caccf18
editor.wordHighlightBackground#5793e930
editor.wordHighlightStrongBackground#dc6f6730
editorBracketHighlight.foreground1#d9c1bd
editorBracketHighlight.foreground2#a28b88
editorBracketHighlight.foreground3#d9c1bd
editorBracketHighlight.foreground4#a28b88
editorBracketHighlight.foreground5#d9c1bd
editorBracketHighlight.foreground6#a28b88
editorBracketHighlight.unexpectedBracket.foreground#dc6f67
editorBracketMatch.background#5252521a
editorBracketMatch.border#a28b88
editorCodeLens.foreground#d9c1bd
editorCursor.foreground#d9c1bd
editorError.foreground#dc6f67
editorGroup.border#6e5956
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#3e2c29
editorIndentGuide.activeBackground#525252
editorIndentGuide.background#303030
editorInfo.foreground#93c9ff
editorLineNumber.activeForeground#d9c1bd
editorLineNumber.foreground#6e5956
editorLink.activeForeground#5793e9
editorOverviewRuler.addedForeground#39a46299
editorOverviewRuler.border#a28b884d
editorOverviewRuler.commonContentForeground#a28b8866
editorOverviewRuler.currentContentForeground#d9c1bd80
editorOverviewRuler.deletedForeground#dc6f6799
editorOverviewRuler.errorForeground#dc6f67b3
editorOverviewRuler.findMatchForeground#c77e447e
editorOverviewRuler.incomingContentForeground#6493dc80
editorOverviewRuler.infoForeground#6493dc
editorOverviewRuler.modifiedForeground#6493dc99
editorOverviewRuler.rangeHighlightForeground#6493dc99
editorOverviewRuler.selectionHighlightForeground#a28b88cc
editorOverviewRuler.warningForeground#c77e44
editorOverviewRuler.wordHighlightForeground#a28b88cc
editorOverviewRuler.wordHighlightStrongForeground#d9c1bdcc
editorRuler.foreground#6e5956
editorSuggestWidget.background#1b1b1b
editorSuggestWidget.border#3e2c29
editorSuggestWidget.foreground#f6ddd9
editorSuggestWidget.highlightForeground#5793e9
editorSuggestWidget.selectedBackground#262626
editorUnnecessaryCode.opacity#000000c0
editorWarning.foreground#c77e44
editorWhitespace.foreground#6e5956
editorWidget.background#1b1b1b
editorWidget.border#3b3b3b
errorForeground#dc6f67
extensionButton.prominentBackground#3060a0
extensionButton.prominentHoverBackground#4572b3
focusBorder#3060a0cc
foreground#d9c1bd
gitDecoration.addedResourceForeground#6a9c78
gitDecoration.conflictingResourceForeground#dc6f67
gitDecoration.deletedResourceForeground#bd817a
gitDecoration.ignoredResourceForeground#a28b88
gitDecoration.modifiedResourceForeground#8192b4
gitDecoration.renamedResourceForeground#6a9c78
gitDecoration.stageDeletedResourceForeground#bd817a
gitDecoration.stageModifiedResourceForeground#8192b4
gitDecoration.submoduleResourceForeground#b18768
gitDecoration.untrackedResourceForeground#6a9c78
icon.foreground#d9c1bd
input.background#000000
input.border#3e2c29
input.foreground#d9c1bd
input.placeholderForeground#a28b88
inputOption.activeBorder#5793e9
inputValidation.errorBackground#4a2623
inputValidation.errorBorder#dc6f67
inputValidation.infoBackground#1f314e
inputValidation.infoBorder#6493dc
inputValidation.warningBackground#432a17
inputValidation.warningBorder#c77e44
list.activeSelectionBackground#2b3c59
list.activeSelectionForeground#f6ddd9
list.dropBackground#303030
list.focusBackground#303030
list.highlightForeground#f6ddd9
list.hoverBackground#262626
list.inactiveSelectionBackground#262626
list.inactiveSelectionForeground#f6ddd9
merge.currentContentBackground#39a46233
merge.currentHeaderBackground#39a46280
merge.incomingContentBackground#6493dc33
merge.incomingHeaderBackground#6493dc80
notifications.background#1b1b1b
panel.border#a28b8859
panelTitle.activeForeground#f6ddd9
peekView.border#5793e9
peekViewEditor.background#1b1b1b66
peekViewEditor.matchHighlightBackground#2b3c59
peekViewEditorGutter.background#1b1b1b66
peekViewResult.background#1b1b1b
peekViewResult.fileForeground#f6ddd9
peekViewResult.matchHighlightBackground#2b3c59
peekViewResult.selectionBackground#5793e933
peekViewResult.selectionForeground#f6ddd9
peekViewTitle.background#1b1b1b66
peekViewTitleDescription.foreground#d9c1bdb3
peekViewTitleLabel.foreground#f6ddd9
progressBar.background#216dbf
scrollbar.shadow#000000
scrollbarSlider.activeBackground#a28b8880
scrollbarSlider.background#3b3b3b80
scrollbarSlider.hoverBackground#52525280
selection.background#52525280
settings.checkboxBackground#000000
settings.checkboxBorder#6e5956
settings.dropdownBackground#000000
settings.dropdownBorder#3e2c29
settings.dropdownListBorder#3e2c29
settings.numberInputBackground#000000
settings.numberInputBorder#3e2c29
settings.textInputBackground#000000
settings.textInputBorder#3e2c29
sideBar.background#1b1b1b
sideBarSectionHeader.background#262626
sideBarTitle.foreground#d9c1bd
statusBar.background#303030
statusBar.debuggingBackground#303030
statusBar.debuggingForeground#f6ddd9
statusBar.foreground#d9c1bd
statusBar.noFolderBackground#303030
statusBarItem.hoverBackground#3b3b3b
tab.activeBackground#111111
tab.activeForeground#f6ddd9
tab.border#111111
tab.inactiveBackground#262626
tab.inactiveForeground#f6ddd980
tab.unfocusedActiveForeground#f6ddd980
tab.unfocusedInactiveForeground#f6ddd940
terminal.ansiBlack#000000
terminal.ansiBlue#88726f
terminal.ansiBrightBlack#88726f
terminal.ansiBrightBlue#88726f
terminal.ansiBrightCyan#8e9fc1
terminal.ansiBrightGreen#66a1f7
terminal.ansiBrightMagenta#367acd
terminal.ansiBrightRed#b7c7ec
terminal.ansiBrightWhite#fff9f6
terminal.ansiBrightYellow#93c9ff
terminal.ansiCyan#8e9fc1
terminal.ansiGreen#66a1f7
terminal.ansiMagenta#367acd
terminal.ansiRed#b7c7ec
terminal.ansiWhite#f6ddd9
terminal.ansiYellow#93c9ff
terminal.background#111111
terminal.foreground#d9c1bd
textLink.activeForeground#5793e9
textLink.foreground#5793e9
titleBar.activeBackground#3b3b3b
titleBar.activeForeground#f6ddd9
titleBar.inactiveBackground#3b3b3b
titleBar.inactiveForeground#d9c1bd
widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage, entity.name.tag	#a28b88	—
entity.name.tag.html	#93c9ff	—
entity.name.tag.css	#5793e9	—
storage.type, entity.other.attribute-name	#a28b88	italic
entity.name, entity.other.inherited-class	#d9c1bd	—
support	#d9c1bd	italic
variable, variable.language, variable.parameter	#9caccf	—
support.variable, support.other.variable	#9caccf	—
constant, constant.numeric, constant.language, constant.character.escape, constant.other, keyword.other.unit.px.css	#93c9ff	—
support.constant	#93c9ff
string	#5793e9	—
comment	#687899	italic
markup.deleted	#dc6f67	—
markup.inserted	#39a462	—
markup.changed	#6493dc	—
markup.heading, entity.name.section	#93c9ff	—
markup.bold	#f6ddd9	bold
markup.italic	#d9c1bd	italic
markup.underline	#9caccf	underline
markup.inline.raw, markup.fenced_code, markup.raw	#5793e9	—
markup.quote	#687899	—
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}!`;
}