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 (Hint of Red)

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#ffd50044
activityBar.activeBorder#5eff00
activityBar.background#fcfbf7
activityBar.border#dbdfe081
activityBar.foreground#9d910e
activityBar.inactiveForeground#c4b50f
activityBarBadge.background#a9e984
activityBarBadge.foreground#081318
badge.background#a9e984
badge.foreground#081318
breadcrumb.activeSelectionForeground#558a84
breadcrumb.background#fcfbf7
breadcrumb.focusForeground#474e55
breadcrumb.foreground#607a86
breadcrumbPicker.background#f5f1e0
button.background#9cec6e
button.foreground#081318
button.hoverBackground#9cec6eb0
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#2ca6d2
debugConsole.sourceForeground#2dd765
debugConsole.warningForeground#706f0b
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#fcfbf7
diffEditor.insertedTextBackground#cbf1927e
diffEditor.removedTextBackground#fa5a757e
dropdown.background#fcfbf7
dropdown.border#ece7cb
editor.background#f9f9f9
editor.findMatchBackground#c1c2960a
editor.findMatchBorder#81d6ebf6
editor.findMatchHighlightBackground#98aabd80
editor.findMatchHighlightBorder#0555757c
editor.foldBackground#eefa8131
editor.foreground#5f6870
editor.hoverHighlightBackground#3c97e72c
editor.lineHighlightBackground#d5b6381c
editor.lineHighlightBorder#d5b6382a
editor.selectionBackground#d5b63831
editor.selectionHighlightBackground#97d7f7ec
editor.snippetFinalTabstopHighlightBackground#f3efd236
editor.snippetFinalTabstopHighlightBorder#f3efd2
editor.snippetTabstopHighlightBackground#f3efd236
editor.snippetTabstopHighlightBorder#f3efd2
editor.wordHighlightBackground#ce080800
editor.wordHighlightBorder#05567598
editor.wordHighlightStrongBackground#e4858538
editor.wordHighlightStrongBorder#05567598
editorBracketMatch.background#5c95d636
editorBracketMatch.border#28488dc4
editorCursor.foreground#1667e0
editorError.foreground#FF5370
editorGroup.border#474e55
editorGroupHeader.tabsBackground#fcfbf7
editorGutter.addedBackground#84b83b50
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#fff7c8
editorHoverWidget.border#fcf7e4
editorIndentGuide.activeBackground1#c7ba43e1
editorIndentGuide.background1#f9f9f9
editorLineNumber.activeForeground#3782a5
editorLineNumber.foreground#b9c1c5
editorLink.activeForeground#474e55
editorMarkerNavigation.background#fcfbf7
editorOverviewRuler.border#474e55
editorRuler.foreground#aebbc1
editorStickyScroll.background#fcfbf7
editorStickyScrollHover.background#f9f9f9
editorSuggestWidget.background#fcfbf7
editorSuggestWidget.border#FFFFFF
editorSuggestWidget.foreground#474e55
editorSuggestWidget.highlightForeground#1b5f9e
editorSuggestWidget.selectedBackground#faf5df
editorWarning.foreground#C3E88D
editorWhitespace.foreground#c5ac779a
editorWidget.background#fcfbf7
editorWidget.border#fcfbf7
editorWidget.resizeBorder#80CBC4
extensionBadge.remoteBackground#9cec6e
extensionBadge.remoteForeground#081318
extensionButton.background#9cec6e
extensionButton.foreground#081318
extensionButton.hoverBackground#9cec6eb0
extensionButton.prominentBackground#7fd14f
extensionButton.prominentForeground#081318
extensionButton.prominentHoverBackground#86e74db0
extensionButton.separator#80CBC4
extensionIcon.preReleaseForeground#80CBC4
extensionIcon.sponsorForeground#80CBC4
extensionIcon.starForeground#80CBC4
extensionIcon.verifiedForeground#80CBC4
focusBorder#c4bea0
gitDecoration.conflictingResourceForeground#d18e12de
gitDecoration.deletedResourceForeground#c51533e7
gitDecoration.ignoredResourceForeground#9a28bde1
gitDecoration.modifiedResourceForeground#1046b9d7
gitDecoration.untrackedResourceForeground#16830cde
icon.foreground#314350
input.background#fcf9e1
input.border#FFFFFF
input.foreground#555d63
input.placeholderForeground#626364c9
inputValidation.errorBorder#FF5370
inputValidation.infoBorder#82AAFF
inputValidation.warningBackground#f3f2f2
inputValidation.warningBorder#677696
inputValidation.warningForeground#474e55
list.activeSelectionBackground#f8f4e5
list.activeSelectionForeground#78848f
list.focusBackground#F0F8FE
list.focusForeground#4f5255
list.highlightForeground#4c718b
list.hoverBackground#fff7c8
list.hoverForeground#77766d
list.inactiveSelectionBackground#fffae0e0
list.inactiveSelectionForeground#3a4e64
listFilterWidget.background#ebebf5
listFilterWidget.noMatchesOutline#fff7c8
listFilterWidget.outline#fff7c8
menu.background#e6dfbe
menu.foreground#474e55
menu.selectionBackground#373768
menu.selectionBorder#fff7c8
menu.selectionForeground#80CBC4
menu.separatorBackground#F0F8FE
menubar.selectionBackground#fff7c8
menubar.selectionBorder#fff4b8
menubar.selectionForeground#474e55
minimap.background#fcfbf7
notificationLink.foreground#80CBC4
notifications.background#fcfbf7
notifications.foreground#132431
panel.background#fcfbf7
panel.border#cecbbb
panelTitle.activeBorder#80CBC4
panelTitle.activeForeground#474e55
panelTitle.inactiveForeground#6e7174
peekView.border#fcf1c5
peekViewEditor.background#fcfbf7
peekViewEditor.matchHighlightBackground#fcf1c5b4
peekViewEditor.matchHighlightBorder#a6e2dc
peekViewEditorGutter.background#fcfbf7
peekViewResult.background#fcfbf7
peekViewResult.matchHighlightBackground#a6e2dc
peekViewResult.selectionBackground#fcf1c5b4
peekViewTitle.background#fcf3cdb4
peekViewTitleDescription.foreground#474e55
pickerGroup.foreground#80CBC4
progressBar.background#80CBC4
sash.hoverBorder#f5eca1
scrollbar.shadow#969b4e67
scrollbarSlider.activeBackground#f2f7db
scrollbarSlider.background#e7e399a2
scrollbarSlider.hoverBackground#f3efd2
selection.background#ffd5005f
settings.checkboxBackground#fcf9e1
settings.checkboxBorder#F0F8FE
settings.checkboxForeground#474e55
settings.dropdownBackground#fcf9e1
settings.dropdownBorder#F0F8FE
settings.dropdownForeground#474e55
settings.dropdownListBorder#F0F8FE
settings.headerForeground#435474
settings.modifiedItemIndicator#80CBC4
settings.numberInputBackground#fcf9e1
settings.numberInputBorder#F0F8FE
settings.numberInputForeground#474e55
settings.textInputBackground#fcf9e1
settings.textInputBorder#F0F8FE
settings.textInputForeground#474e55
sideBar.background#fcfbf7
sideBar.border#fcfbf7
sideBar.foreground#657e8a
sideBarSectionHeader.background#fcfbf7
sideBarSectionHeader.border#dbdfe081
sideBarSectionHeader.foreground#244b68
sideBarTitle.foreground#244b68
statusBar.background#fcfbf7
statusBar.border#fcfbf7
statusBar.debuggingBackground#a9e984
statusBar.debuggingForeground#474e55
statusBar.foreground#64757c
statusBar.noFolderBackground#fcfbf7
statusBarItem.hoverBackground#fff7c8
tab.activeBackground#f9f9f9
tab.activeBorder#5eff00
tab.activeBorderTop#f9f9f9
tab.activeForeground#474e55
tab.activeModifiedBorder#607a86
tab.border#f5f5e4
tab.inactiveBackground#fcfbf7
tab.inactiveForeground#6a8a92
tab.unfocusedActiveBorder#1b688b
tab.unfocusedActiveForeground#9aa0a5
terminal.ansiBlack#737272
terminal.ansiBlue#336deb
terminal.ansiBrightBlack#7c7d7d
terminal.ansiBrightBlue#1554dc
terminal.ansiBrightCyan#18b1df
terminal.ansiBrightGreen#17ab09
terminal.ansiBrightMagenta#8614d2
terminal.ansiBrightRed#eb3c59
terminal.ansiBrightWhite#777575
terminal.ansiBrightYellow#acac02
terminal.ansiCyan#189ed3
terminal.ansiGreen#0dc406
terminal.ansiMagenta#940dee
terminal.ansiRed#f02b4b
terminal.ansiWhite#7a7878
terminal.ansiYellow#b3a402
textLink.activeForeground#474e55
textLink.foreground#2d83e6
titleBar.activeBackground#fcfbf7
titleBar.activeForeground#3f484e
titleBar.border#fcfbf7
titleBar.inactiveBackground#f6f6f6
titleBar.inactiveForeground#607a86
widget.shadow#9d9da9d6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#959595	italic
variable, string constant.other.placeholder	#708b9b	bold
constant.other.php, variable.other.constant	#7f9512
constant.language, support.constant, constant.other.color	#068f31	bold
variable.language	#f7406e	italic
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#ea9296	—
keyword	#e05e94	—
storage.type	#dc33c3	—
storage.modifier	#bc34db	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#2cb8b3	bold
punctuation.definition.variable.php	#5ba4d5	bold
keyword.control, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#c49434	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#2fab7b	—
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#d3af59	—
meta.function-call, variable.function, support.function, keyword.other.special-method	#3a6fd8	—
entity.name.function	#28a1de	—
source.cpp meta.block variable.other	#7f97ab	—
support.other.variable, string.other.link	#7f97ab	—
constant.character, constant.escape, keyword.other.unit, keyword.other	#e95136	—
constant.numeric	#e9613c	—
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	#4c9496f1	—
entity.name, support.type, support.class, meta.use.php, markup.changed.git_gutter, support.type.sys-types	#e87e68	—
support.other.namespace.use.php, support.other.namespace.php	#df8e63	—
support.class	#f77936	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	#3b87a7	—
entity.other.attribute-name	#de6856	italic
entity.other.attribute-name.class	#dc4886	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#e93fca	—
constant.character.escape	#2831d8	—
url, link, uri	—	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	#a139e6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#e69b10	—
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	#ec68ee	—
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	#96c532	—
text.html.markdown, punctuation.definition.list_item.markdown	#0e2a3f	—
text.html.markdown markup.inline.raw.markdown	#911edd	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
text.html.markdown meta.dummy.line-break	#303C41	—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#e54185	bold
markup.italic	#026852	italic
markup.bold, markup.bold string	#db71f0	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	#b67d2e	underline
markup.strike	#54646b	bold
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	#3eb111	italic
string.other.link.title.markdown	#5987eb	—
string.other.link.description.title.markdown	#9f43dd	—
constant.other.reference.link.markdown	#d38d0b	—
markup.raw.block	#6c259b	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#474e55	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#474e55	—

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