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 (Alice Blue)

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#F0F8FE
activityBar.activeBorder#f1116eee
activityBar.background#F0F8FE
activityBar.border#F0F8FE
activityBar.foreground#2e6086
activityBar.inactiveForeground#9eb5e0
activityBarBadge.background#4796b6
activityBarBadge.foreground#ffffff
badge.background#53b5db
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#6fa1c7
breadcrumb.background#F0F8FE
breadcrumb.focusForeground#4284b9
breadcrumb.foreground#496a86
breadcrumbPicker.background#afc9f8de
button.background#53b5db
button.foreground#ffffff
button.hoverBackground#4796b6
debugConsole.errorForeground#c02f2f
debugConsole.infoForeground#2790b6
debugConsole.sourceForeground#27bb58
debugConsole.warningForeground#7c7a0d
debugConsoleInputIcon.foreground#cc1e86
debugToolBar.background#F0F8FE
descriptionForeground#167aa1
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#F0F8FE
dropdown.border#FFFFFF10
dropdown.foreground#c2ecf5
editor.background#f8fcff
editor.findMatchBackground#7799e23b
editor.findMatchBorder#3c86a398
editor.findMatchHighlightBackground#6e8bc53d
editor.findMatchHighlightBorder#3c86a367
editor.foreground#79848f
editor.hoverHighlightBackground#bcc8fa61
editor.lineHighlightBackground#717f9917
editor.lineHighlightBorder#8abffc25
editor.rangeHighlightBackground#c0d3f88a
editor.selectionBackground#6792f74d
editor.selectionHighlightBackground#cbe6fc96
editor.selectionHighlightBorder#8193a196
editor.wordHighlightBackground#80a9e221
editor.wordHighlightBorder#0d7fac5e
editor.wordHighlightStrongBackground#75a4e659
editor.wordHighlightStrongBorder#0d7fac5e
editorBracketMatch.background#052e7942
editorBracketMatch.border#21c4f5cc
editorCursor.foreground#f70fb9
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#F0F8FE
editorGutter.addedBackground#84b83b50
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#F0F8FE
editorHoverWidget.border#c4dff5
editorIndentGuide.activeBackground1#beddf7
editorIndentGuide.background1#f8fcff
editorLineNumber.activeForeground#43648ac7
editorLineNumber.foreground#95abde
editorLink.activeForeground#319dcf
editorMarkerNavigation.background#F0F8FE
editorOverviewRuler.border#F0F8FE
editorRuler.foreground#7ba7be82
editorStickyScroll.background#F0F8FE
editorStickyScrollHover.background#80a9e221
editorSuggestWidget.background#F0F8FE
editorSuggestWidget.border#cfe5f7
editorSuggestWidget.foreground#4d5a64
editorSuggestWidget.highlightForeground#5e97b8de
editorSuggestWidget.selectedBackground#d1e6f7ea
editorWarning.foreground#20462a70
editorWhitespace.foreground#919fb36e
editorWidget.background#F0F8FE
editorWidget.resizeBorder#6c8ea8c2
extensionBadge.remoteBackground#53b5db
extensionBadge.remoteForeground#ffffff
extensionButton.background#53b5db
extensionButton.foreground#ffffff
extensionButton.hoverBackground#4796b6
extensionButton.prominentBackground#53b5db
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#4796b6
extensionButton.separator#53b5db
extensionIcon.preReleaseForeground#53b5db
extensionIcon.sponsorForeground#53b5db
extensionIcon.starForeground#53b5db
extensionIcon.verifiedForeground#53b5db
focusBorder#476a9346
gitDecoration.conflictingResourceForeground#c79712c7
gitDecoration.deletedResourceForeground#c70f2ed2
gitDecoration.ignoredResourceForeground#8825a7d5
gitDecoration.modifiedResourceForeground#0764a1e3
gitDecoration.untrackedResourceForeground#1a8507e3
icon.foreground#2e7486
input.background#f6fbff
input.border#d9e5fc
input.foreground#606a72
input.placeholderForeground#6c90ac8e
inputOption.activeBorder#87a6bb
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBorder#67769660
list.activeSelectionBackground#c3ddf1de
list.activeSelectionForeground#686a6e
list.dropBackground#70707a
list.focusBackground#518ea020
list.focusForeground#3b7285
list.highlightForeground#85a3e5
list.hoverBackground#cde7ffbd
list.hoverForeground#565b5f
list.inactiveSelectionBackground#d9eaf8
list.inactiveSelectionForeground#5b6672
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#F0F8FE
menu.foreground#2a738b
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#a2d1f5
menu.separatorBackground#a8d5f7
menubar.selectionBackground#d0ebf78c
menubar.selectionBorder#00000030
menubar.selectionForeground#518ea0
minimap.background#F0F8FE
notificationLink.foreground#53b5db
notifications.background#F0F8FE
notifications.foreground#556179
panel.background#F0F8FE
panel.border#b7c7f8a4
panelTitle.activeBorder#00ccff
panelTitle.activeForeground#3b4d70d8
panelTitle.inactiveForeground#4e728de0
peekView.border#cde5f8
peekViewEditor.background#F0F8FE
peekViewEditor.matchHighlightBackground#93cefc59
peekViewEditor.matchHighlightBorder#6bbaf7
peekViewEditorGutter.background#F0F8FE
peekViewResult.background#F0F8FE
peekViewResult.matchHighlightBackground#a2d1f5c0
peekViewResult.selectionBackground#d0ebf78c
peekViewTitle.background#F0F8FE
peekViewTitleDescription.foreground#518ea060
pickerGroup.foreground#518ea0e5
progressBar.background#36baeea4
sash.hoverBorder#85aadf
scrollbar.shadow#556c7457
scrollbarSlider.activeBackground#dff1ffea
scrollbarSlider.background#d4e7f7cc
scrollbarSlider.hoverBackground#e4f2fde0
selection.background#5c82dc49
settings.checkboxBackground#F0F8FE
settings.checkboxForeground#518ea0
settings.dropdownBackground#F0F8FE
settings.dropdownForeground#518ea0
settings.headerForeground#3d7f97
settings.modifiedItemIndicator#fa8086
settings.numberInputBackground#F0F8FE
settings.numberInputForeground#518ea0
settings.textInputBackground#F0F8FE
settings.textInputForeground#518ea0
sideBar.background#F0F8FE
sideBar.border#f8fcff
sideBar.foreground#525e78
sideBarSectionHeader.background#f8fcff
sideBarSectionHeader.border#f8fcff
sideBarSectionHeader.foreground#576ea0
sideBarTitle.foreground#71afbd
statusBar.background#F0F8FEd3
statusBar.border#F0F8FE
statusBar.debuggingBackground#a6d0f5
statusBar.debuggingForeground#595f64
statusBar.foreground#6d7274
statusBar.noFolderBackground#F0F8FE
statusBarItem.hoverBackground#546E7A20
tab.activeBackground#f8fcff
tab.activeBorder#00ccff
tab.activeForeground#263038f0
tab.activeModifiedBorder#607086
tab.border#bbc6d91f
tab.inactiveBackground#F0F8FE
tab.inactiveForeground#7992a1
tab.unfocusedActiveBorder#54687a
tab.unfocusedActiveForeground#518ea0
terminal.ansiBlack#a8c5e0
terminal.ansiBlue#2254c1
terminal.ansiBrightBlack#abc8da
terminal.ansiBrightBlue#1a56d8
terminal.ansiBrightCyan#0e9bd3
terminal.ansiBrightGreen#21d548
terminal.ansiBrightMagenta#9313e8
terminal.ansiBrightRed#eb2244
terminal.ansiBrightWhite#9caec8
terminal.ansiBrightYellow#948a03
terminal.ansiCyan#1482ad
terminal.ansiGreen#2fc722
terminal.ansiMagenta#7f25bb
terminal.ansiRed#c92541
terminal.ansiWhite#55575e
terminal.ansiYellow#999514
terminal.background#F0F8FE
terminal.foreground#516878
terminal.selectionBackground#4596bb60
textLink.activeForeground#20425e
textLink.foreground#147c96eb
titleBar.activeBackground#F0F8FEd3
titleBar.activeForeground#518ea0
titleBar.border#F0F8FE60
titleBar.inactiveBackground#F0F8FE
titleBar.inactiveForeground#607a86
tree.indentGuidesStroke#c9e6fde8
widget.shadow#4646485b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#959799	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#708b9b	bold
constant.other.php, variable.other.constant	#14992f
constant.language, support.constant, constant.other.color	#29a987	bold
variable.language	#e0496f	italic
constant.other.color	#8d4d03	bold
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
keyword	#e48473	—
storage.type	#e120e1e3	—
storage.modifier	#e83a3aea	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#ca62e1	—
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	#ef654d	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#e67d9e	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#6a45e1ef	—
entity.name.function	#dc1f93ec	—
source.cpp meta.block variable.other	#91a8b6	—
support.other.variable, string.other.link	#91a8b6	—
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	—
meta.use.php, markup.changed.git_gutter, support.type.sys-types	#f544c8f1	—
support.other.namespace.use.php, support.other.namespace.php	#a064e4	—
entity.name	#1275e6ef	—
support.class	#b22fe6e3	bold
support.type	#f544c8f1	—
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	#8e35d7ef	—
entity.other.attribute-name	#4176c6f7	italic
entity.other.attribute-name.class	#315ec0ea	—
source.sass keyword.control, entity.other.attribute-name.id	#079358e8	—
markup.inserted	#7bca047c	—
markup.deleted	#f4022a9f	—
markup.changed	#3b07f785	—
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	#518ea0	—
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	#518ea090	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#518ea0	—

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