Custom Dark Theme

Name: Custom Dark Theme
Author: SraaaamXTheLordWolf

Publisher: SraaaamXTheLordWolfThemes in package: 1

Here is my Custom Dark Theme! (Inspired of Best Themes Redefined by Lakshit Somani)

Open in VS Code

VS Code preview

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

Custom Dark Theme — Custom 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.activeBackground#000000
activityBar.activeBorder#FFFFFF
activityBar.background#000000
activityBar.border#2a2a2a
activityBar.foreground#F8F8F2
activityBar.inactiveForeground#B0B0B0
activityBarBadge.background#66D9FF
activityBarBadge.foreground#000000
badge.background#66D9FF
badge.foreground#000000
breadcrumb.activeSelectionForeground#F8F8F2
breadcrumb.background#000000
breadcrumb.focusForeground#F8F8F2
breadcrumb.foreground#B0B0B0
breadcrumbPicker.background#000000
button.background#00FF88
button.foreground#000000
button.hoverBackground#00FFAA
button.secondaryBackground#303030
button.secondaryForeground#F8F8F2
button.secondaryHoverBackground#303030
checkbox.background#1a1a1a
checkbox.border#2a2a2a
checkbox.foreground#F8F8F2
debugExceptionWidget.background#000000
debugExceptionWidget.border#000000
debugToolBar.background#000000
debugToolBar.border#000000
descriptionForeground#B0B0B0
diffEditor.border#1a1a1a
diffEditor.insertedTextBackground#28a74530
diffEditor.insertedTextBorder#9bb95500
diffEditor.removedTextBackground#d73a4930
dropdown.background#0a0a0a
dropdown.border#2a2a2a
dropdown.foreground#F8F8F2
dropdown.listBackground#0a0a0a
editor.background#000000
editor.findMatchBackground#ffd33d44
editor.findMatchBorder#74879f
editor.findMatchHighlightBackground#ffd33d22
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.focusedStackFrameHighlightBackground#bb880088
editor.foldBackground#000000
editor.foreground#F8F8F2
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3392ff22
editor.lineHighlightBackground#0f0f0f
editor.lineHighlightBorder#1a1a1a
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#3392ff44
editor.selectionHighlightBackground#17e5e633
editor.selectionHighlightBorder#17e5e600
editor.stackFrameHighlightBackground#aa770077
editor.wordHighlightBackground#17e5e600
editor.wordHighlightBorder#17e5e699
editor.wordHighlightStrongBackground#17e5e600
editor.wordHighlightStrongBorder#17e5e666
editorBracketMatch.background#17e5e650
editorBracketMatch.border#17e5e600
editorCodeLens.foreground#F8F8F2
editorCursor.background#000000
editorCursor.foreground#66FFFF
editorError.background#B73A3400
editorError.border#ffffff00
editorError.foreground#FF6B6B
editorGroup.border#2a2a2a
editorGroup.emptyBackground#000000
editorGroupHeader.border#2a2a2a
editorGroupHeader.tabsBackground#0a0a0a
editorGroupHeader.tabsBorder#2a2a2a
editorGutter.addedBackground#00FF88
editorGutter.background#000000
editorGutter.commentRangeForeground#1a1a1a
editorGutter.deletedBackground#FF6B6B
editorGutter.foldingControlForeground#1a1a1a
editorGutter.modifiedBackground#FFBB66
editorHoverWidget.background#0a0a0a
editorHoverWidget.border#2a2a2a
editorHoverWidget.foreground#F8F8F2
editorIndentGuide.activeBackground#2a2a2a
editorIndentGuide.background#1a1a1a
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#66D9FF
editorLineNumber.activeForeground#F8F8F2
editorLineNumber.foreground#3a3a3a
editorLink.activeForeground#66D9FF
editorMarkerNavigation.background#000000
editorMarkerNavigationError.background#000000
editorMarkerNavigationInfo.background#000000
editorMarkerNavigationWarning.background#000000
editorOverviewRuler.background#0a0a0a00
editorOverviewRuler.border#2a2a2a
editorRuler.foreground#1a1a1a
editorSuggestWidget.background#0a0a0a
editorSuggestWidget.border#2a2a2a
editorSuggestWidget.foreground#F8F8F2
editorSuggestWidget.highlightForeground#66D9FF
editorSuggestWidget.selectedBackground#1a1a1a
editorWarning.background#A9904000
editorWarning.border#ffffff00
editorWarning.foreground#FFBB66
editorWhitespace.foreground#1a1a1a
editorWidget.background#0a0a0a
editorWidget.foreground#F8F8F2
editorWidget.resizeBorder#2a2a2a
errorForeground#FF6B6B
focusBorder#66D9FF
foreground#F8F8F2
gitDecoration.addedResourceForeground#00FF88
gitDecoration.conflictingResourceForeground#FF6B6B
gitDecoration.deletedResourceForeground#FF6B6B
gitDecoration.ignoredResourceForeground#3a3a3a
gitDecoration.modifiedResourceForeground#FFBB66
gitDecoration.stageDeletedResourceForeground#FF6B6B
gitDecoration.stageModifiedResourceForeground#FFBB66
gitDecoration.submoduleResourceForeground#B0B0B0
gitDecoration.untrackedResourceForeground#00FF88
icon.foreground#F8F8F2
input.background#000000
input.border#2a2a2a
input.foreground#F8F8F2
input.placeholderForeground#B0B0B0
inputOption.activeBackground#000000
inputOption.activeBorder#00000000
inputOption.activeForeground#F8F8F2
list.activeSelectionBackground#1a1a1a
list.activeSelectionForeground#F8F8F2
list.dropBackground#1a1a1a
list.focusBackground#66D9FF
list.focusForeground#000000
list.highlightForeground#66D9FF
list.hoverBackground#0a0a0a
list.hoverForeground#F8F8F2
list.inactiveFocusBackground#0f0f0f
list.inactiveSelectionBackground#0f0f0f
list.inactiveSelectionForeground#F8F8F2
listFilterWidget.background#1a1a1a
listFilterWidget.noMatchesOutline#FF6B6B
listFilterWidget.outline#00000000
menu.background#000000
menu.border#2a2a2a
menu.foreground#F8F8F2
menu.selectionBackground#1a1a1a
menu.selectionBorder#00000000
menu.selectionForeground#F8F8F2
menu.separatorBackground#1a1a1a
menubar.selectionBackground#1a1a1a
menubar.selectionBorder#2a2a2a
menubar.selectionForeground#F8F8F2
merge.commonContentBackground#0f0f0f
merge.commonHeaderBackground#1a1a1a
merge.currentContentBackground#0f1f1a
merge.currentHeaderBackground#1a3a30
merge.incomingContentBackground#0f1520
merge.incomingHeaderBackground#1a2a3a
minimap.background#000000
minimap.errorHighlight#FF6B6B
minimap.findMatchHighlight#2a2a2a
minimap.selectionHighlight#1a1a1a
minimap.warningHighlight#FFBB66
minimapGutter.addedBackground#00FF88
minimapGutter.deletedBackground#FF6B6B
minimapGutter.modifiedBackground#FFBB66
notificationCenter.border#2a2a2a
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#B0B0B0
notifications.background#0a0a0a
notifications.border#2a2a2a
notifications.foreground#F8F8F2
notificationsErrorIcon.foreground#FF6B6B
notificationsInfoIcon.foreground#66D9FF
notificationsWarningIcon.foreground#FFBB66
notificationToast.border#2a2a2a
panel.background#000000
panel.border#2a2a2a
panelInput.border#2a2a2a
panelSection.border#2a2a2a
panelTitle.activeBorder#ffffff
panelTitle.activeForeground#F8F8F2
panelTitle.inactiveForeground#B0B0B0
peekView.border#2a2a2a
peekViewEditor.background#0a0a0a88
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewEditor.matchHighlightBorder#3a3a3a
peekViewEditorGutter.background#0a0a0a
peekViewResult.background#000000
peekViewResult.fileForeground#F8F8F2
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ffd33d33
peekViewResult.selectionBackground#1a1a1a
peekViewResult.selectionForeground#F8F8F2
peekViewTitle.background#000000
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#F8F8F2
pickerGroup.border#2a2a2a
pickerGroup.foreground#F8F8F2
progressBar.background#66D9FF
quickInput.background#000000
quickInput.foreground#F8F8F2
scrollbar.shadow#00000088
scrollbarSlider.activeBackground#2a2a2a88
scrollbarSlider.background#1a1a1a33
scrollbarSlider.hoverBackground#2a2a2a44
selection.background#2a2a2a
settings.focusedRowBackground#ffffff07
settings.headerForeground#F8F8F2
settings.modifiedItemIndicator#FFBB66
sideBar.background#000000
sideBar.border#2a2a2a
sideBar.dropBackground#1a1a1a
sideBar.foreground#F8F8F2
sideBarSectionHeader.background#0a0a0a
sideBarSectionHeader.border#2a2a2a
sideBarSectionHeader.foreground#F8F8F2
sideBarTitle.foreground#F8F8F2
statusBar.background#000000
statusBar.border#2a2a2a
statusBar.debuggingBackground#FF6B6B
statusBar.debuggingBorder#2a2a2a
statusBar.debuggingForeground#000000
statusBar.foreground#F8F8F2
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#2a2a2a
statusBar.noFolderForeground#F8F8F2
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#1a1a1a
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#F8F8F2
tab.activeBackground#000000
tab.activeBorder#000000
tab.activeBorderTop#ffffff
tab.activeForeground#F8F8F2
tab.border#2a2a2a
tab.hoverBackground#0f0f0f
tab.hoverBorder#ffffff
tab.hoverForeground#F8F8F2
tab.inactiveBackground#000000
tab.inactiveForeground#B0B0B0
tab.unfocusedActiveBorder#000000
tab.unfocusedActiveBorderTop#2a2a2a
tab.unfocusedHoverBackground#0f0f0f
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#1a1a1a
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#ffffff
terminal.ansiYellow#e5e510
terminal.border#2a2a2a
terminal.foreground#F8F8F2
terminal.selectionBackground#00000000
terminalCursor.background#1a1a1a
terminalCursor.foreground#F8F8F2
textBlockQuote.background#000000
textBlockQuote.border#2a2a2a
textCodeBlock.background#000000
textLink.activeForeground#66FFFF
textLink.foreground#66D9FF
textPreformat.foreground#F8F8F2
textSeparator.foreground#2a2a2a
titleBar.activeBackground#000000
titleBar.activeForeground#F8F8F2
titleBar.border#2a2a2a
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#B0B0B0
tree.indentGuidesStroke#1a1a1a
walkThrough.embeddedEditorBackground#00000050
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#CCCCCC	italic
comment markup.link	#CCCCCC	—
string	#99DDFF	—
punctuation.definition.string.begin,punctuation.definition.string.end	#99DDFF	—
constant, constant.numeric, constant.language, entity.name.constant, variable.other.constant, variable.language	#66E5FF	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.keyof	#FF66B2	—
storage, storage.type, storage.modifier	#FF66B2	—
variable, variable.other.readwrite, variable.parameter.function	#FFBB66	—
variable.language	#66E5FF	—
entity.name.function, meta.function-call, support.function, meta.require, support.function.any-method, variable.function	#E699FF	—
entity.name.type, entity.name.class, entity.name.type.class, support.class, entity.name.type.namespace	#66E5FF	—
entity.name.tag	#66FF99	—
entity.other.attribute-name	#FFBB66	—
entity.other.attribute-name.id	#66E5FF	normal
support.type, support.constant	#66E5FF	—
support.type.property-name	#F8F8F2	—
keyword.operator, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.arithmetic, keyword.operator.comparison	#66E5FF	—
punctuation.separator.delimiter	#F8F8F2	—
string.regexp, constant.other.character-class.regexp	#FF66FF	—
constant.character.escape	#00FF88	—
invalid.broken, invalid.illegal	#FF6B6B	italic
invalid.deprecated, invalid.unimplemented	#FFBB66	italic
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#66FF99	bold
markup.bold, punctuation.definition.bold.markdown	#FFBB66	bold
markup.italic, punctuation.definition.italic, emphasis md	#FF66B2	italic
markup.quote.markdown	#00FF88	—
string.other.link.title.markdown, string.other.link.description.markdown, markup.underline.link.markdown	#66E5FF	—
markup.inline.raw.markdown, markup.inline.raw.string.markdown	#99DDFF	—
punctuation.definition.list.begin.markdown	#66FF99	—
markup.inserted, markup.inserted.diff	#00FF88	—
markup.deleted, markup.deleted.diff	#FF6B6B	—
markup.changed.diff	#FFBB66	—
support.type.property-name.json, source.json meta.structure.dictionary.json > string.quoted.json	#66FF99	—
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json	#99DDFF	—
meta.function.decorator.python	#E699FF	—
variable.parameter.function.language.python, variable.parameter.function.python	#FFBB66	—
keyword.operator.expression.import	#66E5FF	—
keyword.other.template.begin, keyword.other.template.end, keyword.other.substitution.begin, keyword.other.substitution.end	#99DDFF	—
support.type.property-name.css, support.type.vendored.property-name.css	#66E5FF	—
support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss	#FFBB66	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#66E5FF	—
token.info-token	#66E5FF	—
token.warn-token	#FFBB66	—
token.error-token	#FF6B6B	—
token.debug-token	#E699FF	—

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