Github Dank Dimmed

Name: Github Dank Dimmed
Author: Zytesas

Publisher: ZytesasThemes in package: 1

Redesigned GitHub Dark Dimmed that is just slightly more dank. Created to suit my needs.

Open in VS Code GitHub

VS Code preview

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

Github Dank Dimmed — Github Dank Dimmed

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#7BCCB5
activityBar.background#333333
activityBar.border#444c56
activityBar.foreground#7BCCB5
activityBar.inactiveForeground#768390
activityBarBadge.background#7BCCB5
activityBarBadge.foreground#cdd9e5
badge.background#1b4b91
badge.foreground#6cb6ff
breadcrumb.activeSelectionForeground#768390
breadcrumb.focusForeground#7bccb5
breadcrumb.foreground#99FFE2
breadcrumbPicker.background#3C3C3C
button.background#444c56
button.foreground#ffffff
button.hoverBackground#2d333b
button.secondaryBackground#3d444d
button.secondaryForeground#adbac7
button.secondaryHoverBackground#444c56
checkbox.background#2d333b
checkbox.border#444c56
debugToolBar.background#3C3C3C
descriptionForeground#768390
diffEditor.insertedTextBackground#46954a33
diffEditor.removedTextBackground#c93c3733
dropdown.background#3C3C3C
dropdown.border#444c56
dropdown.foreground#adbac7
dropdown.listBackground#3C3C3C
editor.background#252526
editor.findMatchBackground#ffd33d44
editor.findMatchHighlightBackground#ffd33d22
editor.focusedStackFrameHighlightBackground#2b6a3033
editor.foldBackground#636e7b1a
editor.foreground#adbac7
editor.inactiveSelectionBackground#3392FF22
editor.lineHighlightBackground#60666E1A
editor.linkedEditingBackground#3392FF22
editor.selectionBackground#3392FF44
editor.selectionHighlightBackground#17E5E633
editor.selectionHighlightBorder#17E5E600
editor.stackFrameHighlightBackground#C6902625
editor.wordHighlightBackground#17E5E600
editor.wordHighlightBorder#17E5E699
editor.wordHighlightStrongBackground#17E5E600
editor.wordHighlightStrongBorder#17E5E666
editorBracketMatch.background#17E5E680
editorBracketMatch.border#7E17E680
editorCursor.foreground#6cb6ff
editorGroup.border#444c56
editorGroupHeader.tabsBackground#323233
editorGroupHeader.tabsBorder#444c56
editorGutter.addedBackground#2b6a30
editorGutter.deletedBackground#ad2e2c
editorGutter.modifiedBackground#966600
editorIndentGuide.activeBackground#444c56
editorIndentGuide.background#373e47
editorLineNumber.activeForeground#adbac7
editorLineNumber.foreground#768390
editorOverviewRuler.border#1c2128
editorWhitespace.foreground#545d68
editorWidget.background#3C3C3C
errorForeground#e5534b
focusBorder#7BCCB580
foreground#adbac7
gitDecoration.addedResourceForeground#6bc46d
gitDecoration.conflictingResourceForeground#daaa3f
gitDecoration.deletedResourceForeground#e5534b
gitDecoration.ignoredResourceForeground#545d68
gitDecoration.modifiedResourceForeground#daaa3f
gitDecoration.submoduleResourceForeground#768390
gitDecoration.untrackedResourceForeground#6bc46d
input.background#333333
input.border#373e47
input.foreground#adbac7
input.placeholderForeground#545d68
list.activeSelectionBackground#373e47
list.activeSelectionForeground#adbac7
list.focusBackground#373e47
list.focusForeground#cdd9e5
list.highlightForeground#4184e4
list.hoverBackground#2d333b
list.hoverForeground#adbac7
list.inactiveFocusBackground#2d333b
list.inactiveSelectionBackground#2d333b
list.inactiveSelectionForeground#adbac7
menu.selectionBackground#3392FF33
notificationCenterHeader.background#22272e
notificationCenterHeader.foreground#636e7b
notifications.background#2d333b
notifications.border#444c56
notifications.foreground#768390
notificationsErrorIcon.foreground#e5534b
notificationsInfoIcon.foreground#539bf5
notificationsWarningIcon.foreground#e0823d
panel.background#323233
panel.border#444c56
panelInput.border#444c56
panelTitle.activeBorder#f78166
panelTitle.activeForeground#7BCCB5
panelTitle.inactiveForeground#7BCCB580
peekViewEditor.background#0d111788
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewResult.background#22272e
peekViewResult.matchHighlightBackground#ffd33d33
pickerGroup.border#373e47
pickerGroup.foreground#768390
progressBar.background#7BCCB5
quickInput.background#22272e
quickInput.foreground#adbac7
scrollbar.shadow#0008
scrollbarSlider.activeBackground#484F5888
scrollbarSlider.background#484F5833
scrollbarSlider.hoverBackground#484F5844
settings.headerForeground#768390
settings.modifiedItemIndicator#966600
sideBar.background#252526
sideBar.border#444c56
sideBar.foreground#cccccc
sideBarSectionHeader.background#323233
sideBarSectionHeader.border#444c56
sideBarSectionHeader.foreground#adbac7
sideBarTitle.foreground#adbac7
statusBar.background#333333
statusBar.border#444c56
statusBar.debuggingBackground#c93c37
statusBar.debuggingForeground#cdd9e5
statusBar.foreground#7BCCB5
statusBar.noFolderBackground#333333
statusBarItem.prominentBackground#2d333b
statusBarItem.remoteBackground#7BCCB5
tab.activeBackground#333333
tab.activeBorder#333333
tab.activeBorderTop#f78166
tab.activeForeground#adbac7
tab.border#444c56
tab.hoverBackground#333333
tab.inactiveBackground#323233
tab.inactiveForeground#768390
tab.unfocusedActiveBorder#333333
tab.unfocusedActiveBorderTop#444c56
tab.unfocusedHoverBackground#2d333b
terminal.ansiBlack#545d68
terminal.ansiBlue#539bf5
terminal.ansiBrightBlack#636e7b
terminal.ansiBrightBlue#6cb6ff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#6bc46d
terminal.ansiBrightMagenta#dcbdfb
terminal.ansiBrightRed#ff938a
terminal.ansiBrightWhite#cdd9e5
terminal.ansiBrightYellow#daaa3f
terminal.ansiCyan#39c5cf
terminal.ansiGreen#57ab5a
terminal.ansiMagenta#b083f0
terminal.ansiRed#f47067
terminal.ansiWhite#909dab
terminal.ansiYellow#c69026
terminal.background#2A2A2A
terminal.foreground#768390
textBlockQuote.background#323233
textBlockQuote.border#4f5964
textCodeBlock.background#cdd9e526
textLink.activeForeground#539bf5
textLink.foreground#539bf5
textPreformat.foreground#768390
textSeparator.foreground#373e47
titleBar.activeBackground#333333
titleBar.activeForeground#768390
titleBar.border#444c56
titleBar.inactiveBackground#323233
titleBar.inactiveForeground#768390
tree.indentGuidesStroke#373e47
welcomePage.buttonBackground#373e47
welcomePage.buttonHoverBackground#444c56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#768390	—
constant, entity.name.constant, variable.other.constant, variable.language, entity, variable.other.readwrite	#7BCCB5	—
entity.name, meta.export.default, meta.definition.variable	#f69d50	—
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression	#adbac7	—
entity.name.function	#f47067	—
entity.name.tag, support.class.component	#8ddb8c	—
keyword	#b083f0	italic
storage, storage.type	#b083f0	italic
storage.modifier.package, storage.modifier.import, storage.type.java	#adbac7	—
string, punctuation.definition.string, string punctuation.section.embedded source	#96d0ff	—
support	#6cb6ff	—
meta.property-name	#6cb6ff	—
variable	#f69d50	—
variable.other	#adbac7	—
invalid.broken	#ff938a	italic
invalid.deprecated	#ff938a	italic
invalid.illegal	#ff938a	italic
invalid.unimplemented	#ff938a	italic
carriage-return	#22272e	italic underline
message.error	#ff938a	—
string source	#adbac7	—
string variable	#6cb6ff	—
source.regexp, string.regexp	#96d0ff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#96d0ff	—
string.regexp constant.character.escape	#8ddb8c	bold
support.constant	#6cb6ff	—
support.variable	#6cb6ff	—
meta.module-reference	#6cb6ff	—
punctuation.definition.list.begin.markdown	#f69d50	—
markup.heading, markup.heading entity.name	#6cb6ff	bold
markup.quote	#8ddb8c	—
markup.italic	#adbac7	italic
markup.bold	#adbac7	bold
markup.raw	#6cb6ff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ff938a	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#8ddb8c	—
markup.changed, punctuation.definition.changed	#f69d50	—
markup.ignored, markup.untracked	#2d333b	—
meta.diff.range	#dcbdfb	bold
meta.diff.header	#6cb6ff	—
meta.separator	#6cb6ff	bold
meta.output	#6cb6ff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#768390	—
brackethighlighter.unmatched	#ff938a	—
constant.other.reference.link, string.other.link	#96d0ff	underline
constant.numeric.decimal	#ad2e2c	—

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