Slack Dark Theme

Name: Slack Dark Theme
Author: alexesprit

Publisher: alexespritThemes in package: 1

Simple dark theme

GitHub

VS Code preview

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

Slack Dark Theme — Slack Dark 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#181a1f
activityBar.border#070707
activityBar.dropBackground#181A1F
activityBar.foreground#D4D7D9
activityBar.inactiveForeground#5F6672
activityBarBadge.background#245254
activityBarBadge.foreground#D4D7D9
button.background#245254
contrastBorder#070707
debugIcon.breakpointCurrentStackframeForeground#E95484
debugIcon.breakpointDisabledForeground#A9B2C3
debugIcon.breakpointForeground#E95484
debugIcon.breakpointStackframeForeground#E95484
debugIcon.breakpointUnverifiedForeground#E79E4C
debugIcon.continueForeground#61AFEF
debugIcon.disconnectForeground#E95484
debugIcon.pauseForeground#61AFEF
debugIcon.restartForeground#A9DF5D
debugIcon.startForeground#61AFEF
debugIcon.stepBackForeground#61AFEF
debugIcon.stepIntoForeground#61AFEF
debugIcon.stepOutForeground#61AFEF
debugIcon.stepOverForeground#61AFEF
debugIcon.stopForeground#E95484
debugToolBar.background#181A1F
dropdown.background#181A1F
dropdown.border#070707
editor.background#111
editor.findMatchBackground#61AFEF4F
editor.findMatchBorder#61AFEF9F
editor.findMatchHighlightBackground#00000000
editor.findMatchHighlightBorder#A9B2C37F
editor.foreground#A9B2C3
editor.lineHighlightBackground#A9B2C31A
editor.lineHighlightBorder#00000000
editor.rangeHighlightBorder#A9B2C37F
editor.selectionBackground#A9B2C333
editor.selectionHighlightBackground#61AFEF4F
editor.selectionHighlightBorder#A9B2C37F
editor.wordHighlightBackground#61AFEF4F
editor.wordHighlightBorder#61AFEF9F
editor.wordHighlightStrongBackground#61AFEF4F
editor.wordHighlightStrongBorder#61AFEF9F
editorBracketMatch.background#61AFEF3A
editorBracketMatch.border#61AFEF9F
editorCursor.foreground#A9B2C3
editorError.foreground#E95484
editorGroup.border#070707
editorGroup.emptyBackground#111
editorGroupHeader.tabsBackground#181A1F
editorGutter.addedBackground#A9DF5D
editorGutter.deletedBackground#E95484
editorGutter.modifiedBackground#E5C07B
editorHoverWidget.background#181A1F
editorHoverWidget.border#61AFEF
editorIndentGuide.activeBackground#A9B2C333
editorIndentGuide.background#A9B2C31A
editorInfo.foreground#61AFEF
editorLineNumber.foreground#5F6672
editorOverviewRuler.addedForeground#A9DF5D
editorOverviewRuler.border#070707
editorOverviewRuler.deletedForeground#E95484
editorOverviewRuler.errorForeground#E95484
editorOverviewRuler.infoForeground#61AFEF
editorOverviewRuler.modifiedForeground#E5C07B
editorOverviewRuler.warningForeground#E5C07B
editorRuler.foreground#A9B2C31A
editorSuggestWidget.background#181A1F
editorSuggestWidget.border#61AFEF
editorSuggestWidget.selectedBackground#A9B2C31A
editorWarning.foreground#E5C07B
editorWhitespace.foreground#A9B2C31A
editorWidget.background#181A1F
errorForeground#E95484
focusBorder#00000000
gitDecoration.addedResourceForeground#A9DF5D
gitDecoration.conflictingResourceForeground#CE83AC
gitDecoration.deletedResourceForeground#E95484
gitDecoration.modifiedResourceForeground#E5C07B
gitDecoration.untrackedResourceForeground#A9DF5D
gitlens.trailingLineForegroundColor#5F6672
input.background#070707
inputOption.activeBorder#61AFEF
inputValidation.errorBackground#E95484
inputValidation.errorBorder#E95484
inputValidation.infoBackground#61AFEF
inputValidation.infoBorder#61AFEF
inputValidation.infoForeground#070707
inputValidation.warningBackground#E5C07B
inputValidation.warningBorder#E5C07B
inputValidation.warningForeground#070707
list.activeSelectionBackground#A9B2C333
list.errorForeground#E95484
list.focusBackground#A9B2C333
list.hoverBackground#A9B2C31A
list.inactiveSelectionBackground#A9B2C333
list.inactiveSelectionForeground#D4D7D9
list.warningForeground#E5C07B
minimap.errorHighlight#E95484
minimap.selectionHighlight#A9B2C31A
minimap.warningHighlight#E5C07B
minimapGutter.addedBackground#A9DF5D
minimapGutter.deletedBackground#E95484
minimapGutter.modifiedBackground#E5C07B
notificationCenterHeader.background#181A1F
notifications.background#181A1F
panel.background#111
panel.border#070707
peekView.border#61AFEF
peekViewEditor.background#181A1F
peekViewEditor.matchHighlightBackground#A9B2C333
peekViewResult.background#181A1F
peekViewResult.matchHighlightBackground#A9B2C333
peekViewResult.selectionBackground#A9B2C31A
peekViewResult.selectionForeground#D4D7D9
peekViewTitle.background#181A1F
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#A9B2C333
scrollbarSlider.background#A9B2C31A
scrollbarSlider.hoverBackground#A9B2C333
sideBar.background#111
sideBar.border#070707
sideBarSectionHeader.background#111
statusBar.background#245254
statusBar.border#070707
statusBar.debuggingBackground#875012
statusBar.foreground#D4D7D9
statusBar.noFolderBackground#8c1239
statusBarItem.activeBackground#ffffff2e
statusBarItem.hoverBackground#ffffff1f
statusBarItem.remoteBackground#00000000
tab.activeBackground#21252B
tab.activeForeground#D4D7D9
tab.border#070707
tab.hoverBackground#A9B2C31A
tab.inactiveBackground#181A1F
tab.inactiveForeground#5F6672
terminal.ansiBlack#222
terminal.ansiBlue#61AFEF
terminal.ansiBrightBlack#5F6672
terminal.ansiBrightBlue#61AFEF
terminal.ansiBrightCyan#49A5A8
terminal.ansiBrightGreen#A9DF5D
terminal.ansiBrightMagenta#CE83AC
terminal.ansiBrightRed#E95484
terminal.ansiBrightWhite#D4D7D9
terminal.ansiBrightYellow#E5C07B
terminal.ansiCyan#49A5A8
terminal.ansiGreen#A9DF5D
terminal.ansiMagenta#CE83AC
terminal.ansiRed#E95484
terminal.ansiWhite#A9B2C3
terminal.ansiYellow#E5C07B
terminal.foreground#A9B2C3
titleBar.activeBackground#21252B
titleBar.activeForeground#D4D7D9
titleBar.border#070707
titleBar.inactiveBackground#21252B
titleBar.inactiveForeground#5F6672
widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded	#A9B2C3	—
emphasis	—	italic
strong	—	bold
header	#000080	—
comment	#5F6672	—
keyword.command.rem.batchfile	#5F6672	—
constant.language	#E79E4C	—
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#9874C5	—
constant.regexp	#E79E4C	—
entity.name.tag	#49A5A8	—
entity.name.tag.css	#49A5A8	—
entity.name.tag.yaml	#E5C07B	—
entity.other.attribute-name	#E5C07B	—
keyword.other.definition.ini	#E5C07B	—
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	#A9DF5D	—
invalid	#E95484	—
markup.underline	—	underline
markup.bold	—	bold
markup.heading	#49A5A8	bold
markup.italic	—	italic
markup.inserted	#A9DF5D	—
markup.deleted	#E95484	—
markup.changed	#E5C07B	—
punctuation.definition.quote.begin.markdown	#A9B2C3	—
punctuation.definition.list.begin.markdown	#A9B2C3	—
markup.inline.raw	#E79E4C	—
punctuation.definition.tag	#A9B2C3	—
meta.preprocessor, entity.name.function.preprocessor	#49A5A8	—
meta.preprocessor.string	#A9DF5D	—
meta.preprocessor.numeric	#9874C5	—
meta.structure.dictionary.key.python	#9cdcfe	—
meta.diff.header	#49A5A8	—
meta.diff.header.from-file	#E95484	—
meta.diff.header.to-file	#A9DF5D	—
meta.diff.index, meta.diff.range	#E5C07B	—
storage	#49A5A8	—
storage.type	#49A5A8	—
storage.modifier, keyword.operator.noexcept	#49A5A8	—
string, entity.name.operator.custom-literal.string, meta.embedded.assembly	#A9DF5D	—
string.tag	#A9DF5D	—
string.value	#A9DF5D	—
string.regexp	#A9DF5D	—
constant.character.format.placeholder, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.variable.begin.batchfile, punctuation.definition.variable.end.batchfile, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.section.embedded, variable.other.interpolated, variable.other.readwrite.batchfile, string.interpolated, meta.fstring	#E79E4C	—
meta.template.expression	#A9B2C3	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#E5C07B	—
keyword	#49A5A8	—
keyword.control	#49A5A8	—
keyword.operator, keyword.operator.comparison.ruby, storage.type.function.arrow, storage.type.function.coffee, punctuation.separator.key-value	#E95484	—
keyword.operator.new, keyword.operator.comparison.batchfile, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.logical.batchfile, keyword.operator.wordlike	#49A5A8	—
keyword.other.unit	#9874C5	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#49A5A8	—
support.function.git-rebase	#49A5A8	—
constant.sha.git-rebase	#9874C5	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#A9B2C3	—
variable.language	#E79E4C	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, meta.function-call.generic	#CE83AC	—
keyword.other.special-method.batchfile	#CE83AC	—
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.other.inherited-class, entity.name.scope-resolution, entity.name.enum, entity.name.class, entity.name.struct, entity.name.generic, storage.type.built-in, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, 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.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy, keyword.type.cs, keyword.map.v, storage.type.bool.v, storage.type.byte.v, storage.type.byteptr.v, storage.type.charptr.v, storage.type.numeric.v, storage.type.other.v, storage.type.rune.v, storage.type.string.v, storage.type.ustring.v, storage.type.voidptr.v	#E5C07B	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json	#49A5A8	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator	#49A5A8	—
variable, meta.definition.variable.name, support.variable, entity.name.variable	#A9B2C3	—
meta.object-literal.key	#A9B2C3	—
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	#E79E4C	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#E79E4C	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#E79E4C	—
keyword.operator.or.regexp, keyword.control.anchor.regexp, keyword.operator.quantifier.regexp	#E95484	—
constant.character	#A9DF5D	—
constant.character.escape	#E79E4C	—
entity.name.label	#A9B2C3	—
token.info-token	#61AFEF	—
token.warn-token	#E5C07B	—
token.error-token	#E95484	—
token.debug-token	#9874C5	—
constant.language, variable.language, storage, keyword, keyword.operator, entity.name.tag, entity.name.section, meta.diff.header, punctuation.definition.keyword, punctuation.definition.heading	—	bold
storage.type.cs, storage.type.java, storage.type.groovy, storage.type.other.v, keyword.other.unit, keyword.other.definition, keyword.other.special-method.batchfile, entity.name.tag.yaml, meta.diff.header.to-file, meta.diff.header.from-file, punctuation.definition.to-file, punctuation.definition.from-file	—

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