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 (Jacksons Purple)

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#2a3670
activityBar.activeBorder#8599f1
activityBar.background#2a3670
activityBar.border#2a3670
activityBar.foreground#8599f1
activityBar.inactiveForeground#5d6bad
activityBarBadge.background#5e75db
activityBarBadge.foreground#f4eded
badge.background#5e75db
badge.foreground#f4eded
breadcrumb.activeSelectionForeground#8599f1
breadcrumb.background#2a3670
breadcrumb.focusForeground#9eccf0
breadcrumb.foreground#8599f1
breadcrumbPicker.background#384585
button.background#5e75db
button.hoverBackground#4b5caaf0
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#2a3670
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#2a3670
dropdown.border#2a36705b
editor.background#2A3A71
editor.findMatchBackground#28336186
editor.findMatchBorder#5968b4c7
editor.findMatchHighlightBackground#465c8d42
editor.findMatchHighlightBorder#5867b3e5
editor.foreground#c2d1da
editor.hoverHighlightBackground#425097be
editor.lineHighlightBackground#1e264b50
editor.selectionBackground#203276a2
editor.selectionHighlightBackground#323e8a8e
editor.snippetFinalTabstopHighlightBackground#20284b36
editor.snippetFinalTabstopHighlightBorder#5968aa
editor.snippetTabstopHighlightBackground#20284b36
editor.snippetTabstopHighlightBorder#5968aa
editor.wordHighlightBackground#333d72bb
editor.wordHighlightBorder#5f75e679
editor.wordHighlightStrongBackground#232c5767
editor.wordHighlightStrongBorder#5f75e679
editorBracketMatch.background#2a3670
editorBracketMatch.border#67769660
editorCursor.foreground#f1e506
editorError.foreground#FF537070
editorGroup.border#2b3547a1
editorGroupHeader.tabsBackground#2a3670
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee60
editorHoverWidget.background#34407b
editorHoverWidget.border#6f8dc517
editorIndentGuide.activeBackground1#526a97a9
editorIndentGuide.background1#2A3A71
editorLineNumber.activeForeground#8C9FFF
editorLineNumber.foreground#606fbd
editorLink.activeForeground#8599f1
editorMarkerNavigation.background#2e3b79a1
editorOverviewRuler.border#2a3670
editorRuler.foreground#2a3670
editorStickyScroll.background#2a3670
editorStickyScrollHover.background#2A3A71
editorSuggestWidget.background#35417e
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#8599f1
editorSuggestWidget.selectedBackground#323d74
editorWarning.foreground#C3E88D70
editorWhitespace.foreground#5d73947a
editorWidget.background#2a3670
editorWidget.resizeBorder#2a3670
extensionBadge.remoteBackground#5e75db
extensionBadge.remoteForeground#98c6db
extensionButton.background#5e75db90
extensionButton.foreground#98c6db
extensionButton.hoverBackground#5e75dbaf
extensionButton.prominentBackground#536ee890
extensionButton.prominentForeground#98c6db
extensionButton.prominentHoverBackground#4b5caa90
extensionButton.separator#788ce4
extensionIcon.preReleaseForeground#788ce4
extensionIcon.sponsorForeground#788ce4
extensionIcon.starForeground#788ce4
extensionIcon.verifiedForeground#788ce4
focusBorder#4150999a
gitDecoration.conflictingResourceForeground#ffcb6bd5
gitDecoration.deletedResourceForeground#FF537090
gitDecoration.ignoredResourceForeground#9c69dfd2
gitDecoration.modifiedResourceForeground#189bf1e0
gitDecoration.untrackedResourceForeground#31df7fc5
icon.foreground#96a8f7
input.background#2A3A71
input.border#384585
input.foreground#81b0d4
input.placeholderForeground#92a1e4
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#5968aa
inputValidation.warningBorder#67769660
inputValidation.warningForeground#0f1429
list.activeSelectionBackground#3a529f
list.activeSelectionForeground#a7b6f7
list.dropBackground#2a3670
list.focusBackground#2a3670
list.focusForeground#8599f1
list.highlightForeground#8599f1
list.hoverBackground#2e407c
list.hoverForeground#8599f1
list.inactiveSelectionBackground#424d91
list.inactiveSelectionForeground#cfd7ff
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#2a3670
menu.foreground#8599f1
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#8599f1
menu.separatorBackground#a8d5f7
menubar.selectionBackground#4c5b9cab
menubar.selectionBorder#00000030
menubar.selectionForeground#a8d5f7
minimap.background#2a3670e0
notificationLink.foreground#465288
notifications.background#2a3670
notifications.foreground#788ce4
panel.background#2a3670
panel.border#252b38d3
panelInput.border#8599f1
panelTitle.activeBorder#8599f1
panelTitle.activeForeground#a2daf7
panelTitle.inactiveForeground#6d7cbb
peekView.border#313e80
peekViewEditor.background#2e3b79a1
peekViewEditor.matchHighlightBackground#2b366920
peekViewEditor.matchHighlightBorder#4c5b9cab
peekViewEditorGutter.background#2e3b79a1
peekViewResult.background#2e3b79a1
peekViewResult.matchHighlightBackground#596abd65
peekViewResult.selectionBackground#8599f170
peekViewTitle.background#2e3b79a1
peekViewTitleDescription.foreground#a6b5fa
pickerGroup.foreground#2a3670
progressBar.background#8599f1
quickInput.background#2A3A71
sash.hoverBorder#3f47a7
scrollbar.shadow#2a3670
scrollbarSlider.activeBackground#2b325ec0
scrollbarSlider.background#4a5a8a79
scrollbarSlider.hoverBackground#394177c0
selection.background#768aeb79
settings.checkboxBackground#2A3A71
settings.checkboxForeground#8599f1
settings.dropdownBackground#2A3A71
settings.dropdownForeground#8599f1
settings.headerForeground#5a6aad
settings.modifiedItemIndicator#5a6aad
settings.numberInputBackground#2A3A71
settings.numberInputForeground#8599f1
settings.textInputBackground#2A3A71
settings.textInputForeground#8599f1
sideBar.background#2a3670
sideBar.border#2a3670
sideBar.foreground#96a4e2
sideBarSectionHeader.background#2a3670
sideBarSectionHeader.border#2A3A71
sideBarSectionHeader.foreground#afd6f3
sideBarTitle.foreground#afd6f3
statusBar.background#2a3670
statusBar.border#2a3670
statusBar.debuggingBackground#445bc2
statusBar.debuggingForeground#ffffff
statusBar.foreground#8599f1
statusBar.noFolderBackground#2a3670
statusBarItem.hoverBackground#546E7A20
tab.activeBackground#2a3670
tab.activeBorder#8599f1
tab.activeBorderTop#2a3670
tab.activeForeground#adbdf6
tab.activeModifiedBorder#1297da60
tab.border#2a3670
tab.inactiveBackground#2a3670
tab.inactiveForeground#6372b6
tab.unfocusedActiveBorder#546E7A
tab.unfocusedActiveForeground#8599f1
terminal.ansiBlack#6d7d93
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#6a828e
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#8599f1
textLink.foreground#8599f1
titleBar.activeBackground#2a3670
titleBar.activeForeground#9cc2df
titleBar.border#2a3670
titleBar.inactiveBackground#2a3670
titleBar.inactiveForeground#7fa2b3
tree.indentGuidesStroke#1f4e6b90
widget.shadow#2a3670
window.activeBorder#475388
window.inactiveBorder#282f4d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#808aad	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#b0caf0	bold
constant.other.php, variable.other.constant	#a7d251
constant.language, support.constant, constant.other.color	#d8bf90	bold
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
keyword	#ff9abd	—
storage.type	#ff7eb4	—
storage.modifier	#d99fff	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#96ceb4	—
punctuation.definition.variable.php, punctuation.definition.variable.less, punctuation.definition.variable.sass, punctuation.definition.variable.scss, punctuation.definition.variable.stylus	#ec93c4	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#fc889b	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#ff80a6	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#ff8ac4	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#b48fff	—
entity.name.function	#78bffd	bold
source.cpp meta.block variable.other	#bcbcbc	—
support.other.variable, string.other.link	#bcbcbc	—
constant.numeric, constant.escape, keyword.other.unit	#e0bb8a	—
variable.parameter.function.language.special, variable.parameter	#a1b8db	—
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	#8fe2d0	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#e6dda1	—
support.class	#fad48e	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	#f7d9a2	italic
entity.other.attribute-name.class	#c6ff6b	—
source.sass keyword.control, entity.other.attribute-name.id	#2eb7fb	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#fe53ca	—
constant.character.escape	#4d9aff	—
url, link, uri	—	italic underline
variable.language	#e77dcd	italic
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	#70a7f8	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#fad797	—
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	#f0719b	—
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	#C792EA	—
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	#8599f1	—
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	#C3E88D	—
markup.italic	#f0719b	italic
markup.bold, markup.bold string	#f0719b	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	#f0719b	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	#fad797	—
markup.raw.block	#C792EA	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#8599f190	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#8599f1	—

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