developer812 dark theme

Name: developer812 dark theme
Author: developer812

Publisher: developer812Themes in package: 1

It is the first dark theme by developer812

GitHub

VS Code preview

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

developer812 dark theme — developer812 dark theme

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.background#010B14
activityBar.border#010B1460
activityBar.foreground#DE63F7
activityBarBadge.background#3590F3
activityBarBadge.foreground#010B14
badge.background#010B1430
badge.foreground#C11CCF
breadcrumb.activeSelectionForeground#C11CCF
breadcrumb.background#010B14
breadcrumb.focusForeground#DE63F7
breadcrumb.foreground#FF6BEF
breadcrumbPicker.background#010B14
button.background#C11CCF50
button.hoverBackground#e045ffea
contrastBorder#C11CCF40
debugToolBar.background#010B14
diffEditor.insertedTextBackground#03071E15
diffEditor.removedTextBackground#4CC9F020
dropdown.background#010B14
dropdown.border#E381E910
dropdown.listBackground#000000
editor.background#010B14
editor.findMatchBackground#010B14
editor.findMatchBorder#ffba08
editor.findMatchHighlightBackground#00028a
editor.findMatchHighlightBorder#e9e9e9
editor.foreground#DE63F7
editor.lineHighlightBackground#010B1450
editor.selectionBackground#3591f37c
editor.selectionHighlightBackground#C11CCF6b
editor.selectionHighlightBorder#3590F3f0
editorBracketMatch.background#010B14
editorBracketMatch.border#FFFFFF7f
editorCursor.foreground#ffba08
editorError.foreground#ff1b1be1
editorGroup.border#ff4be7
editorGroupHeader.tabsBackground#010B14
editorGutter.addedBackground#03071E60
editorGutter.deletedBackground#4CC9F060
editorGutter.modifiedBackground#3590F360
editorHoverWidget.background#010B14
editorHoverWidget.border#E381E910
editorIndentGuide.activeBackground#02355F
editorIndentGuide.background#02355F70
editorInfo.foreground#3590F370
editorLineNumber.activeForeground#3590F3
editorLineNumber.foreground#c01ccf60
editorLink.activeForeground#DE63F7
editorMarkerNavigation.background#DE63F705
editorOverviewRuler.border#010B14
editorOverviewRuler.errorForeground#4CC9F040
editorOverviewRuler.findMatchForeground#C11CCF
editorOverviewRuler.infoForeground#3590F340
editorOverviewRuler.warningForeground#FFFFFF70
editorRuler.foreground#02355F
editorSuggestWidget.background#010B14
editorSuggestWidget.border#E381E910
editorSuggestWidget.foreground#DE63F7
editorSuggestWidget.highlightForeground#FFFFFF
editorSuggestWidget.selectedBackground#C11CCF20
editorWarning.foreground#03071E
editorWhitespace.foreground#DE63F740
editorWidget.background#010B14
editorWidget.border#FFFFFF
editorWidget.resizeBorder#C11CCF
extensionButton.prominentBackground#2ec4b6
extensionButton.prominentHoverBackground#d5f5ffe5
focusBorder#E381E900
gitDecoration.conflictingResourceForeground#FFFFFF
gitDecoration.deletedResourceForeground#4CC9F0
gitDecoration.ignoredResourceForeground#C11CCF
gitDecoration.modifiedResourceForeground#FF6BEF
gitDecoration.untrackedResourceForeground#3590F3
input.background#000000
input.border#000000
input.foreground#DE63F7
input.placeholderForeground#DE63F760
inputOption.activeBackground#DE63F730
inputOption.activeBorder#DE63F730
inputValidation.errorBackground#d62828
inputValidation.errorBorder#d62828
inputValidation.errorForeground#FFFFFF
inputValidation.infoBorder#3590F350
inputValidation.warningBackground#ffd60adc
inputValidation.warningBorder#ffd60ade
inputValidation.warningForeground#FFFFFF
list.activeSelectionBackground#010B14
list.activeSelectionForeground#C11CCF
list.focusBackground#000C40
list.focusForeground#3590F3
list.highlightForeground#C11CCF
list.hoverBackground#02355F
list.hoverForeground#E381E9
list.inactiveSelectionBackground#010B1430
list.inactiveSelectionForeground#C11CCF
list.warningForeground#FFFFFF
listFilterWidget.background#010B1430
listFilterWidget.noMatchesOutline#010B1430
listFilterWidget.outline#010B1430
menu.background#010B14f8
menu.border#C11CCF50
menu.foreground#DE63F7
menu.selectionBackground#000C40
menu.selectionBorder#010B1430
menu.selectionForeground#DE63F7
menu.separatorBackground#DE63F7
menubar.selectionBackground#000C40
menubar.selectionBorder#C11CCF50
menubar.selectionForeground#DE63F7
minimap.background#010B14
minimap.errorHighlight#d00000
minimap.findMatchHighlight#98dd49
minimap.selectionHighlight#2d5e8f
minimap.warningHighlight#fca311
minimapGutter.addedBackground#4CC9F0
minimapGutter.deletedBackground#FFFFFF
minimapGutter.modifiedBackground#03071E
minimapSlider.activeBackground#00aaff88
minimapSlider.background#4b4b4d80
minimapSlider.hoverBackground#4b4b4d80
notificationLink.foreground#C11CCF
notifications.background#080808
notifications.border#080808
notifications.foreground#fdf1ff
notificationsErrorIcon.foreground#ff0000
notificationsInfoIcon.foreground#48cae4
notificationsWarningIcon.foreground#ffb700
panel.background#010B14
panel.border#010B1460
panelTitle.activeBorder#C11CCF
panelTitle.activeForeground#E381E9
panelTitle.inactiveForeground#DE63F7
peekView.border#010B1430
peekViewEditor.background#DE63F705
peekViewEditor.matchHighlightBackground#C11CCF50
peekViewEditorGutter.background#DE63F705
peekViewResult.background#DE63F705
peekViewResult.matchHighlightBackground#C11CCF50
peekViewResult.selectionBackground#C11CCF70
peekViewTitle.background#DE63F705
peekViewTitleDescription.foreground#DE63F760
pickerGroup.foreground#C11CCF
problemsErrorIcon.foreground#d62828
problemsInfoIcon.foreground#fca311
problemsWarningIcon.foreground#fca311
progressBar.background#C11CCF
scrollbar.shadow#010B1400
scrollbarSlider.activeBackground#C11CCFee
scrollbarSlider.background#d52be448
scrollbarSlider.hoverBackground#C11CCFee
selection.background#C11CCF
settings.checkboxBackground#010B14
settings.checkboxForeground#DE63F7
settings.dropdownBackground#010B14
settings.dropdownForeground#DE63F7
settings.headerForeground#C11CCF
settings.modifiedItemIndicator#C11CCF
settings.numberInputBackground#010B14
settings.numberInputForeground#DE63F7
settings.textInputBackground#010B14
settings.textInputForeground#DE63F7
sideBar.background#010B14
sideBar.border#C11CCF50
sideBar.foreground#3590F3
sideBarSectionHeader.background#010B14
sideBarSectionHeader.border#010B1460
sideBarSectionHeader.foreground#3693f7
sideBarTitle.foreground#DE63F7
statusBar.background#B101FC
statusBar.border#010B1460
statusBar.debuggingBackground#FFFFFF
statusBar.debuggingForeground#E381E9
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#010B14
statusBarItem.hoverBackground#C11CCF20
statusBarItem.remoteBackground#ffffff
statusBarItem.remoteForeground#f200ff
tab.activeBackground#010b14e7
tab.activeBorder#00ffbbab
tab.activeForeground#ffffff
tab.activeModifiedBorder#C11CCF
tab.border#010B14
tab.hoverBackground#06d69e36
tab.inactiveBackground#010B14
tab.inactiveForeground#ffffff
tab.unfocusedActiveBackground#C11CCF40
tab.unfocusedActiveBorder#C11CCF
tab.unfocusedActiveForeground#DE63F7
tab.unfocusedInactiveBackground#C11CCF10
tab.unfocusedInactiveForeground#DE63F77f
terminal.ansiBlack#21222C
terminal.ansiBlue#BD93F9
terminal.ansiBrightBlack#6272A4
terminal.ansiBrightBlue#D6ACFF
terminal.ansiBrightCyan#A4FFFF
terminal.ansiBrightGreen#69FF94
terminal.ansiBrightMagenta#ff449f
terminal.ansiBrightRed#FF6E6E
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#e907fd
terminal.ansiCyan#8BE9FD
terminal.ansiGreen#50FA7B
terminal.ansiMagenta#ba135d
terminal.ansiRed#FF5555
terminal.ansiWhite#F8F8F2
terminal.ansiYellow#F1FA8C
terminal.background#010B14
terminal.border#00203a
terminal.foreground#fffffff3
terminalCursor.background#010B14
terminalCursor.foreground#ffba08
textLink.foreground#C11CCF
titleBar.activeBackground#010B14
titleBar.activeForeground#DE63F7
titleBar.border#010B1460
titleBar.inactiveBackground#010B14
titleBar.inactiveForeground#C11CCF
toolbar.activeBackground#05ecafad
toolbar.hoverBackground#06d69e86
tree.indentGuidesStroke#02355F
widget.shadow#010B1430
window.activeBorder#C11CCF
window.inactiveBorder#FFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated	#ff91e7d0	—
entity.name.namespace.cpp, entity.name.scope-resolution.cpp, keyword.control.return.cpp, keyword.operator.comparison.cpp, keyword.operator.logical.cpp, keyword.operator.cpp, keyword.operator.assignment.compound.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp	#4ba2bd	bold
support.function.builtin.python	#aef6ff	bold
storage.type, storage.modifier, support.type.property-name.json.comments	#eeeeee	—
entity.name.tag.wildcard.css, keyword.operator.assignment.python, entity.name.type.class.cpp	#fcec11	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	none
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#5fddf3	—
constant.other.php, support.constant.property-value.css, support.constant.font-name.css, punctuation.terminator.rule.css, punctuation.separator.comma.js	#ffffffda	—
constant.other.color, keyword.operator.arithmetic.python	#E381E9	—
invalid, invalid.illegal, meta.property-list.css, storage.modifier.specifier.const.cpp, storage.modifier.specifier.static.cpp, storage.type.namespace.directive.cpp, keyword.operator.delete.cpp, keyword.operator.new.cpp, storage.modifier.specifier.functional.pre-parameters.virtual.cpp	#8ce4ffe3	—
Keyword, Storage	—	italic
keyword.control.at-rule.media.css, keyword.control.import.python, keyword.operator.assignment.cpp, keyword.operator.comparison.cpp	#8ce4ffe3	bold
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#01a7b6	—
keyword.control.loop.js	#984eff	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js	#fffb10	—
variable.language.this.js	#6ba3bdf5	italic
keyword.operator.assignment.js, keyword.operator.arithmetic.js, keyword.operator.assignment.compound.js, keyword.operator.increment.js, keyword.operator.decrement.js, keyword.operator.relational.js, keyword.operator.comparison.js	#ffe138	—
keyword.control.at-rule, keyword.control.operator, punctuation.definition.entity.css, punctuation.definition.binding-pattern.object.js, storage.type.class.cpp, storage.type.struct.cpp, storage.type.enum.cpp, storage.type.union.cpp, storage.type.function.js, variable.parameter.probably.c, entity.other.attribute-name.html, meta.tag.sgml, markup.deleted.git_gutter	#DE63F7	—
punctuation.terminator.statement.cpp, variable.other.property.cpp, punctuation.separator.delimiter.c, entity.name.function.preprocessor.cpp	#fcfcfcf5	—
punctuation.definition, string.quoted.single.scss, meta.paragraph.markdown	#A7A8AF	—
keyword.control.c, variable.other.object.access.cpp, variable.other.object	#01A7B6	—
constant.other.placeholder.c, constant.character.escape.c, support.type.property-name.media.css	#fda15ae3	—
keyword.control.directive.include.c	#01A7B6	bold
support.variable.property.js, support.function.math.js	#67e7c1	—
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, punctuation.definition.comment, comment.line.double-slash.cpp, comment.block.cpp, comment.block.html, comment.block.css, comment.line.double-slash.c, comment.line.number-sign.python, comment.line.number-sign.shell	#13e2fd48	—
storage.type.modifier.access.control.public.cpp	#51fdefe0	—
string.quoted.double.js, string.quoted.single.js	#cecece	—
support.function.misc.css, support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.hex.css, keyword.other.unit.px.css, keyword.other.unit.mm.css, keyword.other.unit.cm.css, keyword.other.unit.pt.css, keyword.other.unit.in.css, keyword.other.unit.pc.css, keyword.other.unit.em.css, keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.vmin.css, keyword.other.unit.vmax.css, keyword.other.unit.percentage.css, keyword.other.unit.ex.css, keyword.other.unit.ch.css, string.quoted.double.include.cpp, punctuation.definition.directive.cpp	#e76f51f5	—
keyword.control.directive.include.cpp	#e76f51f5	bold
text.html.derivative, meta.attribute.class.html, meta.jsx.children.js, string.quoted.single.python, string.quoted.other.lt-gt.include.cpp, storage.type.built-in.primitive.cpp	#edf6f9de	—
variable.other.object.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js	#f725a6	—
constant.numeric.css	#94eb83	—
string.quoted.double.cpp, entity.name.type.parameter.cpp, entity.name.scope-resolution.function.call.cpp, entity.name.tag.html, entity.name.tag.js	#35ffe4ea	—
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control, string.quoted.double.c, meta.parens.cpp, meta.head.class.cpp, meta.function-call.arguments.python	#3590F3	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, storage.type.string.python	#76F3EB	—
support.other.variable, string.other.link, markup.table, entity.name.function.c, storage.type.js, source.python	#DE63F7	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other, punctuation.separator.key-value.html, punctuation.terminator.statement.c, variable.parameter.js, variable.parameter.keyframe-list.css	#FFFFFF	—
variable.parameter.function.language.special, variable.parameter	#ff77ff	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#3b4580	—
support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, keyword.control.conditional.js	#fffffff1	—
support.type	#93daf7	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, keyword.other.unit, entity.other.attribute-name.pseudo-class.css	#FF6BEF	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js, entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#4CC9F0	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#3590F3	italic
entity.other.attribute-name, support.function, punctuation.terminator.statement.js, source.scss keyword.control, markup.changed, text.html.markdown markup.inline.raw.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown, markup.raw.block	#FFFFFF	—
keyword.control.switch.js, support.constant, meta.object-literal.key, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.end.python, punctuation.definition.string.begin.python, punctuation.definition.string.begin.cpp, punctuation.definition.string.end.cpp	#ff5c10	bold
markup.deleted, markup.inserted	#4CC9F0	—
string.regexp, constant.character.escape	#76F3EB	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js, support.type.property-name.json, text.html.markdown, punctuation.definition.list_item.markdown	#DE63F7	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#C11CCF50	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#FF6BEF	bold
markup.underline	#3590F3	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#C11CCF50	—
markup.quote	—	italic
punctuation.definition.raw.markdown, punctuation.definition.markdown	#76F3EB	—
variable.language.fenced.markdown, keyword.other.using.directive.cpp	#C11CCF	—
meta.separator	#70f780	bold
token.info-token	#C11CCF	—
token.warn-token	#FFFFFF	—
token.error-token	#FF293B	—
token.debug-token	#76F3EB	—

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