SUPERKODERS

Name: SUPERKODERS
Author: Viktor Danko

Publisher: Viktor DankoThemes in package: 1

SUPERKODERS color theme for Visual Studio Code

GitHub

VS Code preview

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

SUPERKODERS — SUPERKODERS 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#011627
activityBar.foreground#fff
activityBarBadge.background#5ce3d4
activityBarBadge.foreground#000
badge.background#5ce3d4
badge.foreground#000
button.background#ffd100
button.foreground#000
button.hoverBackground#fae5a8
debugExceptionWidget.background#011627
debugExceptionWidget.border#1a202b
debugToolBar.background#011627
diffEditor.insertedTextBackground#1be11b1d
diffEditor.removedTextBackground#f29e7425
dropdown.background#011627
dropdown.border#363e4a
dropdown.foreground#667380
editor.background#011627
editor.findMatchBackground#667380
editor.findMatchBorder#ffcc66
editor.findMatchHighlightBackground#667380
editor.findMatchHighlightBorder#ffcc6633
editor.findRangeHighlightBackground#445362
editor.findRangeHighlightBorder#21273300
editor.foreground#f4f4f1
editor.inactiveSelectionBackground#445362
editor.lineHighlightBackground#1c222e
editor.rangeHighlightBackground#1c222e
editor.selectionBackground#445362
editor.selectionHighlightBackground#445362
editor.selectionHighlightBorder#2c3d4e
editor.wordHighlightBackground#445362
editor.wordHighlightStrongBackground#ffcc6633
editorBracketMatch.border#39424e
editorCursor.foreground#ffcc66
editorError.foreground#ff3333
editorGroup.border#1a202b
editorGroupHeader.noTabsBackground#011627
editorGroupHeader.tabsBackground#011627
editorGroupHeader.tabsBorder#1a202b
editorGutter.addedBackground#bae67e
editorGutter.deletedBackground#f29e74
editorGutter.modifiedBackground#5ccfe6
editorHoverWidget.background#011627
editorHoverWidget.border#121824
editorIndentGuide.activeBackground#434c59
editorIndentGuide.background#363e4a
editorLineNumber.activeForeground#fff
editorLineNumber.foreground#b1b6ba66
editorLink.activeForeground#ffcc66
editorMarkerNavigation.background#011627
editorOverviewRuler.addedForeground#bae67e
editorOverviewRuler.border#1a202b
editorOverviewRuler.deletedForeground#f29e74
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.modifiedForeground#5ccfe6
editorOverviewRuler.warningForeground#ffcc66
editorRuler.foreground#1a202b
editorSuggestWidget.background#011627
editorSuggestWidget.border#121824
editorSuggestWidget.highlightForeground#ffcc66
editorSuggestWidget.selectedBackground#1c222e
editorWarning.foreground#ffcc66
editorWhitespace.foreground#39424e
editorWidget.background#011627
extensionButton.prominentBackground#ffcc66
extensionButton.prominentForeground#011627
extensionButton.prominentHoverBackground#fac761
focusBorder#4a5561
foreground#fff
gitDecoration.deletedResourceForeground#f29e74bb
gitDecoration.ignoredResourceForeground#444d5a
gitDecoration.modifiedResourceForeground#5ccfe6bb
gitDecoration.submoduleResourceForeground#d4bfffbb
gitDecoration.untrackedResourceForeground#bae67ebb
input.background#011627
input.border#363e4a
input.foreground#f4f4f1
input.placeholderForeground#515c69
inputOption.activeBorder#ffcc66
inputValidation.errorBackground#011627
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#011627
inputValidation.infoBorder#5ccfe6
inputValidation.warningBackground#011627
inputValidation.warningBorder#ffbb33
list.activeSelectionBackground#1a202b
list.activeSelectionForeground#f4f4f1
list.focusBackground#1c222e
list.focusForeground#f4f4f1
list.highlightForeground#ffcc66
list.hoverBackground#1c222e
list.hoverForeground#f4f4f1
list.inactiveSelectionBackground#1c222e
list.inactiveSelectionForeground#f4f4f1
list.invalidItemForeground#515c69
panel.background#011627
panel.border#1a202b
panelTitle.activeBorder#ffcc66
panelTitle.activeForeground#f4f4f1
panelTitle.inactiveForeground#667380
peekView.border#1a202b
peekViewEditor.background#011627
peekViewEditor.matchHighlightBackground#ffcc6633
peekViewResult.background#011627
peekViewResult.fileForeground#667380
peekViewResult.matchHighlightBackground#ffcc6633
peekViewTitle.background#011627
peekViewTitleDescription.foreground#667380
peekViewTitleLabel.foreground#667380
pickerGroup.border#1a202b
pickerGroup.foreground#444d5a
progressBar.background#ffcc66
scrollbar.shadow#161c2711
scrollbarSlider.activeBackground#ffffff22
scrollbarSlider.background#ffffff11
scrollbarSlider.hoverBackground#ffffff22
selection.background#293847fd
sideBar.background#011627
sideBar.border#1a202b
sideBarSectionHeader.background#011627
sideBarSectionHeader.foreground#667380
sideBarTitle.foreground#667380
statusBar.background#011627
statusBar.border#011627
statusBar.debuggingBackground#f29e74
statusBar.debuggingForeground#011627
statusBar.foreground#667380
statusBar.noFolderBackground#011627
statusBarItem.activeBackground#00000050
statusBarItem.hoverBackground#00000030
statusBarItem.prominentBackground#1a202b
statusBarItem.prominentHoverBackground#00000030
tab.activeBackground#011627
tab.activeBorder#ffcc66
tab.activeForeground#f4f4f1
tab.border#011627
tab.inactiveBackground#011627
tab.inactiveForeground#667380
tab.unfocusedActiveBorder#667380
tab.unfocusedActiveForeground#667380
tab.unfocusedInactiveForeground#667380
terminal.ansiBlack#1a202b
terminal.ansiBlue#36a3d9
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#a6fde1
terminal.ansiBrightGreen#cbe645
terminal.ansiBrightMagenta#ff77ff
terminal.ansiBrightRed#ffc44c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffdf80
terminal.ansiCyan#95e6cb
terminal.ansiGreen#bae67e
terminal.ansiMagenta#d4bfff
terminal.ansiRed#ffc44c
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#ffcc66
terminal.background#011627
terminal.foreground#f4f4f1
textBlockQuote.background#011627
textLink.activeForeground#ffcc66
textLink.foreground#ffcc66
textPreformat.foreground#f4f4f1
titleBar.activeBackground#011627
titleBar.activeForeground#f4f4f1
titleBar.inactiveBackground#011627
titleBar.inactiveForeground#667380
walkThrough.embeddedEditorBackground#011627
widget.shadow#161c27

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file	—	italic
markup.deleted.diff	—	italic
markup.inserted.diff	#addb67ff	italic
comment, punctuation.definition.comment	#5c6773	italic
variable	#f4f4f1	—
string, constant.other.symbol	#afef76	—
constant.numeric	#ffcc66	—
string.regexp, constant.character.escape	#95e6cb	—
constant.language	#ffcc66	—
constant.character, constant.other	#ffcc66	—
variable.member	#ec5f67	—
punctuation.accessor, meta.at-rule.media, keyword.control.export, keyword.control.conditional	#faa8f2	—
constant.numeric.css	#f4f4f1	—
keyword.operator	#96d6ff	—
keyword.operator.new.js	#5ce3d4	bold
keyword.operator.assignment.js	#fff	—
punctuation.section	#f4f4f1	—
punctuation.accessor	#f29e74	—
punctuation.definition.annotation	#f4f4f1CC	—
variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js	#ffc44c	—
storage	#5ce3d4	—
storage.type.function.js	#faa8f2	—
entity.name.function	#ffd100	—
entity.name.import, entity.name.package	#afef76	—
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx	#ec5f67	italic
italic	—	italic
entity.name	#4accff	—
entity.other.inherited-class	#4accff	—
variable.parameter, meta.parameter	#d4bfff	—
variable.language	#faa8f2	italic
entity.name.tag, meta.tag.sgml	#96d6ff	bold
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#96d6ff	—
entity.other.attribute-name, entity.name.tag.reference	#ffd100	italic
keyword.operator.relational	—	italic
meta.delimiter.period	—	italic
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#ffbb33	—
support.function, support.macro	#faa8f2	—
support.constant	#f4f4f1	—
support.type, support.class, source.go storage.type	#5ce3d4	—
invalid	#ff3333	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#ffbb33	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#4accff	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#5c6773	—
support.type.property-name	#3cdbc0	—
constant.numeric.line-number.find-in-files - match	#5c6773	—
constant.numeric.line-number.match	#ff851a	—
entity.name.filename.find-in-files	#afef76	—
message.error	#ff3333	—
meta.selector	—	italic
entity.name.tag.doctype, meta.tag.sgml.doctype	—	italic
variable.other.object.property	—	italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5ccfe6	—
markup.heading, markup.heading entity.name	#3cdbc0	bold
string.other.link, markup.underline.link	#95e6cb	italic underline
punctuation.definition.image	#ffbb33	—
markup.italic	#f28779	italic
markup.bold	#f28779	bold
markup.italic markup.bold \| markup.bold markup.italic	—	bold italic
markup.quote	#ffcc66	italic
quote	—	italic
markup.list.numbered.bullet, markup.list punctuation.definition.list_item	#95e6cb	—
markup.inserted	#afef76	—
markup.changed	#5ccfe6	—
markup.deleted	#f28779	—
markup.strike	#ffd100	—
markup.table	#5ccfe6	—
text.html.markdown markup.inline.raw	#ffd100	—
text.html.markdown meta.dummy.line-break	#5c6773	—
source.elixir .punctuation.binary.elixir	—	italic
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go	—	italic
meta.tag.sgml.doctype.html	—	italic
markup.italic.markdown	—	italic
markup.quote.markdown	#697098	italic
punctuation.definition.markdown	#5c6773	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—

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