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-light (Glitter)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#e0eafc
activityBar.activeBorder#f1116eee
activityBar.background#e8f0ffd3
activityBar.border#ebf2fe
activityBar.foreground#2e6086
activityBar.inactiveForeground#9eb5e0
activityBarBadge.background#576ea0
activityBarBadge.foreground#ffffff
badge.background#576ea0
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#538fbd
breadcrumb.background#e0eafc
breadcrumb.focusForeground#2b8edf
breadcrumb.foreground#48879c
breadcrumbPicker.background#afc9f8
button.background#708df5
button.foreground#ffffff
button.hoverBackground#8095e4
debugConsole.errorForeground#c22f2f
debugConsole.infoForeground#2791b8
debugConsole.sourceForeground#27b958
debugConsole.warningForeground#868410
debugConsoleInputIcon.foreground#c91f85
debugToolBar.background#e0eafc
descriptionForeground#576ea0
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#e0eafc
dropdown.border#FFFFFF10
dropdown.foreground#c2ecf5
editor.background#e3ecfc
editor.findMatchBackground#7799e23b
editor.findMatchBorder#3c86a398
editor.findMatchHighlightBackground#5c90f831
editor.findMatchHighlightBorder#5db4d679
editor.foreground#546a7b
editor.hoverHighlightBackground#9fb1fa3a
editor.lineHighlightBackground#717f9917
editor.lineHighlightBorder#8abffc25
editor.rangeHighlightBackground#c0d3f88a
editor.selectionBackground#6792f74d
editor.selectionHighlightBackground#cbe6fc96
editor.selectionHighlightBorder#8193a196
editor.wordHighlightBackground#0464eb21
editor.wordHighlightBorder#0d7fac5e
editor.wordHighlightStrongBackground#0464eb33
editor.wordHighlightStrongBorder#0d7fac5e
editorBracketMatch.background#052e7942
editorBracketMatch.border#576ea0cc
editorCursor.foreground#f70fb9
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#e0eafc
editorGutter.addedBackground#84b83b50
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#d9e5fb
editorHoverWidget.border#95c5fc8c
editorIndentGuide.activeBackground1#4344505d
editorIndentGuide.background1#e3ecfc
editorLineNumber.activeForeground#43648ac7
editorLineNumber.foreground#95abde
editorLink.activeForeground#576ea0
editorMarkerNavigation.background#d9e5fb
editorOverviewRuler.border#e0eafc
editorRuler.foreground#7ba7be82
editorStickyScroll.background#e0eafc
editorStickyScrollHover.background#e3ecfc
editorSuggestWidget.background#d9e5fb
editorSuggestWidget.border#c1d4f8
editorSuggestWidget.foreground#4d5a64
editorSuggestWidget.highlightForeground#1a3774de
editorSuggestWidget.selectedBackground#ccddfc
editorWarning.foreground#20462a70
editorWhitespace.foreground#859ab85e
editorWidget.background#e0eafc
editorWidget.resizeBorder#6c8ea8c2
extensionBadge.remoteBackground#708df5
extensionBadge.remoteForeground#ffffff
extensionButton.background#708df5
extensionButton.foreground#ffffff
extensionButton.hoverBackground#8095e4
extensionButton.prominentBackground#5372e2
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#708df5b0
extensionButton.separator#627ad1
extensionIcon.preReleaseForeground#627ad1
extensionIcon.sponsorForeground#627ad1
extensionIcon.starForeground#627ad1
extensionIcon.verifiedForeground#627ad1
focusBorder#43648a46
gitDecoration.conflictingResourceForeground#be8315cb
gitDecoration.deletedResourceForeground#c70f2ed2
gitDecoration.ignoredResourceForeground#8825a7d5
gitDecoration.modifiedResourceForeground#0764a1e3
gitDecoration.untrackedResourceForeground#1a8507e3
icon.foreground#2e6086
input.background#f1f8ff
input.border#d9e5fc
input.foreground#414d57
input.placeholderForeground#6c90ac8e
inputOption.activeBorder#474a58
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBorder#67769660
list.activeSelectionBackground#b1c5e9d3
list.activeSelectionForeground#2f3b55
list.dropBackground#4d4d5a
list.focusBackground#064aa820
list.focusForeground#3b7285
list.highlightForeground#85a3e5
list.hoverBackground#c0d0ec
list.hoverForeground#1a2530
list.inactiveSelectionBackground#c4d6f78a
list.inactiveSelectionForeground#48525c
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#e0eafc
menu.foreground#2a738b
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#a2d1f5
menu.separatorBackground#a8d5f7
menubar.selectionBackground#93cefc7c
menubar.selectionBorder#00000030
menubar.selectionForeground#576ea0
minimap.background#e0e9fa
notificationLink.foreground#627ad1
notifications.background#e0eafc
notifications.foreground#556179
panel.background#e0eafc
panel.border#b7c7f8a4
panelTitle.activeBorder#ec0867ef
panelTitle.activeForeground#3b4d70d8
panelTitle.inactiveForeground#4e728de0
peekView.border#cbdaf7
peekViewEditor.background#d9e5fb
peekViewEditor.matchHighlightBackground#93cefc7c
peekViewEditor.matchHighlightBorder#7dc4faee
peekViewEditorGutter.background#d5e2fa
peekViewResult.background#d5e2fa
peekViewResult.matchHighlightBackground#7ec0f3c0
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#d5e2fa
peekViewTitleDescription.foreground#064aa860
pickerGroup.foreground#576ea0e5
progressBar.background#365beea4
sash.hoverBorder#8fb2e3
scrollbar.shadow#2d2f3657
scrollbarSlider.activeBackground#878fe63a
scrollbarSlider.background#37477a33
scrollbarSlider.hoverBackground#83a8c410
selection.background#6792f74d
settings.checkboxBackground#f1f8ff
settings.checkboxForeground#576ea0
settings.dropdownBackground#f1f8ff
settings.dropdownForeground#576ea0
settings.headerForeground#3d7f97
settings.modifiedItemIndicator#fa8086
settings.numberInputBackground#f1f8ff
settings.numberInputForeground#576ea0
settings.textInputBackground#f1f8ff
settings.textInputForeground#576ea0
sideBar.background#e0eafc
sideBar.border#b4bffc60
sideBar.foreground#6d7587
sideBarSectionHeader.background#ebf2fe
sideBarSectionHeader.border#e8f0ff
sideBarSectionHeader.foreground#566585
sideBarTitle.foreground#566585
statusBar.background#e8f0ffd3
statusBar.border#e0eafc
statusBar.debuggingBackground#a6d0f5
statusBar.debuggingForeground#394149
statusBar.foreground#6a7275
statusBar.noFolderBackground#e0eafc
statusBarItem.hoverBackground#01040520
tab.activeBackground#ebf2fe
tab.activeBorder#e90080
tab.activeForeground#0d1a25f0
tab.activeModifiedBorder#607086
tab.border#bbc6d91f
tab.inactiveBackground#e0eafc
tab.inactiveForeground#879eac
tab.unfocusedActiveBorder#54687a
tab.unfocusedActiveForeground#598ace
terminal.ansiBlack#586c77
terminal.ansiBlue#2254c1
terminal.ansiBrightBlack#607783
terminal.ansiBrightBlue#1a56d8
terminal.ansiBrightCyan#0e9bd3
terminal.ansiBrightGreen#1ec542
terminal.ansiBrightMagenta#9313e8
terminal.ansiBrightRed#eb2244
terminal.ansiBrightWhite#2a3a40
terminal.ansiBrightYellow#998f04
terminal.ansiCyan#1482ad
terminal.ansiGreen#2cbc1f
terminal.ansiMagenta#7f25bb
terminal.ansiRed#c92541
terminal.ansiWhite#2b3a40
terminal.ansiYellow#9c9816
textLink.activeForeground#20425e
textLink.foreground#145d96eb
titleBar.activeBackground#e8f0ffd3
titleBar.activeForeground#576ea0
titleBar.border#e0eafc60
titleBar.inactiveBackground#e0eafc
titleBar.inactiveForeground#607a86
tree.indentGuidesStroke#c4d4f3e1
widget.shadow#4646485b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#888e97	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#708b9b	bold
constant.other.php, variable.other.constant	#309511
constant.language, support.constant, constant.other.color	#0da47c	bold
variable.language	#e0496f	italic
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
keyword	#e48473	—
storage.type	#de20dee3	—
storage.modifier	#f44f4f	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#ce61e6	—
punctuation.definition.variable.php	#408dc1	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#ed8129e2	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#df6565	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#e18086	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#8d4de6	—
entity.name.function	#dc38a0	—
source.cpp meta.block variable.other	#738e9a	—
support.other.variable, string.other.link	#738e9a	—
constant.numeric, constant.escape, keyword.other.unit	#e58c19	—
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	#829e3a	—
support.other.namespace.use.php, meta.use.php, markup.changed.git_gutter, support.type.sys-types	#ea42c0f1	—
support.other.namespace.php	#9f63e4	—
entity.name	#1275e6ef	—
support.class	#ae2de1e3	bold
support.type	#eb40c0f1	—
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	#9d36f1ef	—
entity.other.attribute-name	#4069c2ea	italic
entity.other.attribute-name.class	#315ec0ea	—
source.sass keyword.control, entity.other.attribute-name.id	#09a062e8	—
markup.inserted	#7aca04	—
markup.deleted	#f4022b	—
markup.changed	#3b07f7	—
string.regexp	#f14242e7	—
constant.character.escape	#c73ab4	—
url, link, uri	#ff0000	italic underline
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	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#981debe7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d39015	—
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	#e4562aea	—
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	#f03453e3	—
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	#c5634ff0	—
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	#3d77f5ef	—
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	#e029d1f4	—
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	#0d97c5e8	—
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	#30b408e7	—
text.html.markdown, punctuation.definition.list_item.markdown	#064aa8	—
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	#e54185	—
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	#064aa890	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#064aa8	—

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