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-one-love (Black Pearl)

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...

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#07161b
activityBar.activeBorder#1381b4
activityBar.background#081A20
activityBar.border#081A20
activityBar.foreground#25699d
activityBarBadge.background#144b50
activityBarBadge.foreground#c7ebf6
badge.background#144b50
badge.foreground#c7ebf6
breadcrumb.activeSelectionForeground#a2d1f5
breadcrumb.background#07161b
breadcrumb.focusForeground#9eccf0
breadcrumb.foreground#4796b1
breadcrumbPicker.background#0a1d24
button.background#0e383b
button.foreground#cbeeed
button.hoverBackground#144b50
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#081A20
descriptionForeground#30B0E2
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#081A20
dropdown.border#FFFFFF10
dropdown.foreground#c2ecf5
editor.background#081A20
editor.findMatchBackground#2f5d6b10
editor.findMatchBorder#2780a3be
editor.findMatchHighlightBackground#2d586623
editor.findMatchHighlightBorder#2d58665e
editor.findRangeHighlightBackground#2d58668f
editor.foldBackground#252d382a
editor.foreground#cedbdbd8
editor.hoverHighlightBackground#3457554d
editor.lineHighlightBackground#08171dd3
editor.lineHighlightBorder#121d1a67
editor.selectionBackground#293F41a2
editor.selectionHighlightBackground#293F412d
editor.snippetFinalTabstopHighlightBackground#00324836
editor.snippetFinalTabstopHighlightBorder#07161b
editor.snippetTabstopHighlightBackground#00324836
editor.snippetTabstopHighlightBorder#07161b
editor.wordHighlightBackground#00000000
editor.wordHighlightBorder#414b5cf6
editor.wordHighlightStrongBackground#2d586650
editor.wordHighlightStrongBorder#2d5866c2
editorBracketMatch.background#3d3f4b
editorBracketMatch.border#67769660
editorCursor.foreground#f70fb9
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#07161b
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#0a1d24
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#2b3749d8
editorIndentGuide.background1#081A20
editorLineNumber.activeForeground#43738a
editorLineNumber.foreground#283b45
editorLink.activeForeground#4FB5D7
editorMarkerNavigation.background#0a1d24
editorOverviewRuler.border#081A20
editorRuler.foreground#37474F
editorStickyScroll.background#07161b
editorStickyScrollHover.background#081A20
editorSuggestWidget.background#0a1d24
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#a2d1f5
editorSuggestWidget.selectedBackground#09191f
editorWarning.foreground#20462a70
editorWhitespace.foreground#5d697040
editorWidget.background#081A20
editorWidget.resizeBorder#a2d1f5
extensionBadge.remoteBackground#0e383b
extensionBadge.remoteForeground#cbeeed
extensionButton.background#0e383b
extensionButton.foreground#cbeeed
extensionButton.hoverBackground#0e383baf
extensionButton.prominentBackground#134c50
extensionButton.prominentForeground#cbeeed
extensionButton.prominentHoverBackground#144b50af
extensionButton.separator#83d5e4
extensionIcon.preReleaseForeground#83d5e4
extensionIcon.sponsorForeground#83d5e4
extensionIcon.starForeground#83d5e4
extensionIcon.verifiedForeground#83d5e4
focusBorder#2330427c
gitDecoration.conflictingResourceForeground#FFE1A6
gitDecoration.deletedResourceForeground#FF90A2
gitDecoration.ignoredResourceForeground#D392FF
gitDecoration.modifiedResourceForeground#42B1FF
gitDecoration.untrackedResourceForeground#91DF84
icon.foreground#4e808b
input.background#081A20
input.border#081A20
input.foreground#81b0d4
input.placeholderForeground#314f58
inputOption.activeBorder#15161b
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#1c081a
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#081A20
list.activeSelectionForeground#c2ecf5
list.dropBackground#1c1c20
list.focusBackground#4FB5D720
list.focusForeground#4FB5D7
list.highlightForeground#85e5db
list.hoverBackground#0a1e25
list.hoverForeground#92bce0
list.inactiveSelectionBackground#081A20
list.inactiveSelectionForeground#abece6
listFilterWidget.background#4FB5D705
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#081A20
menu.foreground#2a738b
menu.selectionBackground#4FB5D705
menu.selectionBorder#4FB5D705
menu.selectionForeground#a2d1f5
menu.separatorBackground#a8d5f7
menubar.selectionBackground#607a8670
menubar.selectionBorder#4FB5D705
menubar.selectionForeground#a2d1f5
minimap.background#07161b
notificationLink.foreground#a2d1f5
notifications.background#081A20
notifications.foreground#95dcf3
panel.background#081A20
panel.border#242d4760
panelTitle.activeBorder#1d283b
panelTitle.activeForeground#a2daf7
panelTitle.inactiveForeground#3f6a8b
peekView.border#0e2931
peekViewEditor.background#0a1d24
peekViewEditor.matchHighlightBackground#a2d1f512
peekViewEditor.matchHighlightBorder#2d5866c2
peekViewEditorGutter.background#0a1d24
peekViewResult.background#0a1d24
peekViewResult.matchHighlightBackground#a2d1f520
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#0a1d24
peekViewTitleDescription.foreground#4FB5D760
pickerGroup.foreground#80cfdd
progressBar.background#272b3b
quickInput.background#081A20
quickInput.foreground#4e808b
sash.hoverBorder#144b50
scrollbar.shadow#051116
scrollbarSlider.activeBackground#14282cb9
scrollbarSlider.background#13252796
scrollbarSlider.hoverBackground#18343891
selection.background#293F4162
settings.checkboxBackground#081A20
settings.checkboxForeground#8bb8db
settings.dropdownBackground#081A20
settings.dropdownForeground#4FB5D7
settings.headerForeground#3d7f97
settings.modifiedItemIndicator#a2d1f5
settings.numberInputBackground#081A20
settings.numberInputForeground#4FB5D7
settings.textInputBackground#081A20
settings.textInputForeground#4FB5D7
sideBar.background#07161b
sideBar.border#081A20
sideBar.foreground#4e808b
sideBarSectionHeader.background#081A20
sideBarSectionHeader.border#081A20
sideBarSectionHeader.foreground#71afbd
sideBarTitle.foreground#71afbd
statusBar.background#07161b
statusBar.border#081A20
statusBar.debuggingBackground#23535e
statusBar.debuggingForeground#c9e2f7
statusBar.foreground#5d737c
statusBar.noFolderBackground#081A20
statusBarItem.hoverBackground#546E7A20
tab.activeBackground#081A20
tab.activeBorder#186594
tab.activeForeground#abd1da
tab.activeModifiedBorder#607a86
tab.border#081A2000
tab.hoverBorder#081A20
tab.inactiveBackground#07161b
tab.inactiveForeground#4b6470ea
tab.unfocusedActiveBorder#546E7A
tab.unfocusedActiveForeground#4FB5D7
terminal.ansiBlack#5d6b7d
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#425a65
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#4FB5D7
textLink.foreground#a2d1f5
titleBar.activeBackground#081A20
titleBar.activeForeground#4FB5D7
titleBar.border#081A2060
titleBar.inactiveBackground#0c2028
titleBar.inactiveForeground#607a86
tree.indentGuidesStroke#19364790
widget.shadow#051116

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#6b7679	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#AEB89C	bold
constant.other.php, variable.other.constant	#e9983b
constant.language, support.constant, constant.other.color	#E6A26B	bold
variable.language	#75CB75	italic
invalid, invalid.illegal	#FF788F	—
invalid.deprecated	#C792EA	—
keyword	#FF8C78	—
storage.type	#e3d44d	—
storage.modifier	#80d850	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#EB92FF	—
punctuation.definition.variable.php	#57C7B8	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#DC83FF	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#FF7D7D	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#FF799C	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#31C1E4	—
entity.name.function	#FF7DAF
source.cpp meta.block variable.other	#BCC7A8	—
support.other.variable, string.other.link	#BCC7A8	—
constant.numeric, constant.escape, keyword.other.unit	#f1aa62	—
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	#7DCEAC	—
entity.name, support.type, markup.changed.git_gutter, support.type.sys-types	#ffcb6bf3	—
support.other.namespace.php	#5DBDC3	—
entity.name, support.other.namespace.use.php, meta.use.php	#FF7E7E	—
support.class	#2edccd	bold
support.type	#FF6EDB	—
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	#3cda93	—
entity.other.attribute-name	#F5DE8B	italic
entity.other.attribute-name.class	#BEDC83	—
source.sass keyword.control, entity.other.attribute-name.id	#86C7FF	—
markup.inserted	#7aca04	—
markup.deleted	#F48598	—
markup.changed	#AD96FF	—
string.regexp	#FF7A7A	—
constant.character.escape	#FF82EE	—
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	#FF8398	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	#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	#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	#FF7D93	—
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	#F09D8B	—
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	#FF858C	—
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	#50B8DA	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#97ABBC	—
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	#FF858C	italic
markup.bold, markup.bold string	#FF858C	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	#FF858C	bold
markup.underline	#F78C6C	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#A3B9CB	—
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	#4FB5D7	—
variable.language.fenced.markdown	#99AEBF	—
meta.separator	#99AEBF	bold
markup.table	#4EB4D6	—

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