G Dark-Themes

Name: G Dark-Themes
Author: stonecoder

Publisher: stonecoderThemes in package: 17

A set of dual/unique background themes design to help protect you're eyes while optimizing readability using common but beautiful color palettes uniquely

GitHub

Color themes

VS Code preview

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

G Dark-Themes — G Dark-shader (Haiti)

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#23073F
activityBar.activeBorder#8008f9
activityBar.background#23073F
activityBar.border#4E1B81
activityBar.foreground#870fff
activityBar.inactiveForeground#551d8e
activityBarBadge.background#6122a0
activityBarBadge.foreground#f5e9f8
badge.background#4E1B81
badge.foreground#d9a9e6
breadcrumb.activeSelectionForeground#C78CFF
breadcrumb.background#23073F
breadcrumb.focusForeground#b467fc
breadcrumb.foreground#C58BFC
breadcrumbPicker.background#23073F
button.background#3f0279
button.foreground#ddbdfc
button.hoverBackground#4E1B818f
contrastActiveBorder#270B47
contrastBorder#270B47
debugConsole.errorForeground#ee3b3b4f
debugConsole.infoForeground#31c6fc4f
debugConsole.sourceForeground#3feb794f
debugConsole.warningForeground#eeec444f
debugConsoleInputIcon.foreground#f527a34f
debugToolBar.background#23073F
descriptionForeground#f3aadc
diffEditor.insertedTextBackground#91fa7115
diffEditor.removedTextBackground#FF537020
dropdown.background#23073F
dropdown.border#4E1B81
dropdown.foreground#C58BFC
editor.background#270B47
editor.findMatchBackground#C58BFC23
editor.findMatchBorder#C58BFC
editor.findMatchHighlightBackground#C58BFC23
editor.findMatchHighlightBorder#C58BFC
editor.foreground#e4c8fd
editor.hoverHighlightBackground#C58BFC3b
editor.lineHighlightBackground#C58BFC07
editor.lineHighlightBorder#4E1B810c
editor.rangeHighlightBackground#C58BFC59
editor.selectionBackground#8169a15d
editor.selectionForeground#C58BFC
editor.selectionHighlightBackground#2f2f3096
editor.selectionHighlightBorder#8193a196
editor.snippetFinalTabstopHighlightBackground#23073F36
editor.snippetFinalTabstopHighlightBorder#172024
editor.snippetTabstopHighlightBackground#23073F5b
editor.snippetTabstopHighlightBorder#23313dc4
editor.wordHighlightBackground#7a1f5d3d
editor.wordHighlightBorder#C58BFC
editor.wordHighlightStrongBackground#3a112d41
editor.wordHighlightStrongBorder#C58BFC
editorBracketMatch.background#C58BFC42
editorBracketMatch.border#C58BFCcc
editorCursor.foreground#DAB6FC
editorError.foreground#FF8CA070
editorGroup.border#23073F30
editorGroupHeader.tabsBackground#23073F
editorGroupHeader.tabsBorder#4E1B81
editorGutter.addedBackground#BCEEDE4b
editorGutter.deletedBackground#FF8CA060
editorGutter.modifiedBackground#97AFFF73
editorHoverWidget.background#23073F
editorHoverWidget.border#4E1B81
editorIndentGuide.activeBackground1#C58BFC54
editorIndentGuide.background1#33174d17
editorLineNumber.activeForeground#704797e7
editorLineNumber.foreground#613888
editorLink.activeForeground#BC9AFF
editorMarkerNavigation.background#23073F
editorOverviewRuler.border#4E1B81
editorRuler.foreground#7ba7be82
editorStickyScroll.background#23073F
editorStickyScrollHover.background#270B47
editorSuggestWidget.background#23073F
editorSuggestWidget.border#4E1B8110
editorSuggestWidget.foreground#8971a0
editorSuggestWidget.highlightForeground#ED6FFF
editorSuggestWidget.selectedBackground#2b0e4a
editorWarning.foreground#4E1B8170
editorWhitespace.foreground#a88bbe40
editorWidget.background#23073F
editorWidget.border#23073F
editorWidget.resizeBorder#4E1B81c2
extensionBadge.remoteBackground#3f0279
extensionBadge.remoteForeground#ddbdfc
extensionButton.background#3f0279
extensionButton.foreground#ddbdfc
extensionButton.hoverBackground#4E1B818f
extensionButton.prominentBackground#500596
extensionButton.prominentHoverBackground#4E1B818f
extensionButton.separator#C88CFF
extensionIcon.preReleaseForeground#C88CFF
extensionIcon.sponsorForeground#C88CFF
extensionIcon.starForeground#C88CFF
extensionIcon.verifiedForeground#C88CFF
focusBorder#43648a46
gitDecoration.conflictingResourceForeground#e7c397a6
gitDecoration.deletedResourceForeground#FF8CA07e
gitDecoration.ignoredResourceForeground#cc57f0d5
gitDecoration.modifiedResourceForeground#97AFFFe3
gitDecoration.untrackedResourceForeground#BCEEDEab
icon.foreground#C588FF
input.background#23073F
input.border#4E1B81
input.foreground#C58BFC
input.placeholderForeground#5d3486
inputOption.activeBorder#4E1B81
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#D488D5
inputValidation.warningBorder#67769660
inputValidation.warningForeground#AFA0E9
list.activeSelectionBackground#4E1B81
list.activeSelectionForeground#c58cfa
list.dropBackground#4E1B81
list.focusBackground#4E1B81
list.focusForeground#C58BFC
list.highlightForeground#AFA4FF
list.hoverBackground#2b1248
list.hoverForeground#C58BFC
list.inactiveSelectionBackground#2f144f
list.inactiveSelectionForeground#C58BFC
listFilterWidget.background#2b1046
listFilterWidget.noMatchesOutline#23073F30
listFilterWidget.outline#23073F30
menu.background#23073F
menu.foreground#C58BFC
menu.selectionBackground#290e43
menu.selectionBorder#4E1B81
menu.selectionForeground#C58BFC
menu.separatorBackground#C58BFC
menubar.selectionBackground#a4bdbc3b
menubar.selectionBorder#4E1B81
menubar.selectionForeground#C58BFC
minimap.background#23073F
notificationLink.foreground#C88CFF
notifications.background#23073F
notifications.foreground#C58BFC
panel.background#23073F
panel.border#4E1B81
panelTitle.activeBorder#4E1B81
panelTitle.activeForeground#C58BFC
panelTitle.inactiveForeground#9360c2c5
peekView.border#4E1B816e
peekViewEditor.background#23073F
peekViewEditor.matchHighlightBackground#1c273185
peekViewEditor.matchHighlightBorder#4E1B818f
peekViewEditorGutter.background#23073F
peekViewResult.background#23073F
peekViewResult.matchHighlightBackground#37495c8e
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#23073F
peekViewTitleDescription.foreground#C588FF
pickerGroup.foreground#C588FFe5
progressBar.background#C588FFa4
sash.hoverBorder#733ea5
scrollbar.shadow#17042c
scrollbarSlider.activeBackground#878fe63a
scrollbarSlider.background#37477a33
scrollbarSlider.hoverBackground#83a8c410
selection.background#7b5b8d5d
settings.checkboxBackground#23073F
settings.checkboxForeground#C588FF
settings.dropdownBackground#23073F
settings.dropdownForeground#C588FF
settings.headerForeground#DD7AFF
settings.modifiedItemIndicator#FA9DE5
settings.numberInputBackground#23073F
settings.numberInputForeground#C588FF
settings.textInputBackground#23073F
settings.textInputForeground#C588FF
sideBar.background#23073F
sideBar.border#4E1B81
sideBar.foreground#d1a0ff
sideBarSectionHeader.background#23073F
sideBarSectionHeader.border#4E1B81
sideBarSectionHeader.foreground#a443ff
sideBarTitle.foreground#b66cfc
statusBar.background#23073F
statusBar.border#4E1B81
statusBar.debuggingBackground#611fa4
statusBar.debuggingForeground#e9d3fc
statusBar.foreground#9c85b1
statusBar.noFolderBackground#23073F
statusBarItem.hoverBackground#546E7A20
tab.activeBackground#270B47
tab.activeBorder#270B47
tab.activeBorderTop#270B47
tab.activeForeground#C58BFC
tab.activeModifiedBorder#4E1B81
tab.border#4E1B81
tab.inactiveBackground#23073F
tab.inactiveForeground#81539e
tab.unfocusedActiveBorder#C58BFC
tab.unfocusedActiveForeground#C588FF
terminal.ansiBlack#5e7486
terminal.ansiBlue#2459ce
terminal.ansiBrightBlack#516b77
terminal.ansiBrightBlue#2366f5
terminal.ansiBrightCyan#02acf0
terminal.ansiBrightGreen#12f744
terminal.ansiBrightMagenta#a32ef1
terminal.ansiBrightRed#f73051
terminal.ansiBrightWhite#d1cece
terminal.ansiBrightYellow#f5e729
terminal.ansiCyan#1482ad
terminal.ansiGreen#36ce28
terminal.ansiMagenta#8628c5
terminal.ansiRed#c92541
terminal.ansiWhite#e9e5e5
terminal.ansiYellow#ddc125
textLink.activeForeground#C588FF
textLink.foreground#C588FF
titleBar.activeBackground#23073F
titleBar.activeForeground#c08af3
titleBar.border#4E1B81
titleBar.inactiveBackground#36125a
titleBar.inactiveForeground#607a86
tree.indentGuidesStroke#23073F54
widget.shadow#17042c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#7f7091	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#C5A0F5	bold
constant.other.php, variable.other.constant	#EE6EFF
constant.language, support.constant, constant.other.color	#F36CFD	bold
invalid, invalid.illegal	#eb53ff	—
invalid.deprecated	#eb7ae1	—
keyword	#C295F0	—
storage.type	#BC8AFF	—
storage.modifier	#B07FFF	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#c169fc	—
punctuation.definition.variable.php	#BB79FD	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#dd83f8	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#BE7DFF	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#7f55a8	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#C081FF	—
entity.name.function	#bd8aff	—
source.cpp meta.block variable.other	#9c64e6	—
support.other.variable, string.other.link	#9c64e6	—
constant.numeric, constant.escape, keyword.other.unit	#ea8dfd	—
string, 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	#d584e9	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#CE85FF	—
support.other.namespace.php	#C96EFF	—
entity.name	#D56DFF	—
support.class	#DF7EFC	bold
support.type	#D35CF7	—
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	#C988FF	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#E079FF	—
variable.language	#E079FF	italic
entity.name.method.js	#DA65FD	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#DA65FD	—
entity.other.attribute-name	#ce70fd	italic
entity.other.attribute-name.class	#CE6DFF	—
source.sass keyword.control, entity.other.attribute-name.id	#D963F7	—
markup.inserted	#7BA9C4	—
markup.deleted	#E37DE4	—
markup.changed	#B085FF	—
string.regexp	#EC70FF	—
constant.character.escape	#DC76FC	—
url, link, uri	#DC6BFF	italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#E47BF7	italic
source.js constant.other.object.key.js string.unquoted.label.js	#E47BF7	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#E161FF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF6DD1	—
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	#FF72BF	—
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	#FF78AC	—
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	#FF7CD8	—
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	#F57CC9	—
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	#FF72F3	—
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	#E379ED	—
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	#DE7CFF	—
text.html.markdown, punctuation.definition.list_item.markdown	#C78CFF	—
text.html.markdown markup.inline.raw.markdown	#DE81FF	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#DFB1F1	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#EE85FF	—
markup.italic	#ec88d5	italic
markup.bold, markup.bold string	#F082D1	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	#FF6DE9	bold
markup.underline	#f881e0	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#C097FF	—
markup.quote	—	italic
string.other.link.title.markdown	#e482ff	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#f86bff	—
markup.raw.block	#C792EA	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#C692F7	—
variable.language.fenced.markdown	#D3B5E9	—
meta.separator	#C191E3	bold
markup.table	#C588FF	—

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