CodePen Nights

Name: CodePen Nights
Author: Klare

Publisher: KlareThemes in package: 1

A High Contrast Syntax Theme created using CodePen brand colors.

Open in VS Code GitHub

VS Code preview

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

CodePen Nights — CodePen-Nights

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#1a1b23
activityBar.border#2C303A60
activityBar.foreground#EEFFFF
activityBarBadge.background#0ebeff
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#88afbf
breadcrumb.activeSelectionForeground#0ebeff
breadcrumb.background#1e1f27
breadcrumb.focusForeground#EEFFFF
breadcrumb.foreground#717790
breadcrumbPicker.background#2b303b
button.background#81CCC620
debugToolBar.background#1e1f27
diffEditor.insertedTextBackground#47cf7315
diffEditor.removedTextBackground#ff113420
dropdown.background#1e1f27
dropdown.border#FFFFFF10
editor.background#1e1f27
editor.findMatchBackground#000000
editor.findMatchBorder#0ebeff
editor.findMatchHighlightBackground#000000
editor.findMatchHighlightBorder#0b89c8
editor.findMatchHighlightForeground#ffffff
editor.foreground#EEFFFF
editor.lineHighlightBackground#00000050
editor.selectionBackground#0b89c820
editor.selectionHighlightBackground#0b89c820
editorBracketMatch.background#1e1f27
editorBracketMatch.border#FFCC0050
editorCursor.foreground#FFCC00
editorError.foreground#ff3c4190
editorGroup.border#00000030
editorGroupHeader.tabsBackground#1e1f27
editorGutter.addedBackground#47cf7360
editorGutter.deletedBackground#ff3c4160
editorGutter.modifiedBackground#5e91f260
editorHoverWidget.background#1e1f27
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground#444857
editorIndentGuide.background#44485770
editorInfo.foreground#5e91f270
editorLineNumber.activeForeground#717790
editorLineNumber.foreground#2C303A
editorLink.activeForeground#EEFFFF
editorMarkerNavigation.background#EEFFFF05
editorOverviewRuler.border#1e1f27
editorOverviewRuler.errorForeground#ff3c4190
editorOverviewRuler.findMatchForeground#0ebeff
editorOverviewRuler.infoForeground#5e91f240
editorOverviewRuler.warningForeground#ffdd4040
editorRuler.foreground#434858
editorSuggestWidget.background#1e1f27
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#EEFFFF
editorSuggestWidget.highlightForeground#0ebeff
editorSuggestWidget.selectedBackground#00000050
editorWarning.foreground#ffdd4070
editorWhitespace.foreground#EEFFFF40
editorWidget.background#2b303b
editorWidget.border#0ebeff
editorWidget.resizeBorder#0ebeff
extensionButton.prominentBackground#47cf7390
extensionButton.prominentHoverBackground#47cf73
focusBorder#ffffff00
gitDecoration.conflictingResourceForeground#ffdd4090
gitDecoration.deletedResourceForeground#ff113490
gitDecoration.ignoredResourceForeground#71779090
gitDecoration.modifiedResourceForeground#5e91f290
gitDecoration.untrackedResourceForeground#47cf7390
input.background#242833
input.border#FFFFFF00
input.foreground#EEFFFF
input.placeholderForeground#9b9dae
inputOption.activeBackground#EEFFFF30
inputOption.activeBorder#EEFFFF30
inputValidation.errorBorder#ff113450
inputValidation.infoBorder#5e91f250
inputValidation.warningBorder#ffdd4050
list.activeSelectionBackground#2b303b
list.activeSelectionForeground#0ebeff
list.focusBackground#EEFFFF20
list.focusForeground#EEFFFF
list.highlightForeground#0ebeff
list.hoverBackground#2b303b
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#00000030
list.inactiveSelectionForeground#0ebeff
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#1e1f27
menu.foreground#EEFFFF
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#0ebeff
menu.separatorBackground#EEFFFF
menubar.selectionBackground#00000030
menubar.selectionBorder#00000030
menubar.selectionForeground#0ebeff
notificationLink.foreground#0ebeff
notifications.background#1e1f27
notifications.foreground#EEFFFF
panel.background#1e1f27
panel.border#1e1f2760
panel.dropBackground#EEFFFF
panelTitle.activeBorder#0ebeff
panelTitle.activeForeground#FFFFFF
panelTitle.inactiveForeground#EEFFFF
peekView.border#00000030
peekViewEditor.background#EEFFFF05
peekViewEditor.matchHighlightBackground#88afbf20
peekViewEditorGutter.background#EEFFFF05
peekViewResult.background#EEFFFF05
peekViewResult.matchHighlightBackground#88afbf20
peekViewResult.selectionBackground#71779070
peekViewTitle.background#EEFFFF05
peekViewTitleDescription.foreground#EEFFFF60
pickerGroup.foreground#0ebeff
progressBar.background#0ebeff
scrollbar.shadow#2b303b00
scrollbarSlider.activeBackground#0ebeff
scrollbarSlider.background#EEFFFF20
scrollbarSlider.hoverBackground#EEFFFF10
selection.background#0ebeff
settings.checkboxBackground#2b303b
settings.checkboxForeground#EEFFFF
settings.dropdownBackground#2b303b
settings.dropdownForeground#EEFFFF
settings.headerForeground#0ebeff
settings.modifiedItemIndicator#0ebeff
settings.numberInputBackground#2b303b
settings.numberInputForeground#EEFFFF
settings.textInputBackground#2b303b
settings.textInputForeground#EEFFFF
sideBar.background#1a1b23
sideBar.border#1a1b2360
sideBar.foreground#5A5F73
sideBarSectionHeader.background#13141790
sideBarSectionHeader.border#13141790
sideBarTitle.foreground#707792
statusBar.background#1e1f27
statusBar.border#1e1f2760
statusBar.debuggingBackground#ae63e4
statusBar.debuggingForeground#ffffff
statusBar.foreground#5A5F73
statusBar.noFolderBackground#1e1f27
statusBarItem.hoverBackground#88afbf20
statusBarItem.remoteBackground#0ebeff
statusBarItem.remoteForeground#000000
tab.activeBorder#0ebeff
tab.activeForeground#FFFFFF
tab.activeModifiedBorder#717790
tab.border#1e1f27
tab.inactiveBackground#1e1f27
tab.inactiveForeground#717790
tab.unfocusedActiveBorder#868CA0
tab.unfocusedActiveForeground#EEFFFF
terminal.ansiBlack#000000
terminal.ansiBlue#5e91f2
terminal.ansiBrightBlack#88afbf
terminal.ansiBrightBlue#5e91f2
terminal.ansiBrightCyan#0ebeff
terminal.ansiBrightGreen#47cf73
terminal.ansiBrightMagenta#ae63e4
terminal.ansiBrightRed#ca2825
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffdd40
terminal.ansiCyan#0ebeff
terminal.ansiGreen#47cf73
terminal.ansiMagenta#ae63e4
terminal.ansiRed#ca2825
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffdd40
terminalCursor.background#000000
terminalCursor.foreground#ffdd40
textLink.activeForeground#EEFFFF
textLink.foreground#0ebeff
titleBar.activeBackground#1E1F26
titleBar.activeForeground#EEFFFF
titleBar.border#2b303b60
titleBar.inactiveBackground#2b303b
titleBar.inactiveForeground#717790
tree.indentGuidesStroke#373c4a
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ffffff	—
comment, punctuation.definition.comment, string.quoted.docstring	#88afbf	italic
variable, string.constant.other.placeholder	#47cf73	—
meta.import.js, variable.other.readwrite.alias.js	#5e91f2	—
variable.other.property.js, variable.other.object.js	#ffffff	—
constant.other.php	#ffdd40	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#ff1134	—
invalid.deprecated	#ae63e4	—
keyword, storage.type, storage.modifier	#9ca0b1	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#d5d7de	—
keyword.operator, punctuation.definition.string.begin.ruby, punctuation.definition.string.end.ruby	#9ca0b1	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.type.object.module.js	#ffdd40	—
entity.other.attribute-name.js	#0ebeff	—
entity.name.function, variable.function, support.function, keyword.other.special-method	#5e91f2	—
source.cpp meta.block variable.other	#ffcfcb	—
variable.other.constant	#ffcfcb	—
support.other.variable, string.other.link	#ffcfcb	—
keyword.control.ruby	#ffdd40	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, string.quoted.single.js	#2bc7b9	—
variable.parameter.function.language.special, variable.parameter	#ffdd40	—
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	#0ebeff	normal
string, string.template.js	#2bc7b9	normal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffdd40	—
support.type	#49dcff	—
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	#5e91f2	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#ff1134	—
variable.language	#ff8d41	italic
entity.name.method.js	#5e91f2	italic
meta.class-method.js entity.name.function.js, variable.function.constructor, meta.objectliteral.js	#5e91f2	—
entity.other.attribute-name	#ae63e4	italic
meta.attribute.class.html, entity.other.attribute-name.html	#d5d7de	italic
meta.attribute.href.html, meta.attribute.src.html, text.html.derivative	#ffffff	italic
string.quoted.double.html	#5e91f2	—
entity.other.attribute-name.class	#ffdd40	—
source.sass keyword.control	#5e91f2	—
markup.inserted	#47cf73	—
markup.deleted	#ff1134	—
markup.changed	#ae63e4	—
string.regexp	#0ebeff	—
constant.character.escape	#0ebeff	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#5e91f2	italic
source.js constant.other.object.key.js string.unquoted.label.js	#ff1134	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#ae63e4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffdd40	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ff8d41	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ff1134	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#A45119	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#5e91f2	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffcfcb	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ae63e4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#47cf73	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#ae63e4	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#858ca2	—
text.html.markdown meta.dummy.line-break		—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#47cf73	—
markup.italic	#ffcfcb	italic
markup.bold, markup.bold string	#ffcfcb	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#ffcfcb	bold
markup.underline	#ff8d41	underline
markup.strike		strike
markup.quote punctuation.definition.blockquote.markdown	#858ca2	—
markup.quote		italic
string.other.link.title.markdown	#5e91f2	—
string.other.link.description.title.markdown	#ae63e4	—
constant.other.reference.link.markdown	#ffdd40	—
markup.raw.block	#ae63e4	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#EEFFFF90	—
variable.language.fenced.markdown	#858ca2	—
meta.separator	#858ca2	bold
markup.table	#EEFFFF	—

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