Oh My Dark

Name: Oh My Dark
Author: luanzt

Publisher: luanztThemes in package: 1

Cursor Dark UI paired with Dracula Soft syntax colors. Oh My Dark keeps the Cursor Dark interface while coloring your code the Dracula Soft way.

Open in VS Code GitHub

VS Code preview

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

Oh My Dark — Oh My Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.background#141414
activityBar.foreground#F0F0F0BD
activityBarBadge.background#88C0D0
activityBarBadge.foreground#141414
badge.background#88C0D0
badge.foreground#141414
breadcrumb.activeSelectionForeground#F0F0F0
breadcrumb.background#181818
breadcrumb.foreground#F0F0F0BD
breadcrumbPicker.background#141414
button.background#81A1C1
button.foreground#191c22
button.hoverBackground#87A6C4
button.secondaryBackground#626262
button.secondaryForeground#F0F0F0
button.secondaryHoverBackground#818181
charts.green#3FA266
charts.red#E34671
charts.yellow#F1B467
debugExceptionWidget.background#181818
debugExceptionWidget.border#141414
debugToolBar.background#141414
diffEditor.diagonalFill#F0F0F013
diffEditor.insertedLineBackground#3FA26633
diffEditor.insertedTextBackground#3FA26622
diffEditor.removedLineBackground#B8004933
diffEditor.removedTextBackground#B8004922
dropdown.background#181818
dropdown.border#F0F0F013
dropdown.foreground#F0F0F0
editor.background#181818
editor.findMatchBackground#88C0D066
editor.findMatchHighlightBackground#88C0D044
editor.findRangeHighlightBackground#F0F0F011
editor.foreground#F0F0F0
editor.hoverHighlightBackground#F0F0F01E
editor.inactiveSelectionBackground#40404077
editor.lineHighlightBackground#262626
editor.lineHighlightBorder#262626
editor.rangeHighlightBackground#40404052
editor.selectionBackground#40404099
editor.selectionHighlightBackground#404040CC
editor.snippetFinalTabstopHighlightBorder#CCCCCC
editor.snippetTabstopHighlightBackground#CCCCCC55
editor.wordHighlightBackground#F0F0F01E
editor.wordHighlightStrongBackground#F0F0F030
editorBracketMatch.background#F0F0F01E
editorBracketMatch.border#14141400
editorCodeLens.foreground#F0F0F0BD
editorCursor.foreground#F0F0F0
editorError.border#E3467100
editorError.foreground#E34671
editorGroup.border#F0F0F013
editorGroup.dropBackground#F0F0F011
editorGroup.emptyBackground#141414
editorGroupHeader.noTabsBackground#141414
editorGroupHeader.tabsBackground#141414
editorGroupHeader.tabsBorder#F0F0F013
editorGutter.addedBackground#3FA266
editorGutter.background#181818
editorGutter.deletedBackground#E34671
editorGutter.modifiedBackground#D2943E
editorHoverWidget.background#141414
editorHoverWidget.border#F0F0F026
editorHoverWidget.foreground#F0F0F0
editorIndentGuide.activeBackground1#F0F0F030
editorIndentGuide.background1#F0F0F013
editorInlayHint.background#00000000
editorInlayHint.foreground#F0F0F05C
editorInlayHint.parameterBackground#00000000
editorInlayHint.parameterForeground#F0F0F05C
editorInlayHint.typeBackground#00000000
editorInlayHint.typeForeground#F0F0F05C
editorLineNumber.activeForeground#F0F0F0
editorLineNumber.foreground#F0F0F05C
editorLink.activeForeground#F0F0F0
editorMarkerNavigation.background#ffffff70
editorMarkerNavigationError.background#E34671C0
editorMarkerNavigationWarning.background#CCCCCC
editorOverviewRuler.addedForeground#3FA26684
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#E3467184
editorOverviewRuler.errorForeground#B80049
editorOverviewRuler.findMatchForeground#F0F0F011
editorOverviewRuler.modifiedForeground#B9790084
editorRuler.foreground#F0F0F05C
editorStickyScroll.border#F0F0F013
editorSuggestWidget.background#141414
editorSuggestWidget.border#F0F0F013
editorSuggestWidget.foreground#F0F0F0
editorSuggestWidget.highlightForeground#F0F0F0
editorSuggestWidget.selectedBackground#343434
editorWarning.border#F0F0F000
editorWarning.foreground#F1B467
editorWhitespace.foreground#505050B3
editorWidget.background#141414
editorWidget.resizeBorder#F0F0F026
errorForeground#E34671
extensionButton.prominentBackground#626262
extensionButton.prominentForeground#F0F0F0
extensionButton.prominentHoverBackground#818181
focusBorder#F0F0F026
foreground#F0F0F0
gitDecoration.addedResourceForeground#70B489
gitDecoration.deletedResourceForeground#FC6B83
gitDecoration.ignoredResourceForeground#F0F0F099
gitDecoration.modifiedResourceForeground#F1B467
gitDecoration.untrackedResourceForeground#88C0D0
gitlens.trailingLineForegroundColor#F0F0F0BD
input.background#F0F0F00A
input.border#F0F0F013
input.foreground#F0F0F0
input.placeholderForeground#F0F0F099
inputOption.activeBackground#F0F0F01E
inputOption.activeBorder#F0F0F000
inputValidation.errorBackground#141414
inputValidation.errorBorder#E34671
inputValidation.errorForeground#FC6B83
inputValidation.infoBackground#141414
inputValidation.infoBorder#88C0D0
inputValidation.infoForeground#88C0D0
inputValidation.warningBackground#141414
inputValidation.warningBorder#D2943E
inputValidation.warningForeground#F1B467
list.activeSelectionBackground#F0F0F01E
list.activeSelectionForeground#F0F0F0
list.deemphasizedForeground#F0F0F0BD
list.dropBackground#F0F0F011
list.errorForeground#FC6B83
list.focusBackground#F0F0F01E
list.focusForeground#F0F0F0
list.highlightForeground#88C0D0
list.hoverBackground#F0F0F011
list.hoverForeground#F0F0F0
list.inactiveSelectionBackground#F0F0F011
list.inactiveSelectionForeground#F0F0F0
list.invalidItemForeground#F0F0F099
list.warningForeground#F1B467
menu.background#141414
menu.border#F0F0F013
menu.foreground#F0F0F0
menu.separatorBackground#F0F0F013
menubar.selectionBackground#F0F0F011
merge.border#2A2A2A00
merge.currentContentBackground#88C0D04D
merge.currentHeaderBackground#88C0D066
merge.incomingContentBackground#3FA2664D
merge.incomingHeaderBackground#3FA26666
minimap.background#181818
minimap.errorHighlight#CD2A4F
minimap.findMatchHighlight#88C0D044
minimap.selectionHighlight#F0F0F011
minimap.warningHighlight#ea7620
minimapGutter.addedBackground#3FA266
minimapGutter.deletedBackground#E34671
minimapGutter.modifiedBackground#D2943E
notificationLink.foreground#88C0D0
notifications.background#141414
notifications.foreground#F0F0F0
panel.background#141414
panel.border#F0F0F013
panelTitle.activeBorder#F0F0F000
panelTitle.activeForeground#F0F0F0
panelTitle.inactiveForeground#F0F0F0BD
peekView.border#F0F0F05C
peekViewEditor.background#141414
peekViewEditor.matchHighlightBackground#88C0D044
peekViewEditorGutter.background#141414
peekViewResult.background#141414
peekViewResult.fileForeground#F0F0F0
peekViewResult.lineForeground#F0F0F0BD
peekViewResult.matchHighlightBackground#88C0D044
peekViewResult.selectionBackground#343434
peekViewResult.selectionForeground#F0F0F0
peekViewTitle.background#242424
peekViewTitleDescription.foreground#F0F0F0
peekViewTitleLabel.foreground#F0F0F0
pickerGroup.border#F0F0F01C
pickerGroup.foreground#F0F0F0
progressBar.background#3FA266
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#F0F0F01E
scrollbarSlider.background#F0F0F011
scrollbarSlider.hoverBackground#F0F0F01E
selection.background#F0F0F030
sideBar.background#141414
sideBar.border#F0F0F013
sideBar.foreground#F0F0F0BD
sideBarSectionHeader.background#141414
sideBarSectionHeader.foreground#F0F0F05C
sideBarTitle.foreground#F0F0F0BD
statusBar.background#141414
statusBar.border#F0F0F013
statusBar.debuggingBackground#F0F0F01C
statusBar.debuggingForeground#F0F0F0
statusBar.foreground#F0F0F099
statusBar.noFolderBackground#141414
statusBar.noFolderForeground#F0F0F0
statusBarItem.activeBackground#F0F0F01E
statusBarItem.hoverBackground#F0F0F011
statusBarItem.prominentBackground#F0F0F011
statusBarItem.prominentHoverBackground#F0F0F01E
statusBarItem.remoteBackground#141414
statusBarItem.remoteForeground#F0F0F0BD
tab.activeBackground#181818
tab.activeBorder#181818
tab.activeBorderTop#F0F0F000
tab.activeForeground#F0F0F0
tab.border#F0F0F013
tab.hoverBackground#F0F0F000
tab.inactiveBackground#141414
tab.inactiveForeground#F0F0F05C
tab.unfocusedActiveBorder#181818
tab.unfocusedActiveForeground#F0F0F0BD
tab.unfocusedHoverBackground#2A2A2AB3
tab.unfocusedHoverBorder#88C0D000
tab.unfocusedInactiveForeground#F0F0F0BD
terminal.ansiBlack#242424
terminal.ansiBlue#81A1C1
terminal.ansiBrightBlack#F0F0F099
terminal.ansiBrightBlue#87A6C4
terminal.ansiBrightCyan#88C0D0
terminal.ansiBrightGreen#70B489
terminal.ansiBrightMagenta#B48EAD
terminal.ansiBrightRed#FC6B83
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F1B467
terminal.ansiCyan#88C0D0
terminal.ansiGreen#3FA266
terminal.ansiMagenta#B48EAD
terminal.ansiRed#FC6B83
terminal.ansiWhite#F0F0F0
terminal.ansiYellow#D2943E
terminal.background#141414
terminal.foreground#F0F0F0
terminal.selectionBackground#F0F0F01E
terminalCursor.background#141414
terminalCursor.foreground#F0F0F0
terminalStickyScroll.border#F0F0F013
textLink.activeForeground#87A6C4
textLink.foreground#81A1C1
textPreformat.foreground#88C0D0
textSeparator.foreground#88C0D0
titleBar.activeBackground#141414
titleBar.activeForeground#F0F0F084
titleBar.border#F0F0F013
titleBar.inactiveBackground#141414
titleBar.inactiveForeground#F0F0F099
tree.inactiveIndentGuidesStroke#F0F0F013
tree.indentGuidesStroke#F0F0F030
walkThrough.embeddedEditorBackground#141414
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#bf9eee	—
meta.diff, meta.diff.header	#7b7f8b	—
markup.inserted	#62e884	—
markup.deleted	#ee6666	—
markup.changed	#FFB86C	—
invalid	#ee6666	underline italic
invalid.deprecated	#f6f6f4	underline italic
entity.name.filename	#e7ee98	—
markup.error	#ee6666	—
markup.underline	—	underline
markup.bold	#FFB86C	bold
markup.heading	#bf9eee	bold
markup.italic	#e7ee98	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#97e1f1	—
markup.inline.raw, markup.raw.restructuredtext	#62e884	—
markup.underline.link, markup.underline.link.image	#97e1f1	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#f286c4	—
entity.name.directive.restructuredtext, markup.quote	#e7ee98	italic
meta.separator.markdown	#7b7f8b	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#62e884	—
punctuation.definition.constant.restructuredtext	#bf9eee	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#bf9eee	—
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	#e7ee98	—
entity.name.type.class, entity.name.class	#97e1f1	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	#bf9eee	italic
entity.other.inherited-class	#97e1f1	italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#7b7f8b	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#f286c4	—
comment.block.documentation entity.name.type	#97e1f1	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#97e1f1	—
comment.block.documentation variable	#FFB86C	italic
constant, variable.other.constant	#bf9eee	—
constant.character.escape, constant.character.string.escape, constant.regexp	#f286c4	—
entity.name.tag	#f286c4	—
entity.other.attribute-name.parent-selector	#f286c4	—
entity.other.attribute-name	#62e884	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	#62e884	—
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	#FFB86C	italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#62e884	italic
meta.decorator variable.other.object	#62e884	—
keyword, punctuation.definition.keyword	#f286c4	—
keyword.control.new, keyword.operator.new	—	bold
meta.selector	#f286c4	—
support	#97e1f1	italic
support.function.magic, support.variable, variable.other.predefined	#bf9eee	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	#f286c4	—
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	#f286c4	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#97e1f1	—
constant.other.date, constant.other.timestamp	#FFB86C	—
variable.other.alias.yaml	#62e884	italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#f286c4	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	#97e1f1	italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FFB86C	—
storage.modifier	#f286c4	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#e7ee98	—
punctuation.definition.group.capture.regexp	#f286c4	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#ee6666	—
punctuation.definition.character-class.regexp	#97e1f1	—
punctuation.definition.group.regexp	#FFB86C	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#ee6666	—
meta.assertion.look-ahead.regexp	#62e884	—
string	#e7ee98	—
punctuation.definition.string.begin, punctuation.definition.string.end	#dee492	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#97e2f2	—
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	#7b7f8b	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#f6f6f4	—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable	#FFB86C	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	#e7ee98	—
meta.selectionset.graphql meta.arguments variable	#f6f6f4	—
entity.name.fragment.graphql, variable.fragment.graphql	#97e1f1	—
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	#bf9eee	—
support.constant	#bf9eee	normal
meta.scope.prerequisites.makefile	#e7ee98	—
meta.attribute-selector.scss	#e7ee98	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#f6f6f4	—
meta.preprocessor.haskell	#7b7f8b	—
log.error	#ee6666	bold
log.warning	#e7ee98	bold