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-3 (Oxford 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#263137
activityBar.activeBorder#4c7c93
activityBar.background#232c32
activityBar.border#232c32
activityBar.foreground#40a0cc
activityBar.inactiveForeground#2f5872
activityBarBadge.background#306278
activityBarBadge.foreground#c7ebf6
badge.background#306278
badge.foreground#c7ebf6
breadcrumb.activeSelectionForeground#86cad6
breadcrumb.background#232c32
breadcrumb.focusForeground#9cc5e4
breadcrumb.foreground#66b9d4
breadcrumbPicker.background#252f35
button.background#345c6c
button.foreground#c7ebf6
button.hoverBackground#306278
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#232c32
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#212930
dropdown.border#212930
editor.background#263137
editor.findMatchBackground#1a24276e
editor.findMatchBorder#3c778f7a
editor.findMatchHighlightBackground#466a8d42
editor.findMatchHighlightBorder#339ec93b
editor.foreground#dcf2f7
editor.hoverHighlightBackground#336da02c
editor.lineHighlightBackground#151d2134
editor.selectionBackground#3570915d
editor.selectionHighlightBackground#407ba860
editor.snippetFinalTabstopHighlightBackground#295163
editor.snippetFinalTabstopHighlightBorder#2d525e
editor.snippetTabstopHighlightBackground#232c3236
editor.snippetTabstopHighlightBorder#264a55b9
editor.wordHighlightBackground#1886b117
editor.wordHighlightBorder#20799c5e
editor.wordHighlightStrongBackground#2e68b92d
editor.wordHighlightStrongBorder#1e6b8a77
editorBracketMatch.background#232c32
editorBracketMatch.border#67769660
editorCursor.foreground#f1e506
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#232c32
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee60
editorHoverWidget.background#262f35ea
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#374a57
editorIndentGuide.background1#263137
editorLineNumber.activeForeground#59A8C5
editorLineNumber.foreground#276379
editorLink.activeForeground#4f82a8
editorMarkerNavigation.background#232c32d9
editorOverviewRuler.border#232c32
editorRuler.foreground#264453
editorStickyScroll.background#232c32
editorStickyScrollHover.background#263137
editorSuggestWidget.background#232c32
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#7bcad8
editorSuggestWidget.selectedBackground#224c5c
editorWarning.foreground#C3E88D70
editorWhitespace.foreground#384e5ea9
editorWidget.background#232c32
editorWidget.resizeBorder#7bcad8
extensionBadge.remoteBackground#345c6c
extensionBadge.remoteForeground#c7ebf6
extensionButton.background#345c6c
extensionButton.foreground#c7ebf6
extensionButton.hoverBackground#306278
extensionButton.prominentBackground#345c6c
extensionButton.prominentForeground#c7ebf6
extensionButton.prominentHoverBackground#306278
extensionButton.separator#7bcad8
extensionIcon.preReleaseForeground#7bcad8
extensionIcon.sponsorForeground#7bcad8
extensionIcon.starForeground#7bcad8
extensionIcon.verifiedForeground#7bcad8
focusBorder#38678b65
gitDecoration.conflictingResourceForeground#f7f7abd5
gitDecoration.deletedResourceForeground#e74d6790
gitDecoration.ignoredResourceForeground#8f60ccbe
gitDecoration.modifiedResourceForeground#1888d3e0
gitDecoration.untrackedResourceForeground#2cc571c5
icon.foreground#558097
input.background#212930
input.border#212930
input.foreground#93c2e5
input.placeholderForeground#648ca9
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#232c32
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#263137
list.activeSelectionForeground#7bcad8
list.focusBackground#a6d4f720
list.focusForeground#a6d4f7
list.highlightForeground#7bcad8
list.hoverBackground#263137
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#263137
list.inactiveSelectionForeground#7bcad8
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#232c32
menu.foreground#a6d4f7
menu.selectionBackground#3d6272bb
menu.selectionBorder#3d6272bb
menu.selectionForeground#7bcad8
menu.separatorBackground#a8d5f7
menubar.selectionBackground#3d6272bb
menubar.selectionBorder#232c32
menubar.selectionForeground#7bcad8
minimap.background#232c32
notificationLink.foreground#7bcad8
notifications.background#232c32
notifications.foreground#95dcf3
panel.background#232c32
panel.border#232c32
panelTitle.activeBorder#3f6d81
panelTitle.activeForeground#a2daf7
panelTitle.inactiveForeground#4c8da8
peekView.border#232c32de
peekViewEditor.background#232c32d9
peekViewEditor.matchHighlightBackground#4a819936
peekViewEditor.matchHighlightBorder#4585a0a4
peekViewEditorGutter.background#232d32de
peekViewResult.background#232c32d9
peekViewResult.matchHighlightBackground#366d8580
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#232c32d9
peekViewTitleDescription.foreground#a6d4f7cb
pickerGroup.foreground#7bcad8
progressBar.background#7bcad8
sash.hoverBorder#345057
scrollbar.shadow#2a3e45bb
scrollbarSlider.activeBackground#395f7794
scrollbarSlider.background#1014203a
scrollbarSlider.hoverBackground#7ba6cc2c
selection.background#75a8c45d
settings.checkboxBackground#232c32
settings.checkboxForeground#a6d4f7
settings.dropdownBackground#232c32
settings.dropdownForeground#a6d4f7
settings.headerForeground#7bcad8
settings.modifiedItemIndicator#7bcad8
settings.numberInputBackground#232c32
settings.numberInputForeground#a6d4f7
settings.textInputBackground#232c32
settings.textInputForeground#a6d4f7
sideBar.background#232c32
sideBar.border#263137
sideBar.foreground#63a3c0
sideBarSectionHeader.background#232c32
sideBarSectionHeader.border#4c7c93
sideBarSectionHeader.foreground#3e9ca3
sideBarTitle.foreground#afd6f3
statusBar.background#232c32
statusBar.border#232c32
statusBar.debuggingBackground#344752
statusBar.debuggingForeground#d4e6f5
statusBar.foreground#7d919b
statusBar.noFolderBackground#232c32
statusBarItem.hoverBackground#263137
tab.activeBorder#263137
tab.activeBorderTop#232c32
tab.activeForeground#a4ddf5
tab.activeModifiedBorder#4c7c93
tab.border#232c32
tab.hoverBorder#37738f
tab.inactiveBackground#232c32
tab.inactiveForeground#5694b1
tab.unfocusedActiveBorder#4c7c93
tab.unfocusedActiveForeground#a6d4f7
terminal.ansiBlack#68788d
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#557483
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#7bcad8
titleBar.activeBackground#232c32
titleBar.activeForeground#9cc2df
titleBar.border#232c3260
titleBar.inactiveBackground#2b3b45
titleBar.inactiveForeground#7fa2b3
tree.indentGuidesStroke#38535e
widget.shadow#18202430
window.activeBorder#232c32
window.inactiveBorder#425866

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#7d8387	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#76cabb	bold
constant.other.php, variable.other.constant	#8ef39f
constant.language, support.constant, constant.other.color	#f06c5d	bold
invalid, invalid.illegal	#fcafbc	—
invalid.deprecated	#f86898	—
keyword	#54c5c3	—
storage.type	#0fd9fd	—
storage.modifier	#41e39d	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#96ceb4	—
punctuation.definition.variable.php, punctuation.definition.variable.less	#f8eb9f	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#f0db64	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#FFE86A	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#6ccec0	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#f8eb9f	—
entity.name.function	#98eaf9	bold
source.cpp meta.block variable.other	#96ca76	—
support.other.variable, string.other.link	#3fe2d7	—
constant.numeric, constant.escape, keyword.other.unit	#f0769d	—
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	#FF6CA8	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#c8edfc	—
support.class	#b6f887	bold
support.type	#84e66c	—
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	#3CD795	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#bef1fc	—
variable.language	#e7fa94	italic
entity.name.method.js	#f8f7a7	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#ebea97	—
entity.other.attribute-name	#42FFAB	italic
entity.other.attribute-name.class	#86FFED	—
source.sass keyword.control, entity.other.attribute-name.id	#86FFED	—
markup.inserted	#8de8a8	—
markup.deleted	#f89ca5	—
markup.changed	#a49ff9	—
string.regexp	#9cabfd	—
constant.character.escape	#45b3f8	—
url, link, uri	—	italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82beff	italic
source.js constant.other.object.key.js string.unquoted.label.js	#8de8f8	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#FFE86A	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#dafc75	—
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	#82fc6f	—
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	#60e1a5	—
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	#92f4eb	—
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	#82deff	—
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	#69bff8	—
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	#bf77f0	—
text.html.markdown, punctuation.definition.list_item.markdown	#d2eafc	—
text.html.markdown markup.inline.raw.markdown	#92ddea	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#98ecd7	—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#FFE86A	—
markup.italic	#6bfac8	italic
markup.bold, markup.bold string	#46fa6a	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	#fa4658	bold
markup.underline	#76bcfa	underline
markup.strike	#a73838	italic
markup.quote punctuation.definition.blockquote.markdown	#fa5ba5	—
markup.quote	#f560b9	italic
string.other.link.title.markdown	#55f1b0	—
string.other.link.description.title.markdown	#4fc05e	—
constant.other.reference.link.markdown	#82f3d7	—
markup.raw.block	#92eae3	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#a6d4f790	—
variable.language.fenced.markdown	#9bb1c2	—
meta.separator	#9bb1c2	bold
markup.table	#a6d4f7	—

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