UNDERTALE: ACT Theme

Name: UNDERTALE: ACT Theme
Author: Harrison Smith

Publisher: Harrison SmithThemes in package: 8

Themes based on the UNDERTALE battle screen!

Open in VS Code

Color themes

VS Code preview

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

UNDERTALE: ACT Theme — UNDERTALE: ACT Theme (Justice)

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.activeBackground#ffffff
activityBar.background#000000
activityBar.border#ffffff
activityBar.foreground#ffff00
activityBar.inactiveForeground#ffffff
activityBarBadge.background#ffff00
activityBarBadge.foreground#ffffff
badge.background#4d4d4d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ffffff
breadcrumb.background#000000
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#ffffff
button.background#ffffff40
button.foreground#ffffff
button.hoverBackground#ffffff80
button.secondaryBackground#ffffff20
button.secondaryForeground#ffffff
button.secondaryHoverBackground#ffffff60
checkbox.background#000000
checkbox.border#00000000
checkbox.foreground#ffffff
debugExceptionWidget.background#000000
debugExceptionWidget.border#ffffff
debugToolBar.background#000000
debugToolBar.border#ffffff
diffEditor.border#ffffff
diffEditor.insertedTextBackground#00ff0040
diffEditor.removedTextBackground#ff000040
dropdown.background#000000
dropdown.border#00000000
dropdown.foreground#ffffff
editor.background#000000
editor.findMatchBackground#ffffff80
editor.findMatchBorder#ffffff
editor.findMatchHighlightBackground#00000000
editor.findMatchHighlightBorder#ffffff
editor.findRangeHighlightBackground#ffffff20
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#ffffff20
editor.foreground#d4d4d4
editor.hoverHighlightBackground#ffffff80
editor.inactiveSelectionBackground#ffffff20
editor.lineHighlightBackground#ffffff20
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff40
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#ffffff40
editor.selectionHighlightBackground#ffffff60
editor.selectionHighlightBorder#ffffff
editor.wordHighlightBackground#ffffff40
editor.wordHighlightBorder#ffffff
editor.wordHighlightStrongBackground#ffffff60
editorBracketMatch.background#00000000
editorBracketMatch.border#ffffff
editorCodeLens.foreground#ffffff80
editorCursor.background#000000
editorCursor.foreground#ffffff
editorError.background#ff000040
editorError.border#00000000
editorError.foreground#ff0000
editorGroup.border#ffffff
editorGroup.emptyBackground#000000
editorGroupHeader.border#ffffff
editorGroupHeader.tabsBackground#000000
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#00ff00
editorGutter.background#000000
editorGutter.commentRangeForeground#ffffff
editorGutter.deletedBackground#ff0000
editorGutter.foldingControlForeground#ffffff
editorGutter.modifiedBackground#ff00ff
editorHoverWidget.background#000000
editorHoverWidget.border#ffffff
editorHoverWidget.foreground#ffffff
editorIndentGuide.activeBackground#ffffff40
editorIndentGuide.background#ffffff20
editorInfo.background#00ffff40
editorInfo.border#00000000
editorInfo.foreground#00ffff
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#ffffff80
editorLink.activeForeground#ffff00
editorMarkerNavigation.background#404040
editorMarkerNavigationError.background#ff4040
editorMarkerNavigationInfo.background#40ffff
editorMarkerNavigationWarning.background#ffff40
editorOverviewRuler.background#00000000
editorOverviewRuler.border#ffffff20
editorRuler.foreground#ffffff60
editorSuggestWidget.background#000000
editorSuggestWidget.border#ffffff
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#ffff00
editorSuggestWidget.selectedBackground#ffffff20
editorWarning.background#ffff0040
editorWarning.border#00000000
editorWarning.foreground#ffff00
editorWhitespace.foreground#00000000
editorWidget.background#000000
editorWidget.foreground#ffffff
editorWidget.resizeBorder#ffffff
focusBorder#00000000
foreground#ffffff
gitDecoration.addedResourceForeground#00ff00
gitDecoration.conflictingResourceForeground#ff8000
gitDecoration.deletedResourceForeground#ff8080
gitDecoration.ignoredResourceForeground#ffffff80
gitDecoration.modifiedResourceForeground#ff80ff
gitDecoration.stageDeletedResourceForeground#ff0000
gitDecoration.stageModifiedResourceForeground#ff00ff
gitDecoration.submoduleResourceForeground#00ffff
gitDecoration.untrackedResourceForeground#80ff80
icon.foreground#ffffff
input.background#000000
input.border#00000000
input.foreground#ffffff
input.placeholderForeground#ffffff80
inputOption.activeBackground#ffffff40
inputOption.activeBorder#00000000
inputOption.activeForeground#ffffff
list.activeSelectionBackground#ffffff
list.activeSelectionForeground#000000
list.dropBackground#ffffff80
list.focusBackground#000000
list.focusForeground#ffffff
list.highlightForeground#ffff00
list.hoverBackground#ffffff80
list.hoverForeground#ffffff
list.inactiveSelectionBackground#ffffff40
list.inactiveSelectionForeground#ffffff
listFilterWidget.background#000000
listFilterWidget.noMatchesOutline#00000000
listFilterWidget.outline#ffffff
menu.background#000000
menu.border#00000000
menu.foreground#ffffff
menu.selectionBackground#ffff00
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#ffffff20
menubar.selectionBackground#ffffff
menubar.selectionBorder#00000000
menubar.selectionForeground#000000
merge.commonContentBackground#404040
merge.commonHeaderBackground#606060
merge.currentContentBackground#004040
merge.currentHeaderBackground#006060
merge.incomingContentBackground#000040
merge.incomingHeaderBackground#000060
minimap.background#000000
minimap.errorHighlight#ff0000
minimap.findMatchHighlight#ffffff80
minimap.selectionHighlight#ffffff40
minimap.warningHighlight#ffff00
minimapGutter.addedBackground#00ff00
minimapGutter.deletedBackground#ff0000
minimapGutter.modifiedBackground#ff00ff
notificationCenter.border#474747
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#000000
notifications.background#000000
notifications.border#ffffff20
notifications.foreground#ffffff
notificationsErrorIcon.foreground#ff0000
notificationsInfoIcon.foreground#00ffff
notificationsWarningIcon.foreground#ffff00
notificationToast.border#ffffff
panel.background#000000
panel.border#00000000
panelSection.border#ffffff
panelTitle.activeBorder#ffffff
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#ffffff
peekView.border#ffff00
peekViewEditor.background#202000
peekViewEditor.matchHighlightBackground#000000
peekViewEditor.matchHighlightBorder#ffff00
peekViewEditorGutter.background#202000
peekViewResult.background#000000
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#ffffff
peekViewResult.matchHighlightBackground#ffff0040
peekViewResult.selectionBackground#ffff0020
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#000000
peekViewTitleDescription.foreground#ffffff
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#ffffff
pickerGroup.foreground#ffff00
progressBar.background#ffffff
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#ffffffc0
scrollbarSlider.background#ffffff40
scrollbarSlider.hoverBackground#ffffff80
selection.background#ffffff
settings.focusedRowBackground#ffffff07
settings.headerForeground#ffffff
sideBar.background#000000
sideBar.border#ffffff
sideBar.dropBackground#ffffff80
sideBar.foreground#ffffff
sideBarSectionHeader.background#000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#ffffff
statusBar.background#000000
statusBar.border#ffffff
statusBar.debuggingBackground#000000
statusBar.debuggingBorder#ffffff
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#ffffff
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#FFFFFF25
statusBarItem.hoverBackground#ffff00
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#ffffff
tab.activeBackground#ffffff
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#000000
tab.border#00000000
tab.hoverBackground#ffffff80
tab.hoverBorder#00000000
tab.hoverForeground#ffffff
tab.inactiveBackground#000000
tab.inactiveForeground#ffffff
terminal.ansiBlack#ffffff20
terminal.ansiBlue#0000ff
terminal.ansiBrightBlack#ffffff60
terminal.ansiBrightBlue#8080ff
terminal.ansiBrightCyan#80ffff
terminal.ansiBrightGreen#80ff80
terminal.ansiBrightMagenta#ff80ff
terminal.ansiBrightRed#ff8080
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffff80
terminal.ansiCyan#00ffff
terminal.ansiGreen#00ff00
terminal.ansiMagenta#ff00ff
terminal.ansiRed#ff0000
terminal.ansiWhite#ffffffc0
terminal.ansiYellow#ffff00
terminal.border#ffffff
terminal.foreground#ffffff
terminal.selectionBackground#ffffff40
terminalCursor.background#ffffff
terminalCursor.foreground#000000
textLink.foreground#ffff00
titleBar.activeBackground#000000
titleBar.activeForeground#cccccc
titleBar.border#00000000
titleBar.inactiveBackground#000000
titleBar.inactiveForeground#ffffff
tree.indentGuidesStroke#ffffff80
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source.sql, keyword.other.sql, meta.drop.sql, keyword.control.sql, keyword.other.DDL.create.II.sql	—	—
invalid, invalid.deprecated, invalid.illegal	—	bold italic underline
comment, comment.block, comment.block.documentation, markup, comment.block.documentation.js, markup.inline.raw.string.markdown, punctuation.definition.annotation.java, storage.type.annotation, storage.type.annotation.java, meta.declaration.annotation.java	#ffffff80	—
keyword.operator, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.separator, punctuation.terminator, meta.property-value, meta.property-group, meta.embedded.expression.js, punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, meta.object.member.js, punctuation.accessor.js, meta.tag.without-attributes, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, meta.jsx.children, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, meta.selector.css, punctuation.section.function.scss, text.html.jinja, keyword.operator.logical.js, variable.parameter.url.css, source.sql, source.js, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.section.function.lambda.begin.python, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.accessor.tsx, punctuation.definition.block.tsx, meta.brace.round.tsx, punctuation.definition.parameters.begin.tsx, punctuation.definition.parameters.end.tsx, meta.tag.other.html, text.html.vue-html, constant.name.attribute.tag.pug, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html, attribute_value, text.html.derivative, text.pug, source.directive.vue, meta.brace.square.js, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, keyword.other.period.elm, punctuation.definition.list.elm, punctuation.bracket.elm, keyword.other.colon.elm, keyword.operator.assignment.elm, keyword.pipe.elm, punctuation.parens.module-export.elm, punctuation.section.braces.end, punctuation.section.braces.begin, punctuation.parens.elm, constant.unit.elm, punctuation.definition.parameters.begin.bracket.round.java, punctuation.definition.parameters.end.bracket.round.java, punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.section.block.begin.bracket.curly.java, punctuation.section.block.end.bracket.curly.java, punctuation.bracket.round.java, punctuation.bracket.square.java, keyword.control.ternary.java, punctuation.bracket.angle.java, punctuation.definition.table.toml, punctuation.definition.binding-pattern.object.tsx, punctuation.destructuring.tsx, puncutation, punctuation.definition.ng-binding-name.begin.html, punctuation.definition.ng-binding-name.end.html, punctuation.accessor.ts, meta.brace.round.ts, punctuation.accessor.html, meta.brace.square.tsx, meta.tag.block.any.html, keyword.other.double-colon.haskell, support.constant.unit.haskell, punctuation.section.try.begin.bracket.curly.java, punctuation.section.try.end.bracket.curly.java, punctuation.section.catch.begin.bracket.curly.java, punctuation.section.catch.end.bracket.curly.java, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, meta.tag.xml, punctuation.accessor.optional, punctuation.definition.typeparameters, meta.brace.square	#ffffff	—
constant, constant.character, constant.language, constant.language.js, constant.other, variable, variable.name, variable.language.js, variable.other.property, variable.other, support.type.property-name, meta.item-access.python, meta.function-call.arguments.python, support.type.vendored.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded, entity.name.type.instance.jsdoc, variable.parameter, variable.parameter.js, source.sql, support.constant.color.w3c-extended-color-name.css, variable.other.readwrite.js, entity.name.function.top_level.elm, entity.name.function.elm, meta.method-call.java, variable.other.constant.tsx, variable.other.constant.object.tsx, variable.other.constant.object.ts, variable.other.constant.js, variable.other.constant.object.js, variable.other.constant.object.jsx, entity.other.attribute-name, meta.directive.vue, constant.type-constructor.elm	#00ff80	—
entity.name.type.ts, entity.other.inherited-class.ts, entity.name.type.class.ts, support.class.dart, storage.type.elm, support.module.elm, variable.other.enummember, support.type, punctuation.decorator.ts, storage.type.haskell, storage.type.primitive.java, storage.type.object.array.java, storage.type.java, storage.type.generic.java, entity.name.type.class.java, entity.name.type, entity.other.inherited-class	#00ffff	—
support, support.class, support.constant, meta.function-call.generic.python, meta.function-call.python, support.function, support.other, support.variable, entity.name.class, entity.name.function, entity.name.method, entity.name.section, variable.other.object.js, entity.name.tag, entity.name.tag.css, support.constant.font-name, constant.other.color.rgb-value, support.constant.color.w3c-standard-color-name, support.type.property-name, support.type.property-name.css, meta.value.elm, entity.other.attribute-name.table.toml, entity.name.function.ts, variable.other.readwrite.alias.tsx, entity.name.function.tsx	#0080ff	—
constant.numeric, variable.other.constant.property.js, constant.numeric.float, constant.numeric.hex, constant.numeric.integer, constant.numeric.octal, variable.other.constant.property, entity.name.record.field.elm, storage.modifier.import.java, meta.object-literal.key.tsx	#0000ff	—
meta.object-literal.key, record.name.elm, entity.name.record.field.accessor.elm, storage.modifier.package.java, entity.other.ng-binding-name.ngFor.html, entity.other.ng-binding-name.ngModel.html, entity.other.ng-binding-name.two-way.html, entity.other.ng-binding-name.click.html, entity.other.ng-binding-name.event.html, entity.other.ng-binding-name.ngIf.html, entity.other.ng-binding-name.ngForOf.html, entity.other.ng-binding-name.ngPluralCase.html, entity.other.ng-binding-name.ngSwitchCase.html, entity.other.ng-binding-name.ngSwitchDefault.html, entity.other.ng-binding-name.property.html, storage.modifier.package.java, entity.name.namespace	#8000ff	—
keyword, keyword.control, keyword.operator.new, variable.language, storage.type, storage.modifier, keyword.other.unit, support.constant.property-value, keyword.operator.logical.python, support.constant.property-value.css, constant.language.null.js, constant.language.null.tsx, constant.language.null.ts, keyword.operator.expression, constant.language.boolean, constant.language.null.ts, constant.language.undefined.ts, support.type.builtin.ts, constant.language.undefined.js, keyword.operator.closure.dart, meta.property-value.scss, meta.property-list.scss, meta.property-name.scss, entity.name.tag.reference.scss, constant.language.java, storage.type.primitive.java, keyword.operator.instanceof.java, meta.property-value.css, storage.type.function.arrow.js, keyword.other.elm, storage.type.generic.wildcard.java	#ff00ff	—
punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression, constant.regexp, string.regexp, string.interpolated, 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.attribute.scss, entity.other.attribute-name.scss, constant.character.escape, keyword.control.anchor.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp, string.regexp.js, meta.group.regexp, keyword.operator.or.regexp, string.regexp.js, punctuation.definition.group.regexp, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, storage.type.class.jsdoc, keyword.other.js, constant.other.character-class.range.regexp, punctuation.definition.character-class.regexp, punctuation.definition.group.assertion.regexp, constant.other.character-class.set.regexp, support.constant.handlebars, constant.character.format.placeholder.other.python, string.interpolated.python, keyword.operator.function.infix.haskell, meta.selector.css	#ff0080	—
string, string.interpolated.single.dart, string.quoted, string.quoted.double, string.quoted.single, string.quoted.triple, string.unquoted, string.quoted.double.js, meta.tag.attributes.js, meta.tag, string.template.js, storage.type.string.python, string.interpolated.double.dart	#ff0000	—

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