Dark Plus Oled

Name: Dark Plus Oled
Author: Weiyu Wang

Publisher: Weiyu WangThemes in package: 6

Dark Plus Oled

Open in VS Code GitHub

Color themes

VS Code preview

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

Dark Plus Oled — Dark Plus Oled 85 Dim

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...

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#000000
activityBar.border#001221ff
activityBar.dropBackground#506b80ff
activityBar.foreground#506b80ff
activityBarBadge.background#0067adff
activityBarBadge.foreground#d8d8d8ff
badge.background#506b80ff
badge.foreground#d8d8d8ff
breadcrumb.activeSelectionForeground#d8d8d8ff
breadcrumb.focusForeground#d8d8d8ff
breadcrumb.foreground#8c82c6ff
breadcrumbPicker.background#000e1cff
button.background#6b49d8cc
button.foreground#d8d8d8cc
button.hoverBackground#6b49a4ff
checkbox.border#5a5a5aff
contrastBorder#0f2638ff
debugExceptionWidget.background#001221ff
debugExceptionWidget.border#506b80ff
debugToolBar.background#001221ff
diffEditor.insertedTextBackground#829bd823
diffEditor.insertedTextBorder#a7c1d833
diffEditor.removedTextBackground#cb46d833
diffEditor.removedTextBorder#cb46d84d
dropdown.background#001221ff
dropdown.border#506b80ff
dropdown.foreground#d8d8d8cc
editor.background#000000
editor.findMatchBackground#506bd879
editor.findMatchHighlightBackground#0d71d85d
editor.foreground#b4b4b4ff
editor.hoverHighlightBackground#6b49d85a
editor.inactiveSelectionBackground#313337ff
editor.rangeHighlightBackground#6b49d85a
editor.selectionBackground#183246ff
editor.selectionHighlightBackground#93b5d826
editor.wordHighlightBackground#d19ed833
editor.wordHighlightStrongBackground#c089d833
editorBracketMatch.background#506bd84d
editorCodeLens.foreground#4f6ed8b4
editorCursor.foreground#6c8ba4ff
editorError.foreground#cb4644ff
editorGroup.border#000000
editorGroup.dropBackground#000000
editorGroup.emptyBackground#000000
editorGroupHeader.noTabsBackground#000000
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#202330ff
editorGutter.addedBackground#84ad55ff
editorGutter.background#000000
editorGutter.deletedBackground#cb4644ff
editorGutter.modifiedBackground#c09d33ff
editorHoverWidget.background#001221ff
editorHoverWidget.border#506b80ff
editorIndentGuide.activeBackground#000000
editorIndentGuide.background#000000
editorLineNumber.activeForeground#a7c1d7ff
editorLineNumber.foreground#3f5566ff
editorMarkerNavigation.background#092238ff
editorMarkerNavigationError.background#cb4644ff
editorMarkerNavigationWarning.background#d8ab22ff
editorOverviewRuler.commonContentForeground#6b49a4ff
editorOverviewRuler.currentContentForeground#6b49a4ff
editorOverviewRuler.incomingContentForeground#6b49a4ff
editorRuler.foreground#4f6dd852
editorSuggestWidget.background#252838ff
editorSuggestWidget.border#242736ff
editorSuggestWidget.foreground#b5bcc7ff
editorSuggestWidget.highlightForeground#d8d8d8ff
editorSuggestWidget.selectedBackground#506b80ff
editorWarning.foreground#987e47ff
editorWidget.background#01101bff
editorWidget.border#506b80ff
errorForeground#cb4644ff
extensionButton.prominentBackground#6b49d8cc
extensionButton.prominentForeground#d8d8d8cc
extensionButton.prominentHoverBackground#6b49a4ff
focusBorder#0f2638ff
foreground#b5bcc7ff
gitDecoration.conflictingResourceForeground#d8c7d8cc
gitDecoration.deletedResourceForeground#cb46d890
gitDecoration.ignoredResourceForeground#304c63ff
gitDecoration.modifiedResourceForeground#89a2d6ff
gitDecoration.untrackedResourceForeground#a7c1d8ff
input.background#091f31ff
input.border#506b80ff
input.foreground#d8d8d8cc
input.placeholderForeground#8d8d8dff
inputOption.activeBorder#d8d8d8cc
inputValidation.errorBackground#9102d8f2
inputValidation.errorBorder#cb4644ff
inputValidation.infoBackground#004ad8f2
inputValidation.infoBorder#5599d1ff
inputValidation.warningBackground#5749d8f2
inputValidation.warningBorder#d8ab22ff
list.activeSelectionBackground#1d41d88c
list.activeSelectionForeground#d8d8d8ff
list.activeSelectionIconForeground#d80cd8ff
list.dropBackground#2f3233ff
list.focusBackground#000b14ff
list.focusForeground#d8d8d8ff
list.highlightForeground#d8d8d8ff
list.hoverBackground#001221ff
list.hoverForeground#d8d8d8ff
list.inactiveSelectionBackground#0b2235ff
list.inactiveSelectionForeground#506b80ff
list.invalidItemForeground#80507dff
menu.background#000000
menu.border#000000
menu.foreground#adadadff
menu.separatorBackground#3a3a3aff
merge.currentHeaderBackground#506b80ff
merge.incomingHeaderBackground#6b49d85a
meta.objectliteral.js#6e90d8ff
notificationCenter.border#202330ff
notificationLink.foreground#6caca6ff
notifications.background#000e18ff
notifications.border#202330ff
notifications.foreground#d8d8d8cc
notificationToast.border#202330ff
panel.background#000000
panel.border#506b80ff
panel.foreground#d8d8d8ff
panelTitle.activeBorder#506b80ff
panelTitle.activeForeground#d8d8d8cc
panelTitle.inactiveForeground#b5bcd880
peekView.border#506b80ff
peekViewEditor.background#001221ff
peekViewEditor.matchHighlightBackground#6b49d85a
peekViewResult.background#001221ff
peekViewResult.fileForeground#506b80ff
peekViewResult.lineForeground#506b80ff
peekViewResult.matchHighlightBackground#d8d8d8cc
peekViewResult.selectionBackground#272a44ff
peekViewResult.selectionForeground#506b80ff
peekViewTitle.background#001221ff
peekViewTitleDescription.foreground#595f81ff
peekViewTitleLabel.foreground#506b80ff
pickerGroup.border#001221ff
pickerGroup.foreground#b190d8ff
ports.iconRunningProcessForeground#2d7d2aff
progress.background#6b49a4ff
punctuation.definition.generic.begin.html#cb46d8f2
scrollbar.shadow#000911ff
selection.background#3861a4ff
sideBar.background#000000
sideBar.border#001221ff
sideBar.foreground#748bd8ff
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#000000
sideBarSectionHeader.foreground#506b80ff
sideBarTitle.foreground#9e9e9eff
source.elm#506b80ff
statusBar.background#000000
statusBar.border#202330ff
statusBar.debuggingBackground#1b1e29ff
statusBar.debuggingBorder#1a1d28ff
statusBar.foreground#506b80ff
statusBar.noFolderBackground#001221ff
statusBar.noFolderBorder#1f2231ff
statusBarItem.activeBackground#1b1e29ff
statusBarItem.hoverBackground#1b1e29ff
statusBarItem.prominentBackground#1b1e29ff
statusBarItem.prominentHoverBackground#1b1e29ff
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#d80cd8ff
string.quoted.single.js#d8d8d8ff
tab.activeBackground#092238ff
tab.activeBorder#202330ff
tab.activeForeground#b2bcc4ff
tab.border#212432ff
tab.inactiveBackground#000000
tab.inactiveForeground#506b80ff
tab.lastPinnedBorder#ada5d8ff
tab.unfocusedActiveBorder#202330ff
tab.unfocusedActiveForeground#506b80ff
tab.unfocusedInactiveForeground#506b80ff
terminal.ansiBlack#001221ff
terminal.ansiBlue#6e90d8ff
terminal.ansiBrightBlack#494949ff
terminal.ansiBrightBlue#6e90d8ff
terminal.ansiBrightCyan#6bbaabff
terminal.ansiBrightGreen#1cb95dff
terminal.ansiBrightMagenta#a97cc6ff
terminal.ansiBrightRed#cb4644ff
terminal.ansiBrightWhite#d8d8d8ff
terminal.ansiBrightYellow#d8c77eff
terminal.ansiCyan#1ca98eff
terminal.ansiGreen#1cb95dff
terminal.ansiMagenta#a97cc6ff
terminal.ansiRed#cb4644ff
terminal.ansiWhite#d8d8d8ff
terminal.ansiYellow#a7c166ff
terminal.background#000000
terminal.foreground#d8d8d8ff
terminal.inactiveSelectionBackground#313337ff
terminal.selectionBackground#167ad84d
terminalCursor.background#1d415fff
textCodeBlock.background#434343ff
titleBar.activeBackground#000000
titleBar.activeForeground#cacbd8ff
titleBar.inactiveBackground#000000
walkThrough.embeddedEditorBackground#001221ff
welcomePage.buttonBackground#001221ff
welcomePage.buttonHoverBackground#001221ff
widget.border#282829ff
widget.shadow#001221ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown	#b4b4b4ff	—
emphasis	—	italic
strong	—	bold
header	#00006cff	—
comment, string.quoted.docstring	#5a8248ff	—
constant.language	#4984b5ff	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#99af8eff	—
constant.regexp	#55567eff	—
entity.name.tag	#4984b5ff	—
entity.name.tag.css	#b69e6aff	—
entity.other.attribute-name	#84bbd7ff	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#b69e6aff	—
invalid	#cf3c3cff	—
markup.underline	—	underline
markup.bold	#4984b5ff	bold
markup.heading	#4984b5ff	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#99af8eff	—
markup.deleted	#af7b66ff	—
markup.changed	#4984b5ff	—
punctuation.definition.quote.begin.markdown	#5a8248ff	—
punctuation.definition.list.begin.markdown	#577fc3ff	—
markup.inline.raw	#af7b66ff	—
punctuation.definition.tag	#6c6c6cff	—
meta.preprocessor, entity.name.function.preprocessor	#4984b5ff	—
meta.preprocessor.string	#af7b66ff	—
meta.preprocessor.numeric	#99af8eff	—
meta.structure.dictionary.key.python	#84bbd7ff	—
meta.diff.header	#4984b5ff	—
storage	#4984b5ff	—
storage.type	#4984b5ff	—
storage.modifier, keyword.operator.noexcept	#4984b5ff	—
string, meta.embedded.assembly	#af7b66ff	—
string.tag	#af7b66ff	—
string.value	#af7b66ff	—
string.regexp	#b15959ff	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#4984b5ff	—
meta.template.expression	#b4b4b4ff	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#84bbd7ff	—
keyword	#4984b5ff	—
keyword.control	#4984b5ff	—
keyword.operator	#b4b4b4ff	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#4984b5ff	—
keyword.other.unit	#99af8eff	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#4984b5ff	—
support.function.git-rebase	#84bbd7ff	—
constant.sha.git-rebase	#99af8eff	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#b4b4b4ff	—
variable.language	#4984b5ff	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#bbbb90ff	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#42aa95ff	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#42aa95ff	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator	#a771a3ff	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#84bbd7ff	—
variable.other.constant, variable.other.enummember	#43a4d8ff	—
meta.object-literal.key	#84bbd7ff	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#af7b66ff	—
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	#af7b66ff	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#b15959ff	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#bbbb90ff	—
keyword.operator.quantifier.regexp	#b69e6aff	—
constant.character, constant.other.option	#4984b5ff	—
constant.character.escape	#b69e6aff	—
entity.name.label	#aaaaaaff	—

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