Davinci

Name: Davinci
Author: Gabriel Batista

Publisher: Gabriel BatistaThemes in package: 10

Modern and Soft theme for VSCode based on Leonardo Da Vinci masterpieces.

Open in VS Code GitHub

Color themes

VS Code preview

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

Davinci — Mary Magdalene - Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

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#36394700
activityBar.background#171620
activityBar.border#38374E88
activityBar.dropBorder#ffffff
activityBar.foreground#EBC336
activityBar.inactiveForeground#4B4A69
activityBarBadge.background#EBC336
activityBarBadge.foreground#101010
badge.background#EBC336
badge.foreground#101010
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#171620
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#9C9AB1
button.background#EBC336
button.foreground#101010
button.hoverBackground#EBC336AA
button.secondaryBackground#38374E
button.secondaryForeground#ffffff
button.secondaryHoverBackground#2D2C3F
checkbox.background#38374E88
checkbox.border#00000000
checkbox.foreground#ffffff
debugExceptionWidget.background#38374E88
debugExceptionWidget.border#2D2C3F
debugToolBar.background#171620
debugToolBar.border#38374E88
diffEditor.border#00000000
diffEditor.insertedTextBackground#57fdaf26
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#fd577e26
diffEditor.removedTextBorder#00000000
dropdown.background#2a2938
dropdown.border#00000000
dropdown.foreground#ffffff
editor.background#171620
editor.findMatchBackground#ea5e0077
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#2D2C3F
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#00000000
editor.foldBackground#00000000
editor.foreground#ffffff
editor.hoverHighlightBackground#264f78a1
editor.inactiveSelectionBackground#ffffff10
editor.lineHighlightBackground#2D2C3F
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#00000000
editor.rangeHighlightBorder#00000000
editor.selectionBackground#2D2C3F
editor.selectionHighlightBackground#2D2C3F
editor.selectionHighlightBorder#495f7700
editor.wordHighlightBackground#5757578b
editor.wordHighlightStrongBackground#004972b7
editorBracketMatch.background#0064001a
editorBracketMatch.border#2D2C3F
editorCodeLens.foreground#9C9AB1
editorCursor.background#000000
editorCursor.foreground#EBC336
editorError.background#f9215d1a
editorError.border#00000000
editorError.foreground#f9215d
editorGroup.border#38374E88
editorGroup.emptyBackground#171620
editorGroupHeader.border#ff005400
editorGroupHeader.tabsBackground#111017
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#57fdaf
editorGutter.background#171620
editorGutter.commentRangeForeground#9C9AB1
editorGutter.deletedBackground#EBC336
editorGutter.foldingControlForeground#9C9AB1
editorGutter.modifiedBackground#57a0fd
editorHoverWidget.background#171620
editorHoverWidget.border#38374E88
editorHoverWidget.foreground#9C9AB1
editorIndentGuide.activeBackground#2D2C3F
editorIndentGuide.background#38374E88
editorInfo.background#4490bf1a
editorInfo.border#4490BF00
editorInfo.foreground#75beff
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#9C9AB1
editorLink.activeForeground#57a0fd
editorMarkerNavigation.background#171620
editorMarkerNavigationError.background#f9215d80
editorMarkerNavigationInfo.background#21b2f980
editorMarkerNavigationWarning.background#f9b92180
editorOverviewRuler.background#00000000
editorOverviewRuler.border#7f7f7f00
editorRuler.foreground#38374E88
editorSuggestWidget.background#1D1C28
editorSuggestWidget.border#38374E88
editorSuggestWidget.foreground#9C9AB1
editorSuggestWidget.highlightForeground#EBC336
editorSuggestWidget.selectedBackground#2D2C3F
editorWarning.background#cba8381a
editorWarning.border#00000000
editorWarning.foreground#d9b823
editorWhitespace.foreground#ffffff29
editorWidget.background#1D1C28
editorWidget.foreground#9C9AB1
editorWidget.resizeBorder#EBC336
focusBorder#00000000
foreground#9C9AB1
gitDecoration.addedResourceForeground#94d6a0
gitDecoration.conflictingResourceForeground#8282ee
gitDecoration.deletedResourceForeground#e45c44
gitDecoration.ignoredResourceForeground#5D627A
gitDecoration.modifiedResourceForeground#f3cc92
gitDecoration.stageDeletedResourceForeground#e65d45
gitDecoration.stageModifiedResourceForeground#f1cb92
gitDecoration.submoduleResourceForeground#8ec8ff
gitDecoration.untrackedResourceForeground#81eea7
icon.foreground#EBC336
input.background#171620
input.border#00000000
input.foreground#ffffff
input.placeholderForeground#9C9AB1
inputOption.activeBackground#2D2C3F
inputOption.activeBorder#00000000
inputOption.activeForeground#ffffff
list.activeSelectionBackground#ffffff10
list.activeSelectionForeground#ffffff
list.dropBackground#36394780
list.focusBackground#38374E88
list.focusForeground#ffffff
list.highlightForeground#EBC336
list.hoverBackground#ffffff10
list.hoverForeground#ffffff
list.inactiveSelectionBackground#ffffff10
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#431b24
listFilterWidget.noMatchesOutline#00000000
listFilterWidget.outline#00000000
menu.background#1D1C28
menu.border#00000000
menu.foreground#9C9AB1
menu.selectionBackground#ffffff10
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#38374E88
menubar.selectionBackground#ffffff10
menubar.selectionBorder#00000000
menubar.selectionForeground#ffffff
merge.commonContentBackground#282828
merge.commonHeaderBackground#4f3434
merge.currentContentBackground#264137
merge.currentHeaderBackground#215a45
merge.incomingContentBackground#263241
merge.incomingHeaderBackground#213a5a
minimap.background#171620
minimap.errorHighlight#f9215d
minimap.findMatchHighlight#515c6a
minimap.selectionHighlight#5d627a4e
minimap.warningHighlight#d9b823
minimapGutter.addedBackground#57fdaf
minimapGutter.deletedBackground#f9215d
minimapGutter.modifiedBackground#57a0fd
notificationCenter.border#38374E88
notificationCenterHeader.background#1D1C28
notificationCenterHeader.foreground#ffffff
notifications.background#171620
notifications.border#38374E88
notifications.foreground#9C9AB1
notificationsErrorIcon.foreground#f9215d
notificationsInfoIcon.foreground#21a3f9
notificationsWarningIcon.foreground#f9cd21
notificationToast.border#38374E88
panel.background#111017
panel.border#EBC336
panelSection.border#964d4d59
panelTitle.activeBorder#EBC336
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#9C9AB1
peekView.border#007acc
peekViewEditor.background#001f33
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#001f33
peekViewResult.background#171620
peekViewResult.fileForeground#9C9AB1
peekViewResult.lineForeground#9C9AB1
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#38374E88
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#171620
peekViewTitleDescription.foreground#9C9AB1
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#30306b00
pickerGroup.foreground#EBC336
progressBar.background#EBC336
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ffffff40
scrollbarSlider.background#2D2C3F
scrollbarSlider.hoverBackground#ffffff30
selection.background#2D2C3F
settings.focusedRowBackground#ffffff07
settings.headerForeground#EBC336
sideBar.background#111017
sideBar.border#38374E88
sideBar.dropBackground#36394780
sideBar.foreground#9C9AB1
sideBarSectionHeader.background#171620
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#EBC336
statusBar.background#171620
statusBar.border#38374E88
statusBar.debuggingBackground#EBC336
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#101010
statusBar.foreground#9C9AB1
statusBar.noFolderBackground#171620
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#9C9AB1
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#00000000
statusBarItem.remoteBackground#EBC336
statusBarItem.remoteForeground#101010
tab.activeBackground#171620
tab.activeBorder#00000000
tab.activeBorderTop#EBC336
tab.activeForeground#ffffff
tab.border#00000000
tab.hoverBackground#171620
tab.hoverBorder#00000000
tab.hoverForeground#ffffff
tab.inactiveBackground#111017
tab.inactiveForeground#9C9AB1
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#21d3ff
terminal.ansiGreen#13FBA7
terminal.ansiMagenta#f93778
terminal.ansiRed#cd3131
terminal.ansiWhite#ffffff
terminal.ansiYellow#e5e510
terminal.border#38374E88
terminal.foreground#9C9AB1
terminal.selectionBackground#2D2C3F
terminalCursor.background#111017
terminalCursor.foreground#ffffff
textLink.foreground#2e7ff8
titleBar.activeBackground#171620
titleBar.activeForeground#9C9AB1
titleBar.border#38374E88
titleBar.inactiveBackground#171620
titleBar.inactiveForeground#2D2C3F
tree.indentGuidesStroke#38374E88
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000042

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#E777FA	—
meta.diff, meta.diff.header	#7E8392	—
markup.inserted	#13FBA7	—
markup.deleted	#F65454	—
markup.changed	#FB9D46	—
invalid	#F65454	underline italic
invalid.deprecated	#f6f6f4	underline italic
entity.name.filename	#FFEB81	—
markup.error	#F65454	—
markup.underline	—	underline
markup.bold	#FB9D46	bold
markup.heading	#E777FA	bold
markup.italic	#FFEB81	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#73F9F1	—
markup.inline.raw, markup.raw.restructuredtext	#13FBA7	—
markup.underline.link, markup.underline.link.image	#73F9F1	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#FF5F72	—
entity.name.directive.restructuredtext, markup.quote	#FFEB81	italic
meta.separator.markdown	#7E8392	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#13FBA7	—
punctuation.definition.constant.restructuredtext	#E777FA	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#E777FA	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#f6f6f4	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#FFEB81	—
entity.name.type.class, entity.name.class	#73F9F1	normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special	#E777FA	italic
entity.other.inherited-class	#73F9F1	italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#7E8392	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#FF5F72	—
comment.block.documentation entity.name.type	#73F9F1	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#73F9F1	—
comment.block.documentation variable	#FB9D46	italic
constant, variable.other.constant	#E777FA	—
constant.character.escape, constant.character.string.escape, constant.regexp	#FF5F72	—
entity.name.tag	#FF5F72	—
entity.other.attribute-name.parent-selector	#FF5F72	—
entity.other.attribute-name	#13FBA7	italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix	#13FBA7	—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter	#FB9D46	italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#13FBA7	italic
meta.decorator variable.other.object	#13FBA7	—
keyword, punctuation.definition.keyword, punctuation.quasi.element, punctuation.accessor	#FF5F72	—
keyword.control.new, keyword.operator.new	—	bold
meta.selector	#FF5F72	—
support	#73F9F1	italic
support.function.magic, support.variable, variable.other.predefined	#E777FA	regular
support.function, support.type.property-name	—	regular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation	#FF5F72	—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor	#f6f6f4	—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile	#FF5F72	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#73F9F1	—
constant.other.date, constant.other.timestamp	#FB9D46	—
variable.other.alias.yaml	#13FBA7	italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#FF5F72	regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml	#73F9F1	italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FB9D46	—
storage.modifier	#FF5F72	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#FFEB81	—
punctuation.definition.group.capture.regexp	#FF5F72	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#F65454	—
punctuation.definition.character-class.regexp	#73F9F1	—
punctuation.definition.group.regexp	#FB9D46	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#F65454	—
meta.assertion.look-ahead.regexp	#13FBA7	—
string	#FFEB81	—
punctuation.definition.string.begin, punctuation.definition.string.end	#E3EC79	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#73F9F1	—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	#7E8392	—
variable, constant.other.key.perl, support.variable.property	#f6f6f4	—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable	#FB9D46	italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#f6f6f4	normal
meta.selectionset.graphql variable	#FFEB81	—
meta.selectionset.graphql meta.arguments variable	#f6f6f4	—
entity.name.fragment.graphql, variable.fragment.graphql	#73F9F1	—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell	#f6f6f4	—
source.shell variable.other	#E777FA	—
support.constant	#E777FA	normal
meta.scope.prerequisites.makefile	#FFEB81	—
meta.attribute-selector.scss	#FFEB81	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#f6f6f4	—
meta.preprocessor.haskell	#7E8392	—
log.error	#F65454	bold
log.warning	#FFEB81	bold

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