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-minimal-2 (Astronaut Blue)

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...
~/my-project

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#124154
activityBar.activeBorder#4c93b4
activityBar.background#124154
activityBar.border#124154
activityBar.foreground#3aa6d8
activityBar.inactiveForeground#2f6485
activityBarBadge.background#0F6186
activityBarBadge.foreground#B8F2FF
badge.background#0F6186
badge.foreground#B8F2FF
breadcrumb.activeSelectionForeground#B8F2FF
breadcrumb.background#124154
breadcrumb.focusForeground#9eccf0
breadcrumb.foreground#6bc7e6
breadcrumbPicker.background#124154
button.background#0F6186
button.foreground#B8F2FF
button.hoverBackground#0F6186dd
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#124154
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#124154
dropdown.border#124154
editor.background#18475A
editor.findMatchBackground#1a24276e
editor.findMatchBorder#3c86a37a
editor.findMatchHighlightBackground#466a8d42
editor.findMatchHighlightBorder#28bcf73b
editor.foreground#B8F2FF
editor.hoverHighlightBackground#3c97e72c
editor.lineHighlightBackground#12415481
editor.selectionBackground#1b709f5d
editor.selectionHighlightBackground#49a0e260
editor.snippetFinalTabstopHighlightBackground#1f5761
editor.snippetFinalTabstopHighlightBorder#1d4855
editor.snippetTabstopHighlightBackground#12415436
editor.snippetTabstopHighlightBorder#1d4855b9
editor.wordHighlightBackground#0ab2f517
editor.wordHighlightBorder#0ab2f55e
editor.wordHighlightStrongBackground#3c87f02d
editor.wordHighlightStrongBorder#1089b977
editorBracketMatch.background#124154
editorBracketMatch.border#67769660
editorCursor.foreground#59caf7
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#124154
editorGutter.addedBackground#84b83b50
editorGutter.deletedBackground#FF537070
editorGutter.modifiedBackground#4e81ee90
editorHoverWidget.background#124154
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#336e8a
editorIndentGuide.background1#18475A
editorLineNumber.activeForeground#3aa6d8
editorLineNumber.foreground#3e81a3
editorLink.activeForeground#4f82a8
editorMarkerNavigation.background#124154d9
editorOverviewRuler.border#124154
editorRuler.foreground#264453
editorStickyScroll.background#124154
editorStickyScrollHover.background#0ab2f517
editorSuggestWidget.background#124154ec
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#B8F2FF
editorSuggestWidget.selectedBackground#18475A
editorWarning.foreground#C3E88D70
editorWhitespace.foreground#41718acc
editorWidget.background#124154
editorWidget.resizeBorder#B8F2FF
extensionBadge.remoteBackground#0F6186
extensionBadge.remoteForeground#B8F2FF
extensionButton.background#0F6186fc
extensionButton.foreground#B8F2FF
extensionButton.hoverBackground#0F6186af
extensionButton.prominentBackground#0F6186
extensionButton.prominentForeground#B8F2FF
extensionButton.prominentHoverBackground#0F6186dd
extensionButton.separator#B8F2FF
extensionIcon.preReleaseForeground#B8F2FF
extensionIcon.sponsorForeground#B8F2FF
extensionIcon.starForeground#B8F2FF
extensionIcon.verifiedForeground#B8F2FF
focusBorder#3778aa65
gitDecoration.conflictingResourceForeground#ABB7F7d5
gitDecoration.deletedResourceForeground#FF537090
gitDecoration.ignoredResourceForeground#9c69dfd2
gitDecoration.modifiedResourceForeground#189bf1e0
gitDecoration.untrackedResourceForeground#31df7fc5
icon.foreground#3d93c8
input.background#205164
input.border#18475A
input.foreground#88b9df
input.placeholderForeground#639ca3
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#124154
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#18475A
list.activeSelectionForeground#B8F2FF
list.focusBackground#a6d4f720
list.focusForeground#a6d4f7
list.highlightForeground#B8F2FF
list.hoverBackground#285a6e
list.hoverForeground#daf5fa
list.inactiveSelectionBackground#01131a30
list.inactiveSelectionForeground#70b3be
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#124154
menu.foreground#a6d4f7
menu.selectionBackground#2d6881bb
menu.selectionBorder#2d6881bb
menu.selectionForeground#B8F2FF
menu.separatorBackground#a8d5f7
menubar.selectionBackground#2d6881bb
menubar.selectionBorder#124154
menubar.selectionForeground#B8F2FF
minimap.background#124154ad
notificationLink.foreground#B8F2FF
notifications.background#124154
notifications.foreground#B8F2FF
panel.background#124154
panel.border#124154
panelTitle.activeBorder#36bad4
panelTitle.activeForeground#B8F2FF
panelTitle.inactiveForeground#7ab3ce
peekView.border#124154
peekViewEditor.background#18475A
peekViewEditor.matchHighlightBackground#076da836
peekViewEditor.matchHighlightBorder#0778a8a4
peekViewEditorGutter.background#124154de
peekViewResult.background#124154d9
peekViewResult.matchHighlightBackground#41718a9b
peekViewResult.selectionBackground#41718a9b
peekViewTitle.background#124154
peekViewTitleDescription.foreground#B8F2FF
pickerGroup.foreground#B8F2FF
progressBar.background#B8F2FF
sash.hoverBorder#42a0ab
scrollbar.shadow#143542
scrollbarSlider.activeBackground#18374779
scrollbarSlider.background#1a3b4752
scrollbarSlider.hoverBackground#1c404dab
selection.background#41718a9b
settings.checkboxBackground#124154
settings.checkboxForeground#a6d4f7
settings.dropdownBackground#124154
settings.dropdownForeground#a6d4f7
settings.headerForeground#B8F2FF
settings.modifiedItemIndicator#B8F2FF
settings.numberInputBackground#124154
settings.numberInputForeground#a6d4f7
settings.textInputBackground#124154
settings.textInputForeground#a6d4f7
sideBar.background#124154
sideBar.border#124154
sideBar.foreground#68afd0
sideBarSectionHeader.background#124154
sideBarSectionHeader.border#4c93b4
sideBarSectionHeader.foreground#35aacd
sideBarTitle.foreground#afd6f3
statusBar.background#124154
statusBar.border#124154
statusBar.debuggingBackground#35748e
statusBar.debuggingForeground#d4e6f5
statusBar.foreground#7ab3ce
statusBar.noFolderBackground#124154
statusBarItem.hoverBackground#124154
tab.activeBackground#18475A
tab.activeBorder#124154
tab.activeBorderTop#124154
tab.activeForeground#B8F2FF
tab.activeModifiedBorder#4c93b4
tab.border#124154
tab.hoverBorder#37738f
tab.inactiveBackground#124154
tab.inactiveForeground#7ab3ce
tab.unfocusedActiveBorder#4c93b4
tab.unfocusedActiveForeground#a6d4f7
terminal.ansiBlack#6c87a8
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#5791b2
terminal.ansiBrightBlue#3f76ed
terminal.ansiBrightCyan#59caf7
terminal.ansiBrightGreen#42cd2d
terminal.ansiBrightMagenta#9b36df
terminal.ansiBrightRed#df2040
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#eaf517
terminal.ansiCyan#55b9e1
terminal.ansiGreen#a1df45
terminal.ansiMagenta#b66ee6
terminal.ansiRed#ee405d
terminal.ansiWhite#eee6e6
terminal.ansiYellow#eee151
textLink.activeForeground#a6d4f7
textLink.foreground#B8F2FF
titleBar.activeBackground#124154
titleBar.activeForeground#9cc2df
titleBar.border#12415460
titleBar.inactiveBackground#124154
titleBar.inactiveForeground#7fa2b3
tree.indentGuidesStroke#224c5c
widget.shadow#00000030
window.activeBorder#124154
window.inactiveBorder#3d93c8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#7895a1	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#a5ddf1	bold
constant.other.php, variable.other.constant	#8497ff
constant.language, support.constant, constant.other.color	#88afee	bold
invalid, invalid.illegal	#fcafbc	—
invalid.deprecated	#f86898	—
keyword	#71bbfc	—
storage.type	#d699ff	—
storage.modifier	#b3f6b3	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#6cd6a5	—
punctuation.definition.variable.php, punctuation.definition.variable.less	#a0aeff	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#5cbdf5	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#9aacff	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#7889e6	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#7aace6	—
entity.name.function	#64e3ff	bold
source.cpp meta.block variable.other	#a2d2e3	—
support.other.variable, string.other.link	#a1d5e9	—
constant.numeric, constant.escape, keyword.other.unit	#6edcf1	—
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	#93edf3	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#c5ceff	—
support.class	#a7b4ff	bold
support.type	#67a1ff	—
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	#abe6c9	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#73b0ff	—
variable.language	#88abfd	italic
entity.name.method.js	#81a9ff	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#b1bdff	italic
entity.other.attribute-name.class	#4fc8f8	—
source.sass keyword.control, entity.other.attribute-name.id	#64a2ff	—
markup.inserted	#95f3b1	—
markup.deleted	#ff9da6	—
markup.changed	#d097f6	—
string.regexp	#9baaff	—
constant.character.escape	#47b8ff	—
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	#82c3fc	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#c67bf8	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#d39ef6	—
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	#dfbbf8	—
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	#7bbfff	—
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	#9fcef7	—
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	#8a9ffb	—
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	#cd96f1	—
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	#c67bf8	—
text.html.markdown, punctuation.definition.list_item.markdown	#a6d4f7	—
text.html.markdown markup.inline.raw.markdown	#d199f6	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#c1dcf1	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#849bff	—
markup.italic	#93d9ff	italic
markup.bold, markup.bold string	#71a3ff	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	#f371ff	bold
markup.underline	#cfaaff	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#b0c9dd	—
markup.quote	#5aafef	italic
string.other.link.title.markdown	#8aafff	—
string.other.link.description.title.markdown	#d299f8	—
constant.other.reference.link.markdown	#afbbff	—
markup.raw.block	#d098f6	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#aadaff90	—
variable.language.fenced.markdown	#aac3d6	—
meta.separator	#b5cee2	bold
markup.table	#9acdf4	—

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