Dank Theme

Name: Dank Theme
Author: Soggy Boi

Publisher: Soggy BoiThemes in package: 1

Dank theme to increase productivity by up to 420%

GitHub

VS Code preview

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

Dank Theme — Dank Theme

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.background#181C25
activityBar.border#181C2560
activityBar.foreground#518B9E
activityBarBadge.background#2ac9ae
activityBarBadge.foreground#181C25
badge.background#181C2530
badge.foreground#3D5A80
breadcrumb.activeSelectionForeground#3D5A80
breadcrumb.background#181C25
breadcrumb.focusForeground#2AC9AE
breadcrumb.foreground#518B9E
breadcrumbPicker.background#181C25
button.background#3D5A8050
contrastBorder#3D5A8040
debugToolBar.background#181C25
diffEditor.insertedTextBackground#734FD715
diffEditor.removedTextBackground#3A405120
dropdown.background#181C25
dropdown.border#73788E10
editor.background#181C25
editor.findMatchBackground#181C25
editor.findMatchBorder#3D5A80
editor.findMatchHighlightBackground#3D5A8093
editor.findMatchHighlightBorder#73788E30
editor.foreground#518B9E
editor.lineHighlightBackground#23283565
editor.selectionBackground#696b9c49
editor.selectionHighlightBackground#3D5A806b
editor.selectionHighlightBorder#2AC9AEAF
editorBracketMatch.background#181C25
editorBracketMatch.border#518B9E3f
editorCursor.foreground#518B9E
editorError.foreground#3A405170
editorGroup.border#181C2530
editorGroupHeader.border#181C2530
editorGroupHeader.tabsBackground#181C25
editorGutter.addedBackground#734FD760
editorGutter.deletedBackground#3A405160
editorGutter.modifiedBackground#79978560
editorHoverWidget.background#181C25
editorHoverWidget.border#73788E10
editorIndentGuide.activeBackground#293241
editorIndentGuide.background#29324170
editorInfo.foreground#79978570
editorLineNumber.activeForeground#2AC9AE
editorLineNumber.foreground#3D5A80c0
editorLink.activeForeground#518B9E
editorMarkerNavigation.background#518B9E05
editorOverviewRuler.border#181C25
editorOverviewRuler.errorForeground#3A405140
editorOverviewRuler.findMatchForeground#3D5A80
editorOverviewRuler.infoForeground#79978540
editorOverviewRuler.warningForeground#E3630270
editorRuler.foreground#293241
editorSuggestWidget.background#181C25
editorSuggestWidget.border#73788E10
editorSuggestWidget.foreground#518B9E
editorSuggestWidget.highlightForeground#dbe461
editorSuggestWidget.selectedBackground#3D5A8020
editorWarning.foreground#734FD7
editorWhitespace.foreground#518B9E40
editorWidget.background#181C25
editorWidget.border#dbe461
editorWidget.resizeBorder#3D5A80
extensionButton.prominentBackground#734FD790
extensionButton.prominentHoverBackground#3A4051
focusBorder#73788E00
gitDecoration.conflictingResourceForeground#E01E6F
gitDecoration.deletedResourceForeground#ec4747
gitDecoration.ignoredResourceForeground#3D5A80
gitDecoration.modifiedResourceForeground#439cb9
gitDecoration.untrackedResourceForeground#2AC9AE
input.background#202532
input.border#73788E10
input.foreground#518B9E
input.placeholderForeground#518B9E60
inputOption.activeBackground#518B9E30
inputOption.activeBorder#518B9E30
inputValidation.errorBorder#3A405150
inputValidation.infoBorder#79978550
inputValidation.warningBorder#E3630250
list.activeSelectionBackground#272c38
list.activeSelectionForeground#DDDDDD
list.errorForeground#E01E6F
list.focusBackground#202532
list.focusForeground#2AC9AE
list.highlightForeground#3D5A80
list.hoverBackground#293241
list.hoverForeground#b9bcca
list.inactiveSelectionBackground#41485730
list.inactiveSelectionForeground#b9c8db
list.warningForeground#dbe461
listFilterWidget.background#181C2530
listFilterWidget.noMatchesOutline#181C2530
listFilterWidget.outline#181C2530
menu.background#181C25f8
menu.border#3D5A8050
menu.foreground#518B9E
menu.selectionBackground#202532
menu.selectionBorder#181C2530
menu.selectionForeground#518B9E
menu.separatorBackground#518B9E
menubar.selectionBackground#202532
menubar.selectionBorder#3D5A8050
menubar.selectionForeground#518B9E
minimap.background#181C25
minimapGutter.addedBackground#3A4051
minimapGutter.deletedBackground#b3b1b0
minimapGutter.modifiedBackground#c4c4c4
minimapSlider.activeBackground#c4c4c420
minimapSlider.background#c4c4c420
minimapSlider.hoverBackground#c4c4c430
notificationLink.foreground#3D5A80
notifications.background#181C25
notifications.foreground#2AC9AE
panel.background#181C25
panel.border#3D5A8020
panelTitle.activeBorder#3D5A80
panelTitle.activeForeground#518B9E
panelTitle.inactiveForeground#73788E
peekView.border#181C2530
peekViewEditor.background#518B9E05
peekViewEditor.matchHighlightBackground#3D5A8050
peekViewEditorGutter.background#518B9E05
peekViewResult.background#518B9E05
peekViewResult.matchHighlightBackground#3D5A8050
peekViewResult.selectionBackground#3D5A8070
peekViewTitle.background#518B9E05
peekViewTitleDescription.foreground#518B9E60
pickerGroup.foreground#3D5A80
progressBar.background#3D5A80
scrollbar.shadow#000000c4
scrollbarSlider.activeBackground#3D5A80cc
scrollbarSlider.background#3D5A80bb
scrollbarSlider.hoverBackground#3D5A80ee
selection.background#3D5A80
settings.checkboxBackground#181C25
settings.checkboxForeground#2AC9AE
settings.dropdownBackground#181C25
settings.dropdownForeground#2AC9AE
settings.headerForeground#3D5A80
settings.modifiedItemIndicator#3D5A80
settings.numberInputBackground#181C25
settings.numberInputForeground#518B9E
settings.textInputBackground#181C25
settings.textInputForeground#518B9E
sideBar.background#181C25
sideBar.border#3D5A8020
sideBar.foreground#7699be
sideBarSectionHeader.background#181C25
sideBarSectionHeader.border#181C2560
sideBarSectionHeader.foreground#518B9E
sideBarTitle.foreground#518B9E
statusBar.background#181C25
statusBar.border#181C2560
statusBar.debuggingBackground#2AC9AE
statusBar.debuggingForeground#181C2560
statusBar.foreground#808185
statusBar.noFolderBackground#181C25
statusBarItem.hoverBackground#3D5A8020
statusBarItem.remoteBackground#3D5A80
statusBarItem.remoteForeground#181C25
tab.activeBackground#3D5A8020
tab.activeBorder#2AC9AE
tab.activeForeground#C6C8C3
tab.activeModifiedBorder#3D5A80
tab.border#181C25
tab.inactiveBackground#181C25
tab.inactiveForeground#518B9EAF
tab.unfocusedActiveBackground#3D5A8040
tab.unfocusedActiveBorder#3D5A80
tab.unfocusedActiveForeground#518B9E
tab.unfocusedInactiveBackground#3D5A8010
tab.unfocusedInactiveForeground#518B9E7f
terminal.ansiBlack#181C25
terminal.ansiBlue#26BBD9
terminal.ansiBrightBlue#3FC4DE
terminal.ansiBrightCyan#6BE4E6
terminal.ansiBrightGreen#3FDAA4
terminal.ansiBrightMagenta#F075B5
terminal.ansiBrightRed#EC6A88
terminal.ansiBrightYellow#2AC9AE
terminal.ansiCyan#59E1E3
terminal.ansiGreen#29D398
terminal.ansiMagenta#EE64AC
terminal.ansiRed#E95678
terminal.ansiYellow#FFD56C
terminal.border#3D5A8020
terminalCursor.background#181C25
terminalCursor.foreground#808185
textLink.activeForeground#518B9E
textLink.foreground#3D5A80
titleBar.activeBackground#181C25
titleBar.activeForeground#518B9E
titleBar.border#181C2560
titleBar.inactiveBackground#181C25
titleBar.inactiveForeground#676b77
tree.indentGuidesStroke#293241
widget.shadow#0b0d11

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#BBBBBB4D	italic
constant	#499FA5	—
constant.character.escape	#27E6C6	—
entity.name	#BAFFFC	—
entity.name.function	#27E6C6	—
entity.name.tag	#21BACE	—
entity.name.type, storage.type.cs	#BAFFFC	—
entity.other.attribute-name	#499FA5	italic
entity.other.inherited-class	#21BACE	—
entity.other.attribute-name.id	#27E6C6	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#21BACE	—
entity.name.variable, variable	#21BACE	—
keyword	#929FE9	italic
keyword.operator	#F5F5F5	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#929FE9	—
keyword.other.unit	#499FA5	—
markup.quote	#499FA5	italic
markup.heading, entity.name.section	#21BACE	—
markup.bold	#929FE9	bold
markup.italic	#27E6C6	italic
markup.inline.raw, markup.fenced_code.block	#499FA5	—
markup.underline.link	#21BACE	—
storage	#929FE9	italic
string.quoted, string.template	#BAFFFC	—
string.regexp	#DF2773	—
string.other.link	#499FA5	—
support	#BAFFFC	—
support.function	#27E6C6	—
support.variable	#21BACE	—
support.type.property-name, meta.object-literal.key	#21BACE	—
support.type.property-name.css	#C5C5C5	—
variable.language	#BAFFFC	italic
variable.parameter	—	italic
string.template meta.embedded	#C5C5C5	—
punctuation.definition.tag	#21BACE	—
punctuation.separator	#C5C5C5	—
punctuation.definition.template-expression	#929FE9	—
punctuation.section.embedded	#929FE9	—
punctuation.definition.list	#499FA5	—

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