Dark Lavender

Name: Dark Lavender
Author: t7yang

Publisher: t7yangThemes in package: 5

A smooth and nice dark theme for VSCode with material design colors.

Open in VS Code GitHub

Color themes

VS Code preview

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

Dark Lavender — Dark Lavender (Tailwind)

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.activeBorder#7c3aed
activityBar.background#07090f
activityBar.foreground#7c3aed
activityBar.inactiveForeground#f5f3ff66
activityBarBadge.background#6d28d9
badge.background#6d28d9
breadcrumbPicker.background#1d1e22
button.background#6d28d9
button.secondaryBackground#b91c1c
checkbox.background#303135
commandCenter.border#6d28d9
diffEditor.diagonalFill#33415580
diffEditor.insertedLineBackground#04785733
diffEditor.insertedTextBackground#04785766
diffEditor.removedLineBackground#be123c33
diffEditor.removedTextBackground#be123c66
diffEditorGutter.insertedLineBackground#0478571a
diffEditorGutter.removedLineBackground#be123c1a
dropdown.background#303135
dropdown.listBackground#303135
editor.background#07090f
editor.findMatchBackground#78350f40
editor.findMatchBorder#0000
editor.findMatchHighlightBackground#78350f33
editor.findMatchHighlightBorder#0000
editor.findRangeHighlightBackground#78350f1a
editor.findRangeHighlightBorder#0000
editor.foldBackground#4338ca4d
editor.foreground#f1f5f9
editor.inactiveSelectionBackground#0ea5e933
editor.lineHighlightBackground#3341554d
editor.lineHighlightBorder#0000
editor.selectionBackground#0ea5e94d
editor.selectionHighlightBackground#0369a14d
editor.selectionHighlightBorder#0000
editor.snippetFinalTabstopHighlightBorder#dc2626
editor.snippetTabstopHighlightBackground#7c3aed80
editor.wordHighlightBackground#1d4ed880
editor.wordHighlightBorder#0000
editor.wordHighlightStrongBackground#be185d80
editor.wordHighlightStrongBorder#0000
editorBracketHighlight.foreground1#67e8f9
editorBracketHighlight.foreground2#fca5a5
editorBracketHighlight.foreground3#d8b4fe
editorBracketHighlight.foreground4#bef264
editorBracketHighlight.foreground5#93c5fd
editorBracketHighlight.foreground6#fcd34d
editorBracketHighlight.unexpectedBracket.foreground#f9a8d4
editorBracketMatch.background#cbd5e133
editorBracketMatch.border#cbd5e1b3
editorBracketPairGuide.activeBackground1#67e8f9
editorBracketPairGuide.activeBackground2#fca5a5
editorBracketPairGuide.activeBackground3#d8b4fe
editorBracketPairGuide.activeBackground4#bef264
editorBracketPairGuide.activeBackground5#93c5fd
editorBracketPairGuide.activeBackground6#fcd34d
editorBracketPairGuide.background1#67e8f999
editorBracketPairGuide.background2#fca5a599
editorBracketPairGuide.background3#d8b4fe99
editorBracketPairGuide.background4#bef26499
editorBracketPairGuide.background5#93c5fd99
editorBracketPairGuide.background6#fcd34d99
editorError.foreground#be185d
editorGroupHeader.tabsBackground#07090f
editorGutter.addedBackground#047857
editorGutter.deletedBackground#be123c
editorGutter.modifiedBackground#1d4ed8
editorHint.foreground#a16207
editorIndentGuide.activeBackground#94a3b8
editorIndentGuide.background#1e293b
editorInfo.foreground#0369a1
editorLightBulb.foreground#eab308
editorLightBulbAutoFix.foreground#3b82f6
editorLineNumber.activeForeground#c026d3
editorLineNumber.foreground#334155
editorMarkerNavigationError.background#be185d
editorMarkerNavigationInfo.background#0369a1
editorMarkerNavigationWarning.background#c2410c
editorOverviewRuler.addedForeground#047857
editorOverviewRuler.currentContentForeground#10b981
editorOverviewRuler.deletedForeground#be123c
editorOverviewRuler.errorForeground#be185d
editorOverviewRuler.incomingContentForeground#3b82f6
editorOverviewRuler.infoForeground#0369a1
editorOverviewRuler.modifiedForeground#1d4ed8
editorOverviewRuler.warningForeground#c2410c
editorRuler.foreground#33415540
editorUnicodeHighlight.background#a162071a
editorUnicodeHighlight.border#a1620766
editorWarning.foreground#c2410c
editorWidget.background#07090f
editorWidget.border#6d28d9
errorForeground#be185d
extensionBadge.remoteBackground#8b5cf6
extensionButton.separator#6d28d9
extensionIcon.preReleaseForeground#f97316
extensionIcon.sponsorForeground#eab308
extensionIcon.starForeground#f59e0b
extensionIcon.verifiedForeground#3b82f6
focusBorder#6d28d9
foreground#f1f5f9
gitDecoration.addedResourceForeground#10b981cc
gitDecoration.conflictingResourceForeground#fdba74
gitDecoration.deletedResourceForeground#f43f5ecc
gitDecoration.modifiedResourceForeground#3b82f6cc
gitDecoration.renamedResourceForeground#6366f1cc
gitDecoration.stageDeletedResourceForeground#fda4af
gitDecoration.stageModifiedResourceForeground#93c5fd
gitDecoration.submoduleResourceForeground#67e8f9
gitDecoration.untrackedResourceForeground#10b981cc
icon.foreground#8b5cf6
input.background#303135
inputOption.activeBackground#6d28d9
inputValidation.errorBackground#831843
inputValidation.errorBorder#831843
inputValidation.infoBackground#0c4a6e
inputValidation.infoBorder#0c4a6e
inputValidation.warningBackground#7c2d12
inputValidation.warningBorder#7c2d12
keybindingLabel.background#6d28d9
list.activeSelectionBackground#701a75
list.dropBackground#1d1e22
list.errorForeground#ec4899
list.hoverBackground#26282c
list.inactiveSelectionBackground#26282c
list.warningForeground#f97316
menu.background#1d1e22
merge.currentContentBackground#04785733
merge.currentHeaderBackground#04785766
merge.incomingContentBackground#1d4ed833
merge.incomingHeaderBackground#1d4ed866
mergeEditor.change.background#4d7c0f1a
mergeEditor.change.word.background#4d7c0f4d
mergeEditor.conflict.handled.minimapOverViewRuler#3b82f6
mergeEditor.conflict.handledFocused.border#3b82f6
mergeEditor.conflict.handledUnfocused.border#1d4ed8
mergeEditor.conflict.unhandled.minimapOverViewRuler#f97316
mergeEditor.conflict.unhandledFocused.border#f97316
mergeEditor.conflict.unhandledUnfocused.border#c2410c
minimapSlider.activeBackground#f9fafb4d
minimapSlider.background#f9fafb33
minimapSlider.hoverBackground#f9fafb4d
notificationCenterHeader.background#1d1e22
notifications.background#1d1e22
notifications.border#6d28d9
panelInput.border#6d28d9
panelSection.border#6d28d9
panelSectionHeader.border#6d28d9
panelTitle.activeBorder#6d28d9
peekView.border#6d28d9
peekViewEditor.background#6d28d90d
peekViewEditor.matchHighlightBackground#f9731633
peekViewResult.background#6d28d90d
peekViewTitle.background#07090f
problemsErrorIcon.foreground#be185d
problemsInfoIcon.foreground#0369a1
problemsWarningIcon.foreground#c2410c
progressBar.background#6d28d9
settings.focusedRowBorder#6d28d9
settings.modifiedItemIndicator#b45309
sideBar.background#0a0c11
statusBar.background#07090f
statusBar.debuggingBackground#7f1d1d
statusBar.noFolderBackground#07090f
statusBarItem.errorBackground#be185d
statusBarItem.prominentBackground#6d28d9
statusBarItem.remoteBackground#6d28d9
statusBarItem.warningBackground#c2410c
symbolIcon.arrayForeground#f97316
symbolIcon.booleanForeground#f43f5e
symbolIcon.classForeground#eab308
symbolIcon.colorForeground#16a34a
symbolIcon.constantForeground#f43f5e
symbolIcon.constructorForeground#14b8a6
symbolIcon.enumeratorForeground#eab308
symbolIcon.enumeratorMemberForeground#0ea5e9
symbolIcon.fieldForeground#0ea5e9
symbolIcon.functionForeground#14b8a6
symbolIcon.interfaceForeground#eab308
symbolIcon.keyForeground#16a34a
symbolIcon.keywordForeground#8b5cf6
symbolIcon.methodForeground#14b8a6
symbolIcon.moduleForeground#f97316
symbolIcon.namespaceForeground#f97316
symbolIcon.nullForeground#f43f5e
symbolIcon.numberForeground#fbcfe8
symbolIcon.objectForeground#f97316
symbolIcon.operatorForeground#16a34a
symbolIcon.packageForeground#f97316
symbolIcon.propertyForeground#0ea5e9
symbolIcon.stringForeground#a7f3d0
symbolIcon.structForeground#eab308
symbolIcon.textForeground#f1f5f9
symbolIcon.typeParameterForeground#ef4444
symbolIcon.unitForeground#16a34a
symbolIcon.variableForeground#f97316
tab.activeBackground#141519
tab.activeBorder#7c3aed
tab.activeForeground#f9fafb
tab.activeModifiedBorder#f59e0b
tab.inactiveBackground#07090f
tab.inactiveForeground#6b7280
terminal.ansiBlack#0f172a
terminal.ansiBlue#1e3a8a
terminal.ansiBrightBlack#334155
terminal.ansiBrightBlue#3b82f6
terminal.ansiBrightCyan#06b6d4
terminal.ansiBrightGreen#10b981
terminal.ansiBrightMagenta#ec4899
terminal.ansiBrightRed#f43f5e
terminal.ansiBrightWhite#cbd5e1
terminal.ansiBrightYellow#eab308
terminal.ansiCyan#0e7490
terminal.ansiGreen#047857
terminal.ansiMagenta#be185d
terminal.ansiRed#be123c
terminal.ansiWhite#64748b
terminal.ansiYellow#a16207
textLink.activeForeground#f97316
textLink.foreground#3b82f6
titleBar.activeBackground#07090f
titleBar.inactiveBackground#141519
widget.border#8b5cf6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#64748b	—
constant.language, variable.language, variable.parameter.function.language.special, keyword, keyword.operator.alignas, keyword.operator.alignof, keyword.operator.cast, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.new, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike, meta.control, storage, support	—	italic
constant.name.attribute.tag.pug, meta.brace, meta.decorator, punctuation.accessor, punctuation.brace, punctuation.brackets, punctuation.colon, punctuation.comma, punctuation.decorator, punctuation.definition, punctuation.delimiter.comma, punctuation.delimiter.object.comma, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.operation, punctuation.other.comma, punctuation.section, punctuation.semi, punctuation.separator, punctuation.terminator, string.interpolated.pug, support.function.interpolation.sass	#a5b4fc
keyword.operator, keyword.other.unit	#16a34a
keyword, keyword.control, keyword.other.special-method.elixir, meta.control.flow	#8b5cf6	italic
source.cs keyword.other.class, source.cs keyword.other.get, source.cs keyword.other.set, source.cs keyword.other.var, punctuation.definition.function.pointer, storage, storage.type.struct	#ec4899	—
entity.name.function, keyword.other.special-method, meta.function-call, meta.method-call, meta.require, punctuation.definition.function, support.function, support.function.any-method, variable.function	#14b8a6	—
entity.name.class, entity.name.type, entity.other.inherited-class, keyword.type, keyword.other.type, meta.class.inheritance, meta.class.instance, meta.function.definition, meta.type, source.cs storage.type, storage.type.built-in, storage.type.haskell, support.class, support.type, variable.other.constant.elixir	#eab308	—
constant.numeric, constant.character.numeric, variable.other.anonymous.elixir	#fbcfe8	—
constant.character, storage.type.string, string, support.constant.property-value, support.function.variable.quoted.single.elixir	#a7f3d0	—
constant.character.escape	#fef08a	—
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	#6366f1	—
keyword.operator.quantifier.regexp	#fbcfe8	—
keyword.control.anchor.regexp	#d946ef	—
constant.character.character-class.regexp, constant.character.set.regexp, constant.other.character-class, constant.other.character-class.regexp, constant.other.character-class.set.regexp	#f43f5e	—
meta.function-call, parameter.variable.function.elixir, variable.other.block.ruby, variable.parameter	#ef4444	—
entity.name.namespace, entity.name.scope-resolution, entity.name.variable, meta.property-value, punctuation.definition.variable, string meta.embedded.line.ruby, string source.groovy, source.cpp meta.bracket.square.access, source.cpp meta.parens, source.python constant.other.caps, support.other, support.type.object, variable	#f97316	—
constant, entity.name.function.preprocessor, meta.preprocessor, punctuation.definition.constant, support.constant, support.constant.property-value.css, support.variable.magic.python, variable.other.constant	—	bold
constant.character, constant.language, constant.other, meta.property-value.css, source.php variable.language.this punctuation.definition.variable, support.constant, support.constant.property-value.css, support.variable.magic.python, variable.language, variable.parameter.function.language.special	#f43f5e	—
constant.other.key, constant.other.object.key.js, entity.name.label, entity.name.tag.yaml, entity.name.variable.field, entity.name.variable.property, meta.at-rule.keyframes.body, meta.object-literal.key, meta.object-literal.key string, meta.object.member, meta.meta.objectliteral, meta.property-name, punctuation.definition.variable.ruby, string.unquoted.label.js, source.python meta.attribute, support.constant.property, support.type.map.key, support.type.property-name, support.type.vendored.property-name, support.variable.property, variable.graphql, variable.object.property, variable.other.constant.property, variable.other.member, variable.other.object.property, variable.other.enummember, variable.other.property, variable.other.readwrite.class, variable.other.readwrite.instance	#0ea5e9	—
support.type.property-name	—
entity.name.tag	#8b5cf6	—
entity.other.attribute-name, meta.attribute, string.unquoted.alias.graphql	#ec4899	—
entity.other.attribute-name.id	#f97316	—
entity.name.section, markup.heading, punctuation.definition.heading	#d946ef
meta.paragraph	#f1f5f9	—
markup.list, markup.list meta.paragraph	#bef264	—
markup.quote meta.paragraph	#93c5fd	italic
markup.italic, punctuation.definition.italic	#fca5a5	italic
markup.bold, punctuation.definition.bold	#fca5a5	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#fca5a5	bold
markup.underline	#fca5a5	underline
markup.fenced_code.block, markup.inline.raw, markup.raw.block, markup.raw.inline	#f97316	—
markup.inserted	#10b981	—
markup.deleted	#ec4899	—
markup.changed	#3b82f6	—
meta.link, markup.underline.link	#7dd3fc	—
string.other.link	#fdba74	—
meta.separator	#cbd5e1	—
variable.interpolation	#6366f1	—
invalid, invalid.illegal	#be185d	—
string.interpolated.dollar.shell	#ec4899	—
string.other.math.shell	#6366f1	—
comment.rainbow4	#f97316	—
markup.bold.rainbow9	#8b5cf6	—
invalid.rainbow10	#ef4444	—
source.json meta.structure.dictionary.json support.type.property-name.json	#ffedd5	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#fde047	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#86efac	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5eead4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7dd3fc	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#a5b4fc	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f0abfc	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f9a8d4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#fdba74	—

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