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 (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.background#23073F
activityBar.border#200f3b
activityBar.foreground#810df5
activityBar.inactiveForeground#441771
activityBarBadge.background#5a1f94
activityBarBadge.foreground#f0defc
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#23073F
contrastBorder#23073F
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#23073F
diffEditor.insertedTextBackground#b3fa7a15
diffEditor.removedTextBackground#FF537020
dropdown.background#23073F
dropdown.border#cda8f510
editor.background#270B47
editor.findMatchBackground#37135b6e
editor.findMatchBorder#37135b7a
editor.findMatchHighlightBackground#37135b42
editor.findMatchHighlightBorder#37135b3b
editor.foreground#dcf2f7
editor.hoverHighlightBackground#37135b2c
editor.lineHighlightBackground#1a0a2b8c
editor.selectionBackground#311550dc
editor.selectionForeground#ca9aec
editor.selectionHighlightBackground#37135b60
editor.snippetFinalTabstopHighlightBackground#1c0a2e
editor.snippetFinalTabstopHighlightBorder#1c0a2e
editor.snippetTabstopHighlightBackground#1c0a2e36
editor.snippetTabstopHighlightBorder#1c0a2eb9
editor.wordHighlightBackground#37135b17
editor.wordHighlightBorder#37135b5e
editor.wordHighlightStrongBackground#37135b2d
editor.wordHighlightStrongBorder#37135b77
editorBracketMatch.background#23073F
editorBracketMatch.border#67769660
editorCursor.foreground#f1e506
editorError.foreground#FF537070
editorGroup.border#7009df30
editorGroupHeader.tabsBackground#23073F
editorGutter.addedBackground#BCEEDE4b
editorGutter.deletedBackground#FF8CA060
editorGutter.modifiedBackground#97AFFF73
editorHoverWidget.background#30104f
editorHoverWidget.border#cda8f510
editorIndentGuide.activeBackground1#461a72
editorIndentGuide.background1#200f3b
editorLineNumber.activeForeground#8927ED
editorLineNumber.foreground#4a1e75
editorLink.activeForeground#C792EA
editorMarkerNavigation.background#23073Fde
editorOverviewRuler.border#23073F
editorRuler.foreground#37474F
editorStickyScroll.background#23073F
editorStickyScrollHover.background#200f3b
editorSuggestWidget.background#37135b
editorSuggestWidget.border#cda8f510
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#A342FF
editorSuggestWidget.selectedBackground#2e0f4d
editorWarning.foreground#C3E88D70
editorWhitespace.foreground#4e466680
editorWidget.background#1d0b30
editorWidget.resizeBorder#A342FF
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#A342FF65
gitDecoration.conflictingResourceForeground#e7c397a6
gitDecoration.deletedResourceForeground#FF8CA07e
gitDecoration.ignoredResourceForeground#cc57f0d5
gitDecoration.modifiedResourceForeground#97AFFFe3
gitDecoration.untrackedResourceForeground#BCEEDEab
icon.foreground#C588FF
input.background#2d0d4d
input.border#cda8f500
input.foreground#cda8f5
input.placeholderForeground#9156b8
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#D488D5
inputValidation.warningBorder#67769660
inputValidation.warningForeground#AFA0E9
list.activeSelectionBackground#37135b
list.activeSelectionForeground#c790fa
list.focusBackground#37135bb9
list.focusForeground#C792EA
list.highlightForeground#A342FF
list.hoverBackground#2c1048
list.hoverForeground#cda8f5
list.inactiveSelectionBackground#200f3b
list.inactiveSelectionForeground#9657d1
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#200f3b60
panelTitle.activeBorder#37135b
panelTitle.activeForeground#C792EA
panelTitle.inactiveForeground#5f427c
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#A342FF
sash.hoverBorder#741dcb
scrollbar.shadow#36135ade
scrollbarSlider.activeBackground#2c104bdc
scrollbarSlider.background#290f44cc
scrollbarSlider.hoverBackground#3312556c
selection.background#9c48dc3b
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#200f3b
sideBar.foreground#C792EA
sideBarSectionHeader.background#200f3b
sideBarSectionHeader.border#37135b
sideBarSectionHeader.foreground#b550f9
sideBarTitle.foreground#a94de6
statusBar.background#23073F
statusBar.border#23073F
statusBar.debuggingBackground#491a78
statusBar.debuggingForeground#d4adee
statusBar.foreground#a47ace
statusBar.noFolderBackground#23073F
statusBarItem.hoverBackground#37135bb7
tab.activeBorder#37135b
tab.activeBorderTop#23073F
tab.activeForeground#c893fd
tab.activeModifiedBorder#37135b
tab.border#23073F
tab.hoverBorder#37135b
tab.inactiveBackground#23073F
tab.inactiveForeground#734e99
tab.unfocusedActiveBorder#37135b
tab.unfocusedActiveForeground#a257ec
terminal.ansiBlack#6a7276
terminal.ansiBlue#5380df
terminal.ansiBrightBlack#5f666c
terminal.ansiBrightBlue#477ced
terminal.ansiBrightCyan#69cef6
terminal.ansiBrightGreen#6be62a
terminal.ansiBrightMagenta#b865f0
terminal.ansiBrightRed#df1e3f
terminal.ansiBrightWhite#eaeff4
terminal.ansiBrightYellow#e2d21d
terminal.ansiCyan#66c5eb
terminal.ansiGreen#b0e95a
terminal.ansiMagenta#b25deb
terminal.ansiRed#ed3352
terminal.ansiWhite#c9def0
terminal.ansiYellow#eaca40
textLink.activeForeground#C792EA
textLink.foreground#A342FF
titleBar.activeBackground#23073F
titleBar.activeForeground#e3c7f5
titleBar.border#23073F
titleBar.inactiveBackground#230e39
titleBar.inactiveForeground#C792EA
tree.indentGuidesStroke#23073F54
widget.shadow#7009df30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#796f89	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#a197c5	bold
constant.other.php, variable.other.constant	#abc774
constant.language, support.constant, constant.other.color	#d8bf90	bold
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
keyword	#ec75a7	—
storage.type	#ff8091	—
storage.modifier	#d69dfb	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#96ceb4	—
punctuation.definition.variable.php, punctuation.definition.variable.less	#cf7786	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#f37c78	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#f37a8a	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#fb6eb5	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#709ef3	—
entity.name.function	#59c7f3	bold
source.cpp meta.block variable.other	#8DB0BB	—
support.other.variable, string.other.link	#8DB0BB	—
constant.numeric, constant.escape, keyword.other.unit	#dbab67	—
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	#9bc0ae	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#fbd999	—
support.class	#ffcc6d	bold
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	#96ceb4	—
entity.other.attribute-name	#ffd07a	italic
entity.other.attribute-name.class	#bdec71	—
source.sass keyword.control, entity.other.attribute-name.id	#2eb7fb	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#eb752c	—
constant.character.escape	#25ecfa	—
url, link, uri	—	italic underline
variable.language	#e77da6	italic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#fc768c	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f3c36b	—
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	#F78C6C	—
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	#FF5370	—
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	#C17E70	—
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	#82AAFF	—
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	#f07178	—
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	#C792EA	—
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	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	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	#f07178	bold
markup.underline	#F78C6C	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#C792EA90	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#C792EA	—

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