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 (Midnight)

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#102740d0
activityBar.activeBorder#0d77be
activityBar.background#0C2037
activityBar.border#0C2037
activityBar.foreground#0d77be
activityBar.inactiveForeground#274463
activityBarBadge.background#1b4066
activityBarBadge.foreground#abcff3
badge.background#1b4066
badge.foreground#abcff3
breadcrumb.activeSelectionForeground#66c0e0
breadcrumb.background#0C2037
breadcrumb.focusForeground#348ed3
breadcrumb.foreground#76abc2
breadcrumbPicker.background#091a2e
button.background#103459
button.foreground#abcff3
button.hoverBackground#0e2e4d
contrastActiveBorder#102740
contrastBorder#102740
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#0C2037
diffEditor.insertedTextBackground#8ef85d25
diffEditor.removedTextBackground#fa4f6b21
dropdown.background#051424
dropdown.border#102740
editor.background#102740
editor.findMatchBackground#c1c2960a
editor.findMatchBorder#1b1d1fc9
editor.findMatchHighlightBackground#233c5742
editor.findMatchHighlightBorder#2a59922f
editor.foldBackground#0608276b
editor.foreground#99a7b1
editor.lineHighlightBackground#0C2037a8
editor.lineHighlightBorder#06243f67
editor.selectionBackground#073355a2
editor.selectionHighlightBackground#67769636
editor.snippetFinalTabstopHighlightBackground#10274036
editor.snippetFinalTabstopHighlightBorder#13345e
editor.snippetTabstopHighlightBackground#10274036
editor.snippetTabstopHighlightBorder#174174cc
editor.wordHighlightBackground#16344B63
editor.wordHighlightBorder#2a59928f
editor.wordHighlightStrongBackground#2a599263
editor.wordHighlightStrongBorder#2a59927a
editorBracketMatch.background#0C2037
editorBracketMatch.border#677696
editorCursor.foreground#FFCC00
editorError.foreground#FF5370
editorGroup.border#252575
editorGroupHeader.tabsBackground#0C2037
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee60
editorHoverWidget.background#0C2037
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#1d426e
editorIndentGuide.background1#102740
editorLineNumber.activeForeground#0070A3
editorLineNumber.foreground#004368
editorLink.activeForeground#b9d9f1
editorMarkerNavigation.background#0C2037
editorOverviewRuler.border#274463
editorRuler.foreground#29404b
editorStickyScroll.background#0C2037
editorStickyScrollHover.background#102740
editorSuggestWidget.background#0C2037
editorSuggestWidget.border#FFFFFF
editorSuggestWidget.foreground#F0F8FE
editorSuggestWidget.highlightForeground#80CBC4
editorSuggestWidget.selectedBackground#061424
editorWarning.foreground#C3E88D
editorWhitespace.foreground#253f57da
editorWidget.background#0C2037
editorWidget.resizeBorder#80CBC4
extensionBadge.remoteBackground#103459
extensionBadge.remoteForeground#abcff3
extensionButton.background#103459fc
extensionButton.foreground#abcff3
extensionButton.hoverBackground#103459af
extensionButton.prominentBackground#133f6c
extensionButton.prominentForeground#abcff3
extensionButton.prominentHoverBackground#0e2e4d
extensionButton.separator#0d77be
extensionIcon.preReleaseForeground#0d77be
extensionIcon.sponsorForeground#0d77be
extensionIcon.starForeground#0d77be
extensionIcon.verifiedForeground#0d77be
focusBorder#102740
gitDecoration.conflictingResourceForeground#FFCB6Bc0
gitDecoration.deletedResourceForeground#FF5370c0
gitDecoration.ignoredResourceForeground#603877
gitDecoration.modifiedResourceForeground#4e81eeec
gitDecoration.untrackedResourceForeground#84b83bc0
icon.foreground#0d77be
input.background#081829
input.border#0c2542
input.foreground#78a8cd
input.placeholderForeground#384e72
inputValidation.errorBorder#FF5370
inputValidation.infoBorder#82AAFF
inputValidation.warningBackground#07192d
inputValidation.warningBorder#677696
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#102740
list.activeSelectionForeground#80CBC4
list.focusBackground#102740
list.focusForeground#81b8e2
list.highlightForeground#80CBC4
list.hoverBackground#102740
list.hoverForeground#f0eeee
list.inactiveSelectionBackground#102740
list.inactiveSelectionForeground#80CBC4
listFilterWidget.background#1719358c
listFilterWidget.noMatchesOutline#1719358c
listFilterWidget.outline#1719358c
menu.background#0C2037
menu.foreground#a9d3f3
menu.selectionBackground#113258b6
menu.selectionBorder#091b30
menu.selectionForeground#80CBC4
menu.separatorBackground#4392cf
menubar.selectionBackground#113258b6
menubar.selectionBorder#081a2e
menubar.selectionForeground#80CBC4
minimap.background#0C2037
notificationLink.foreground#80CBC4
notifications.background#0C2037
notifications.foreground#F0F8FE
panel.background#0C2037
panel.border#0C2037
panelTitle.activeBorder#072c28
panelTitle.activeForeground#84afd6
panelTitle.inactiveForeground#2c628d
peekView.border#0C2037
peekViewEditor.background#0C2037
peekViewEditor.matchHighlightBackground#1b496e48
peekViewEditor.matchHighlightBorder#2a59924b
peekViewEditorGutter.background#0C2037
peekViewResult.background#0C2037
peekViewResult.matchHighlightBackground#1a3f6dd8
peekViewResult.selectionBackground#607a86
peekViewTitle.background#0C2037
peekViewTitleDescription.foreground#aed2ee
pickerGroup.foreground#a3f1e9
progressBar.background#102740
quickInput.background#051424
sash.hoverBorder#0d5594
scrollbar.shadow#07182d
scrollbarSlider.activeBackground#0F3050ce
scrollbarSlider.background#0F3050a2
scrollbarSlider.hoverBackground#0F3050da
selection.background#16344Ba2
settings.checkboxBackground#07192d
settings.checkboxForeground#2f8bd1
settings.dropdownBackground#07192d
settings.dropdownForeground#afd6f5
settings.headerForeground#80CBC4
settings.modifiedItemIndicator#80CBC4
settings.numberInputBackground#07192d
settings.numberInputForeground#a9d1f0
settings.textInputBackground#07192d
settings.textInputForeground#97caf1
sideBar.background#0C2037
sideBar.border#102740
sideBar.foreground#7c929c
sideBarSectionHeader.background#102740
sideBarSectionHeader.border#102740
sideBarSectionHeader.foreground#5791bd
sideBarTitle.foreground#5791bd
statusBar.background#0C2037
statusBar.border#0C2037
statusBar.debuggingBackground#11365b
statusBar.debuggingForeground#ffffff
statusBar.foreground#748ba3
statusBar.noFolderBackground#02151f
statusBarItem.hoverBackground#102740
tab.activeBackground#102740
tab.activeBorder#102740
tab.activeForeground#7ea6d1
tab.activeModifiedBorder#0d6b97
tab.border#102740
tab.inactiveBackground#0C2037
tab.inactiveForeground#3b628b
tab.unfocusedActiveBorder#546E7A
tab.unfocusedActiveForeground#3b628b
terminal.ansiBlack#5f6d7f
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#49616c
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#F0F8FE
textLink.foreground#4b7fb6
titleBar.activeBackground#102740
titleBar.activeForeground#bbd2e4
titleBar.border#102740
titleBar.inactiveBackground#0C2037
titleBar.inactiveForeground#607a86
tree.indentGuidesStroke#1719358c
widget.shadow#07182d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#6f7c8b	italic
variable, string constant.other.placeholder	#79BBD3	bold
constant.other.php, variable.other.constant	#97c179
constant.language, support.constant, constant.other.color	#5AD982	bold
variable.language	#B8A7F1	italic
invalid, invalid.illegal	#F599A8	—
invalid.deprecated	#C792EA	—
keyword	#72C8F7	—
storage.type	#AAE99A	—
storage.modifier	#72E66E	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#6FD2A7	—
punctuation.definition.variable.php	#2AAFFF	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#94B2F7	bold
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	#7CC983	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#9ED99B	—
meta.function-call, variable.function, support.function, keyword.other.special-method	#98ADFF	—
entity.name.function	#27CBEF	bold
source.cpp meta.block variable.other	#79BBD3	—
support.other.variable, string.other.link	#79BBD3	—
constant.numeric, constant.character, constant.escape, keyword.other.unit, keyword.other	#51C9DF	—
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	#7BC5C3	—
entity.name, support.other.namespace.use.php, markup.changed.git_gutter, support.type.sys-types	#43cece	bold
support.namespace.php, meta.use.php	#70c299	bold
support.type, support.class	#45D0AD	—
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	#7acec1	—
entity.other.attribute-name	#B4DB9A	italic
entity.other.attribute-name.class	#76DBC4	—
source.sass keyword.control, entity.other.attribute-name.id	#64BBFF	—
markup.inserted	#CAE89F	—
markup.deleted	#FF94A6	—
markup.changed	#DBA5FF	—
string.regexp	#4ECAFB	—
constant.character.escape	#9FC1FF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82c3ffe8	italic
source.js constant.other.object.key.js string.unquoted.label.js	#dc556bd2	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	#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	#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	#9db0be	—
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	#b7de7d	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f071a8	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	#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	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#F0F8FE	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#F0F8FE	—

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