David Dark Code

Name: David Dark Code
Author: cojocaru-david

Publisher: cojocaru-davidThemes in package: 1

David Dark is a dark theme for VS Code. It is based on the github theme and the default dark theme. It is designed to be easy on the eyes and to be used for long periods of time.

GitHub

VS Code preview

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

David Dark Code — david-dark

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#6495ED
activityBar.background#18191A
activityBar.border#1d2024
activityBar.foreground#e1e4e8
activityBar.inactiveForeground#6a737d
activityBarBadge.background#6495ED
activityBarBadge.foreground#fff
badge.background#6495ED
badge.foreground#c8e1ff
breadcrumb.activeSelectionForeground#d1d5da
breadcrumb.focusForeground#e1e4e8
breadcrumb.foreground#959da5
breadcrumbPicker.background#2b3036
button.background#176f2c
button.foreground#dcffe4
button.hoverBackground#22863a
checkbox.background#2b3036
checkbox.border#1d2024
debugToolBar.background#2b3036
descriptionForeground#959da5
diffEditor.insertedTextBackground#28a74530
diffEditor.removedTextBackground#d73a4930
dropdown.background#202224
dropdown.border#1d2024
dropdown.foreground#e1e4e8
dropdown.listBackground#18191A
editor.background#18191A
editor.findMatchBackground#ffd33d44
editor.findMatchHighlightBackground#ffd33d22
editor.focusedStackFrameHighlightBackground#b808
editor.foldBackground#282e33
editor.fontFamilyFira Code, Menlo, Monaco, 'Courier New', monospace
editor.fontLigatures
editor.foreground#e1e4e8
editor.inactiveSelectionBackground#3392FF22
editor.lineHighlightBackground#2b3036
editor.selectionBackground#3392FF44
editor.selectionHighlightBackground#17E5E633
editor.selectionHighlightBorder#17E5E600
editor.stackFrameHighlightBackground#a707
editor.wordHighlightBackground#17E5E600
editor.wordHighlightBorder#17E5E699
editor.wordHighlightStrongBackground#17E5E600
editor.wordHighlightStrongBorder#17E5E666
editorBracketMatch.background#17E5E650
editorBracketMatch.border#17E5E600
editorCursor.foreground#c8e1ff
editorGroup.border#1d2024
editorGroupHeader.tabsBackground#222324
editorGroupHeader.tabsBorder#1d2024
editorGutter.addedBackground#28a745
editorGutter.deletedBackground#ea4a5a
editorGutter.modifiedBackground#2188ff
editorIndentGuide.activeBackground#2b3036
editorIndentGuide.background#202224
editorLineNumber.activeForeground#e1e4e8
editorLineNumber.foreground#2b3036
editorOverviewRuler.border#1d2024
editorWhitespace.foreground#2b3036
editorWidget.background#222324
errorForeground#6495ED
focusBorder#6495ED
foreground#d1d5da
gitDecoration.addedResourceForeground#34d058
gitDecoration.conflictingResourceForeground#ffab70
gitDecoration.deletedResourceForeground#ea4a5a
gitDecoration.ignoredResourceForeground#6a737d
gitDecoration.modifiedResourceForeground#79b8ff
gitDecoration.submoduleResourceForeground#6a737d
gitDecoration.untrackedResourceForeground#34d058
input.background#202224
input.border#1d2024
input.foreground#e1e4e8
input.placeholderForeground#959da5
list.activeSelectionBackground#39414a
list.activeSelectionForeground#e1e4e8
list.focusBackground#044289
list.hoverBackground#282e34
list.hoverForeground#e1e4e8
list.inactiveFocusBackground#1d2d3e
list.inactiveSelectionBackground#282e34
list.inactiveSelectionForeground#e1e4e8
notificationCenterHeader.background#18191A
notificationCenterHeader.foreground#959da5
notifications.background#202224
notifications.border#1d2024
notifications.foreground#e1e4e8
notificationsErrorIcon.foreground#ea4a5a
notificationsInfoIcon.foreground#79b8ff
notificationsWarningIcon.foreground#ffab70
panel.background#222324
panel.border#1d2024
panelInput.border#202224
panelTitle.activeBorder#6495ED
panelTitle.activeForeground#e1e4e8
panelTitle.inactiveForeground#959da5
peekViewEditor.background#22232488
peekViewEditor.matchHighlightBackground#ffd33d33
peekViewResult.background#222324
peekViewResult.matchHighlightBackground#ffd33d33
pickerGroup.border#2b3036
pickerGroup.foreground#e1e4e8
progressBar.background#6495ED
quickInput.background#18191A
quickInput.foreground#e1e4e8
scrollbar.shadow#0008
scrollbarSlider.activeBackground#6a737d88
scrollbarSlider.background#6a737d33
scrollbarSlider.hoverBackground#6a737d44
settings.headerForeground#e1e4e8
settings.modifiedItemIndicator#6495ED
sideBar.background#222324
sideBar.border#1d2024
sideBar.foreground#d1d5da
sideBarSectionHeader.background#222324
sideBarSectionHeader.border#1d2024
sideBarSectionHeader.foreground#e1e4e8
sideBarTitle.foreground#e1e4e8
statusBar.background#18191A
statusBar.border#1d2024
statusBar.debuggingBackground#931c06
statusBar.debuggingForeground#fff
statusBar.foreground#d1d5da
statusBar.noFolderBackground#18191A
statusBarItem.prominentBackground#282e34
tab.activeBackground#18191A
tab.activeBorder#18191A
tab.activeBorderTop#6495ED
tab.activeForeground#e1e4e8
tab.border#1d2024
tab.hoverBackground#18191A
tab.inactiveBackground#222324
tab.inactiveForeground#959da5
tab.unfocusedActiveBorder#18191A
tab.unfocusedActiveBorderTop#1d2024
tab.unfocusedHoverBackground#18191A
terminal.foreground#d1d5da
textBlockQuote.background#18191A
textBlockQuote.border#2b3036
textCodeBlock.background#202224
textLink.activeForeground#c8e1ff
textLink.foreground#79b8ff
textPreformat.foreground#d1d5da
textSeparator.foreground#586069
titleBar.activeBackground#18191A
titleBar.activeForeground#e1e4e8
titleBar.border#1d2024
titleBar.inactiveBackground#222324
titleBar.inactiveForeground#959da5
tree.indentGuidesStroke#202224
welcomePage.buttonBackground#202224
welcomePage.buttonHoverBackground#2b3036

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#6a737d	—
constant, entity.name.constant, variable.other.constant, variable.language	#79b8ff	—
entity, entity.name	#b392f0	—
variable.parameter.function	#e1e4e8	—
entity.name.tag	#85e89d	—
keyword	#6495ED	—
storage, storage.type	#6495ED	—
storage.modifier.package, storage.modifier.import, storage.type.java	#e1e4e8	—
string, punctuation.definition.string, string punctuation.section.embedded source	#9ecbff	—
support	#79b8ff	—
meta.property-name	#79b8ff	—
variable	#ffab70	—
variable.other	#e1e4e8	—
invalid.broken	#fdaeb7	italic
invalid.deprecated	#fdaeb7	italic
invalid.illegal	#fdaeb7	italic
invalid.unimplemented	#fdaeb7	italic
carriage-return	#18191A	italic underline
message.error	#fdaeb7	—
string source	#e1e4e8	—
string variable	#79b8ff	—
source.regexp, string.regexp	#dbedff	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#dbedff	—
string.regexp constant.character.escape	#85e89d	bold
support.constant	#79b8ff	—
support.variable	#79b8ff	—
meta.module-reference	#79b8ff	—
punctuation.definition.list.begin.markdown	#ffab70	—
markup.heading, markup.heading entity.name	#79b8ff	bold
markup.quote	#85e89d	—
markup.italic	#e1e4e8	italic
markup.bold	#e1e4e8	bold
markup.raw	#79b8ff	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#fdaeb7	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#85e89d	—
markup.changed, punctuation.definition.changed	#ffab70	—
markup.ignored, markup.untracked	#202224	—
meta.diff.range	#b392f0	bold
meta.diff.header	#79b8ff	—
meta.separator	#79b8ff	bold
meta.output	#79b8ff	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#d1d5da	—
brackethighlighter.unmatched	#fdaeb7	—
constant.other.reference.link, string.other.link	#dbedff	underline
punctuation.definition.constant	#79b8ff	—
markup.inserted.git_gutter	#18191A	—
markup.changed.git_gutter	#18191A	—
markup.deleted.git_gutter	#18191A	—
meta.diff.header.git_gutter	#79b8ff	—
meta.diff.header.from-file.git_gutter	#ea4a5a	—

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