Dusky

Name: Dusky
Author: Michael Walker

Publisher: Michael WalkerThemes in package: 1

A theme extension for Visual Studio Code that uses a monotone color scheme.

GitHub

VS Code preview

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

Dusky — Dusky

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#5B6BAF
activityBar.background#151515
activityBar.border#151515
activityBar.dropBorder#FFFFFF
activityBar.foreground#5B6BAF
activityBar.inactiveForeground#929292
activityBarBadge.background#5B6BAF
activityBarBadge.foreground#FFFFFF
badge.background#5B6BAF
badge.foreground#FFFFFF
banner.background#5B6BAF
banner.foreground#FFFFFF
banner.iconForeground#3794FF
breadcrumb.activeSelectionForeground#7D8ECC
breadcrumb.background#151515
breadcrumb.focusForeground#5B6BAF
breadcrumb.foreground#797979
breadcrumbPicker.background#151515
button.background#5B6BAF
button.border#5B6BAF
button.foreground#FFFFFF
button.hoverBackground#7D8ECC
button.secondaryBackground#3A3D41
button.secondaryForeground#FFFFFF
button.secondaryHoverBackground#45494E
button.separator#FFFFFF
charts.blue#006CD8
charts.foreground#FFFFFF
charts.green#117512
charts.lines#CCCCCC80
charts.orange#C18E00
charts.purple#B180d7
charts.red#E57373
charts.yellow#CCA700
chat.requestBorder#181818
checkbox.background#151515
checkbox.border#7D8ECC
checkbox.foreground#7D8ECC
checkbox.selectBackground#202020
checkbox.selectBorder#5B6BAF
commandCenter.activeBackground#252525
commandCenter.activeBorder#252525
commandCenter.activeForeground#FFFFFF
commandCenter.background#252525
commandCenter.border#252525
commandCenter.debuggingBackground#252525CC
commandCenter.foreground#7D8ECC
commandCenter.inactiveBorder#7D8ECC
commandCenter.inactiveForeground#7D8ECC
commentsView.resolvedIcon#7D8ECC
commentsView.unresolvedIcon#7D8ECC
debugConsole.errorForeground#F48771
debugConsole.infoForeground#3794FF
debugConsole.sourceForeground#CCCCCC
debugConsole.warningForeground#CCA700
debugConsoleInputIcon.foreground#CCCCCC
debugExceptionWidget.background#420B0D
debugExceptionWidget.border#E57373
debugIcon.breakpointCurrentStackframeForeground#FFCC00
debugIcon.breakpointDisabledForeground#848484
debugIcon.breakpointForeground#E57373
debugIcon.breakpointStackframeForeground#89D185
debugIcon.breakpointUnverifiedForeground#848484
debugIcon.continueForeground#75BEFF
debugIcon.disconnectForeground#E57373
debugIcon.pauseForeground#7D8ECC
debugIcon.restartForeground#C18E00
debugIcon.startForeground#89D185
debugIcon.stepBackForeground#75BEFF
debugIcon.stepIntoForeground#75BEFF
debugIcon.stepOutForeground#75BEFF
debugIcon.stepOverForeground#75BEFF
debugIcon.stopForeground#E57373
debugTokenExpression.boolean#4E94CE
debugTokenExpression.error#E57373
debugTokenExpression.name#C586C0
debugTokenExpression.number#B5CEA8
debugTokenExpression.string#CE9178
debugTokenExpression.value#CCCCCC99
descriptionForeground#FFFFFF
disabledForeground#929292
dropdown.background#202020
dropdown.border#5B6BAF
dropdown.foreground#FFFFFF
dropdown.listBackground#252525
editor.background#151515
editor.foreground#CCCCCC
editor.inactiveSelectionBackground#202020CC
editor.lineHighlightBackground#202020
editor.selectionBackground#222222
editor.selectionHighlightBackground#add6ff26
editorGroupHeader.tabsBackground#242424
editorGutter.background#151515
editorSuggestWidget.background#303030
editorSuggestWidget.highlightForeground#CC6E2F
editorSuggestWidget.selectedBackground#181818
editorWidget.background#202020
errorForeground#E57373
extensionBadge.remoteBackground#5B6BAF
extensionButton.background#5B6BAF
extensionButton.separator#FFFFFF
extensionIcon.preReleaseForeground#44987ECC
extensionIcon.starForeground#FFC66DCC
focusBorder#262626
foreground#EBEBEB
icon.foreground#929292
input.background#151515
input.border#7D8ECC
input.foreground#FFFFFF
input.placeholderForeground#797979
inputOption.activeBackground#5B6BAF
inputOption.activeBorder#202020
inputOption.activeForeground#FFFFFF
inputOption.hoverBackground#5B6BAF
inputValidation.errorBackground#E57373
inputValidation.errorBorder#E57373
inputValidation.errorForeground#FFFFFF
keybindingLabel.background#5B6BAF
keybindingLabel.border#5B6BAF
keybindingLabel.bottomBorder#5B6BAF
list.activeSelectionBackground#181818
list.activeSelectionForeground#5B6BAF
list.activeSelectionIconForeground#5B6BAF
list.dropBackground#222222
list.errorForeground#FF7E79
list.filterMatchBackground#FF7E79
list.filterMatchBorder#E57373
list.hoverBackground#151515
listFilterWidget.background#E57373
menu.background#202020
menu.border#202020
menu.foreground#FFFFFF
menu.selectionBackground#151515
menu.selectionBorder#181818
menu.selectionForeground#7D8ECC
menu.separatorBackground#181818
menubar.selectionBackground#151515
menubar.selectionBorder#202020
menubar.selectionForeground#FFFFFF
notificationsErrorIcon.foreground#E57373
notificationsInfoIcon.foreground#006CD8
notificationsWarningIcon.foreground#C18E00
panel.background#202020
panel.border#151515
panel.dropBorder#202020
panelInput.border#151515
panelSection.border#151515
panelSection.dropBackground#151515
panelSectionHeader.background#151515
panelSectionHeader.border#151515
panelSectionHeader.foreground#FFFFFF
panelTitle.activeBorder#7D8ECC
panelTitle.activeForeground#7D8ECC
panelTitle.inactiveForeground#FFFFFF
pickerGroup.border#101010
pickerGroup.foreground#5B6BAF
quickInput.background#202020
quickInput.foreground#FFFFFF
quickInputList.focusBackground#202020
quickInputList.focusForeground#7D8ECC
quickInputList.focusIconForeground#7D8ECC
quickInputTitle.background#151515
sash.hoverBorder#181818
search.resultsInfoForeground#7D8ECC
searchEditor.findMatchBackground#282828
searchEditor.findMatchBorder#282828
searchEditor.textInputBorder#5B6BAF
selection.background#5B6BAF
settings.headerForeground#7D8ECC
settings.modifiedItemIndicator#7D8ECC
sideBar.background#202020
sideBar.border#151515
sideBar.dropBackground#242424
sideBar.foreground#FFFFFF
sideBarSectionHeader.background#151515
sideBarSectionHeader.border#151515
sideBarSectionHeader.foreground#7D8ECC
sideBarTitle.foreground#EFEFEF
statusBar.background#151515
statusBar.border#151515
statusBar.debuggingBackground#151515
statusBar.debuggingBorder#151515
statusBar.debuggingForeground#7D8ECC
statusBar.focusBorder#7D8ECC
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#151515
statusBar.noFolderBorder#151515
statusBar.noFolderForeground#FFFFFF
statusBarItem.activeBackground#181818
statusBarItem.compactHoverBackground#262626
statusBarItem.errorBackground#E57373
statusBarItem.errorForeground#FFFFFF
statusBarItem.focusBorder#7D8ECC
statusBarItem.hoverBackground#181818
statusBarItem.prominentBackground#181818
statusBarItem.prominentForeground#7D8ECC
statusBarItem.prominentHoverBackground#181818
statusBarItem.remoteBackground#151515
statusBarItem.warningBackground#C18E00
statusBarItem.warningForeground#151515
tab.activeBackground#151515
tab.activeBorderTop#7D8ECC
tab.activeForeground#FFFFFF
tab.hoverBackground#101010
tab.inactiveBackground#242424
terminal.selectionBackground#151515
textBlockQuote.background#151515
textBlockQuote.border#181818
textCodeBlock.background#151515
textLink.activeForeground#929292
textLink.foreground#7D8ECC
textPreformat.foreground#929292
textSeparator.foreground#181818
titleBar.activeBackground#151515
titleBar.activeForeground#FFFFFF
titleBar.border#151515
titleBar.inactiveBackground#242424
titleBar.inactiveForeground#EFEFEF
toolbar.activeBackground#202020
toolbar.hoverBackground#202020
toolbar.hoverOutline#181818
walkThrough.embeddedEditorBackground#151515
walkthrough.stepTitle.foreground#FFFFFF
welcomePage.background#151515
welcomePage.progress.background#151515
welcomePage.progress.foreground#EFEFEF
welcomePage.tileBackground#151515
welcomePage.tileBorder#181818
welcomePage.tileHoverBackground#181818
widget.border#101010
widget.shadow#151515
window.activeBorder#151515
window.inactiveBorder#242424

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, strong, storage.type, storage.modifier, constant.language, keyword.control, keyword.control, variable.language	—	bold
emphasis, comment, markup.italic	—	italic
markup.underline	—	underline
annotation, meta.return-type, support.class, support.type, entity.name.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.java, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, meta.attribute.rust	#4EC9B0	—
support.class, entity.name.class, support.type, entity.name.type, punctuation.definition.tag, entity.name.function.python, meta.function-call.generic.python, entity.name.function, support.function, support.constant.handlebars	#FFC66D	—
constant.language, meta.preprocessor, meta.preprocessor.string, meta.diff.header, storage.type, storage.modifier, keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, variable.language	#CC7832	—
markup.bold, markup.heading, markup.changed, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js, variable.other.object, variable.other.object.property, support.class.dom, meta.function-call, entity.name.type.module, variable.other.readwrite, variable.other.constant.ts, variable.parameter, variable.other.readwrite.alias, keyword.operator, source.python, storage.type.function.arrow, meta.definition.variable.name, support.variable	#A9B7C6	—
meta.structure.dictionary.key.python, support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable, variable.other.less, variable.other.property, support.variable.property.dom, entity.other.inherited-class, support.function.git-rebase, support.function.magic.python, variable.language.special.self.python, variable.parameter.function.language.special.self.python, meta.object-literal.key, meta.object-literal.key entity.name.function, variable.parameter.url.css, meta.var.expr.js	#7D8ECC	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss, entity.name.tag.css, entity.name.tag, meta.selector	#D7BA7D	—
markup.deleted, markup.inline.raw, meta.preprocessor.string, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#CE9178	—
comment, entity.name.type.instance.jsdoc, keyword.other.phpdoc.php, keyword.other.type.php, storage.type.class.jsdoc, variable.other.jsdoc	#808080	—
markup.inserted, meta.preprocessor.numeric, keyword.other.unit, constant.sha.git-rebase	#B5CEA8	—
string, string.tag, string.value, string.regexp	#6A8759	—
constant.numeric	#6897BB	—
constant.regexp	#646695	—
entity.other.attribute-name	#BABABA	—
invalid, storage, token.error-token	#F44747	—
beginning.punctuation.definition.quote.markdown	#608B4E	—
beginning.punctuation.definition.list.markdown, token.info-token	#6796E6	—
storage.modifier.import.java, storage.modifier.package.java	#D4D4D4	—
token.warn-token	#cd9731	—
token.debug-token	#B267E6	—

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