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

G Dark (Valhalla)

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

G Dark-Themes — G Dark (Valhalla)

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#292f46
activityBar.activeBorder#1c7ebb
activityBar.background#202537
activityBar.border#292f46
activityBar.foreground#1c7ebb
activityBar.inactiveForeground#6085ac
activityBarBadge.background#49527b
activityBarBadge.foreground#acdff7
badge.background#49527b
badge.foreground#acdff7
breadcrumb.activeSelectionForeground#8DC4FF
breadcrumb.background#22273a
breadcrumb.focusForeground#9eccf0
breadcrumb.foreground#69a2d3
breadcrumbPicker.background#22273a
button.background#3e4668fc
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#292f46
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#292f46
dropdown.border#FFFFFF10
editor.background#292f46
editor.findMatchBackground#1a24276e
editor.findMatchBorder#46527e98
editor.findMatchHighlightBackground#20253742
editor.findMatchHighlightBorder#48527ab4
editor.foreground#c4d2e0
editor.hoverHighlightBackground#2025375b
editor.lineHighlightBackground#20253750
editor.selectionBackground#729ECE20
editor.selectionHighlightBackground#20253760
editor.snippetFinalTabstopHighlightBackground#202537
editor.snippetFinalTabstopHighlightBorder#202537
editor.snippetTabstopHighlightBackground#292f4636
editor.snippetTabstopHighlightBorder#202537b9
editor.wordHighlightBackground#ce080800
editor.wordHighlightBorder#4e59835e
editor.wordHighlightStrongBackground#48537a57
editor.wordHighlightStrongBorder#5b6899a6
editorBracketMatch.background#292f46
editorBracketMatch.border#67769660
editorCursor.foreground#f1e506
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#202537
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#272d41
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#4c5881
editorIndentGuide.background1#292f46
editorLineNumber.activeForeground#6cabee
editorLineNumber.foreground#6085ac
editorLink.activeForeground#CDEAFF
editorMarkerNavigation.background#23283a62
editorOverviewRuler.border#292f46
editorRuler.foreground#37474F
editorStickyScroll.background#22273a
editorStickyScrollHover.background#292f46
editorSuggestWidget.background#272d41
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#8DC4FF
editorSuggestWidget.selectedBackground#1f233362
editorWarning.foreground#C3E88D70
editorWhitespace.foreground#434649e0
editorWidget.background#292f46
editorWidget.resizeBorder#8DC4FF
extensionBadge.remoteBackground#3e4668
extensionBadge.remoteForeground#acdff7
extensionButton.background#3e4668fc
extensionButton.foreground#acdff7
extensionButton.hoverBackground#3e4668af
extensionButton.prominentBackground#4b547efc
extensionButton.prominentForeground#acdff7
extensionButton.prominentHoverBackground#475077
extensionButton.separator#8DC4FF
extensionIcon.preReleaseForeground#8DC4FF
extensionIcon.sponsorForeground#8DC4FF
extensionIcon.starForeground#8DC4FF
extensionIcon.verifiedForeground#8DC4FF
focusBorder#292f46
gitDecoration.conflictingResourceForeground#FFE1AB
gitDecoration.deletedResourceForeground#FFA4B3
gitDecoration.ignoredResourceForeground#D0AEFD
gitDecoration.modifiedResourceForeground#7BDAFF
gitDecoration.untrackedResourceForeground#A4FFCD
icon.foreground#1c7ebb
input.background#23283a
input.border#292f46
input.foreground#81b0d4
input.placeholderForeground#CDEAFF60
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#292f46
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#292f46
list.activeSelectionForeground#8DC4FF
list.focusBackground#202537
list.focusForeground#CDEAFF
list.highlightForeground#8DC4FF
list.hoverBackground#252a3f
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#292f46
list.inactiveSelectionForeground#8DC4FF
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#292f46
menu.foreground#CDEAFF
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#8DC4FF
menu.separatorBackground#a8d5f7
menubar.selectionBackground#607a8670
menubar.selectionBorder#00000030
menubar.selectionForeground#8DC4FF
minimap.background#212636
notificationLink.foreground#8DC4FF
notifications.background#242a3e
notifications.foreground#8DC4FF
panel.background#202537
panel.border#292f4660
panelTitle.activeBorder#8DC4FF
panelTitle.activeForeground#a2daf7
panelTitle.inactiveForeground#4782af
peekView.border#262b3f
peekViewEditor.background#23283a62
peekViewEditor.matchHighlightBackground#8dc4ff17
peekViewEditor.matchHighlightBorder#545f8bd0
peekViewEditorGutter.background#23283a62
peekViewResult.background#23283a62
peekViewResult.matchHighlightBackground#8DC4FF20
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#23283a62
peekViewTitleDescription.foreground#CDEAFF60
pickerGroup.foreground#8DC4FF
progressBar.background#8DC4FF
quickInput.background#23283a
sash.hoverBorder#333e67
scrollbar.shadow#202537
scrollbarSlider.activeBackground#24426e79
scrollbarSlider.background#1014203a
scrollbarSlider.hoverBackground#7b8acc2c
selection.background#729ECE4a
settings.checkboxBackground#23283a
settings.checkboxForeground#CDEAFF
settings.dropdownBackground#23283a
settings.dropdownForeground#CDEAFF
settings.headerForeground#8DC4FF
settings.modifiedItemIndicator#8DC4FF
settings.numberInputBackground#23283a
settings.numberInputForeground#CDEAFF
settings.textInputBackground#23283a
settings.textInputForeground#CDEAFF
sideBar.background#202537
sideBar.border#292f46
sideBar.foreground#9AB3FF
sideBarSectionHeader.background#292f46
sideBarSectionHeader.border#292f46
sideBarSectionHeader.foreground#afd6f3
sideBarTitle.foreground#afd6f3
statusBar.background#202537
statusBar.border#292f46
statusBar.debuggingBackground#485488
statusBar.debuggingForeground#d0e5f8
statusBar.foreground#728eac
statusBar.noFolderBackground#292f46
statusBarItem.hoverBackground#8DC4FF20
tab.activeBorder#292f46
tab.activeBorderTop#292f46
tab.activeForeground#8DC4FF
tab.activeModifiedBorder#607a86
tab.border#292f46
tab.hoverBorder#292f46
tab.inactiveBackground#202537
tab.inactiveForeground#6085ac
tab.unfocusedActiveBorder#546E7A
tab.unfocusedActiveForeground#CDEAFF
terminal.ansiBlack#708095
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#59737f
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#CDEAFF
textLink.foreground#8DC4FF
titleBar.activeBackground#292f46
titleBar.activeForeground#9cc2df
titleBar.border#292f46
titleBar.inactiveBackground#202537
titleBar.inactiveForeground#7fa2b3
tree.indentGuidesStroke#1f4e6b90
widget.shadow#1e2233c2
window.activeBorder#292f46
window.inactiveBorder#3d93c8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#7f8290	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#A5CDD8	bold
constant.other.php, variable.other.constant	#a7d251
constant.language, support.constant, constant.other.color	#e1cc98	bold
invalid, invalid.illegal	#FFA6B5	—
invalid.deprecated	#DEACFF	—
keyword	#FF97C4	—
storage.type	#FFA5A5	—
storage.modifier	#DBABFB	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#96ceb4	—
punctuation.definition.variable.php, punctuation.definition.variable.less	#FF9EA6	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#FF99AA	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#FF9292	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#ff74ca	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#90C1FF	—
entity.name.function	#5FD1FF	bold
source.cpp meta.block variable.other	#8AC8DA	—
support.other.variable, string.other.link	#8AC8DA	—
constant.numeric, constant.escape, keyword.other.unit	#EDC48C	—
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	#88d8bd	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ECC885	—
support.class	#f5ba68	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	#ffce74	italic
entity.other.attribute-name.class	#b8e96a	—
source.sass keyword.control, entity.other.attribute-name.id	#63C9FB	—
markup.inserted	#C3E88D	—
markup.deleted	#FFA5B4	—
markup.changed	#DDA9FF	—
string.regexp	#FFA973	—
constant.character.escape	#20d5e2	—
url, link, uri	—	italic underline
variable.language	#FF9DE7	italic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#9EBDFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FFA5B4	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#DEACFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
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	#FFA88E	—
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	#FFA8B7	—
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	#FFA694	—
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	#9EBDFF	—
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	#FFA5AA	—
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	#DDA9FF	—
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	#CDEAFF	—
text.html.markdown markup.inline.raw.markdown	#DEACFF	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#AFC7DA	—
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	#FFA7AB	italic
markup.bold, markup.bold string	#FFA7AB	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	#FFA7AB	bold
markup.underline	#FFA78D	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#B0C9DC	—
markup.quote	—	italic
string.other.link.title.markdown	#A2C0FF	—
string.other.link.description.title.markdown	#DEACFF	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#DEACFF	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#CDEAFF90	—
variable.language.fenced.markdown	#A9C0D2	—
meta.separator	#A9C0D2	bold
markup.table	#CDEAFF	—

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