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

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.background#001212dc
activityBar.border#001212dc
activityBar.foreground#12B5A4
activityBar.inactiveForeground#7EA1B1
activityBarBadge.background#093833
activityBarBadge.foreground#c8e5f3
badge.background#093833
badge.foreground#c8e5f3
breadcrumb.activeSelectionForeground#3AA7DA
breadcrumb.background#030B0B
breadcrumb.focusForeground#5faae4
breadcrumb.foreground#54B7D7
breadcrumbPicker.background#030B0B
button.background#0d3935
button.foreground#d1eaf5
button.hoverBackground#1c7a7120
contrastActiveBorder#00121267
contrastBorder#00121267
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#001212
descriptionForeground#21a1d4
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#001212
dropdown.border#FFFFFF10
dropdown.foreground#c2ecf5
editor.background#030B0B
editor.findMatchBackground#1758588e
editor.findMatchBorder#37706bb6
editor.findMatchHighlightBackground#1758581e
editor.findMatchHighlightBorder#355e5a75
editor.findRangeHighlightBackground#3ce7cb2a
editor.foldBackground#0C272223
editor.foreground#e1e5e5d8
editor.hoverHighlightBackground#3d6f5e25
editor.lineHighlightBackground#020808dc
editor.lineHighlightBorder#24312d4e
editor.selectionBackground#1C2C2B64
editor.selectionForeground#629292
editor.selectionHighlightBackground#384e6069
editor.snippetFinalTabstopHighlightBackground#187e7e36
editor.snippetFinalTabstopHighlightBorder#274e43
editor.snippetTabstopHighlightBackground#2786865b
editor.snippetTabstopHighlightBorder#3a7262c4
editor.wordHighlightBackground#17585857
editor.wordHighlightBorder#3d746fd3
editor.wordHighlightStrongBackground#1758585b
editor.wordHighlightStrongBorder#3d746fd3
editorBracketMatch.background#001212
editorBracketMatch.border#67769660
editorCursor.foreground#0abb3f
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#001212
editorGutter.addedBackground#84b83b20
editorGutter.deletedBackground#FF537050
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#030B0B
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#313241
editorIndentGuide.background1#001212
editorLineNumber.activeForeground#43738a
editorLineNumber.foreground#283b45
editorLink.activeForeground#5FA8C1
editorMarkerNavigation.background#030B0B
editorOverviewRuler.border#001212
editorRuler.foreground#465A64
editorStickyScroll.background#001212
editorStickyScrollHover.background#030B0B
editorSuggestWidget.background#030B0B
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#70baf3
editorSuggestWidget.selectedBackground#051313
editorWarning.foreground#20462a70
editorWhitespace.foreground#69757c40
editorWidget.background#001212
editorWidget.resizeBorder#a2d1f5
extensionBadge.remoteBackground#0d3935
extensionBadge.remoteForeground#d1eaf5
extensionButton.background#0d3935
extensionButton.foreground#d1eaf5
extensionButton.hoverBackground#0d3935a0
extensionButton.prominentBackground#0e3f3b
extensionButton.prominentForeground#d1eaf5
extensionButton.prominentHoverBackground#1c7a7120
extensionButton.separator#80cfdd
extensionIcon.preReleaseForeground#80cfdd
extensionIcon.sponsorForeground#80cfdd
extensionIcon.starForeground#80cfdd
extensionIcon.verifiedForeground#80cfdd
focusBorder#2330427c
gitDecoration.conflictingResourceForeground#f7bc50a2
gitDecoration.deletedResourceForeground#FF768D90
gitDecoration.ignoredResourceForeground#BB81EC90
gitDecoration.modifiedResourceForeground#3BA8F0cb
gitDecoration.untrackedResourceForeground#91ee8190
icon.foreground#119487
input.background#0c1212
input.border#030e0e
input.foreground#81b0d4
input.placeholderForeground#35605b
inputOption.activeBorder#070e0c
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#001212
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#001212
list.activeSelectionForeground#c2ecf5
list.dropBackground#1c1c20
list.focusBackground#4AA9C920
list.focusForeground#4AA9C9
list.highlightForeground#85e5db
list.hoverBackground#040b0b
list.hoverForeground#92bce0c0
list.inactiveSelectionBackground#00000045
list.inactiveSelectionForeground#abece6
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#001212
menu.foreground#54AAC6
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#a2d1f5
menu.separatorBackground#a8d5f7
menubar.selectionBackground#3d746f28
menubar.selectionBorder#00000030
menubar.selectionForeground#a2d1f5
minimap.background#020808dc
notificationLink.foreground#a2d1f5
notifications.background#001212
notifications.foreground#95dcf3
panel.background#001212
panel.border#242d4760
panelTitle.activeBorder#1d283b
panelTitle.activeForeground#a2daf7
panelTitle.inactiveForeground#3f6a8b
peekView.border#041111
peekViewEditor.background#030B0B
peekViewEditor.matchHighlightBackground#3d746f28
peekViewEditor.matchHighlightBorder#3d746faf
peekViewEditorGutter.background#030B0B
peekViewResult.background#030B0B
peekViewResult.matchHighlightBackground#3d746f8a
peekViewResult.selectionBackground#88ADBE70
peekViewTitle.background#030B0B
peekViewTitleDescription.foreground#4AA9C960
pickerGroup.foreground#80cfdd
progressBar.background#1c1f2b
quickInput.background#0c1212
quickInput.foreground#74ACC3
sash.hoverBorder#103e3f
scrollbar.shadow#0c221936
scrollbarSlider.activeBackground#262733
scrollbarSlider.background#1c1e1fbb
scrollbarSlider.hoverBackground#83a8c410
selection.background#1C2C2B64
settings.checkboxBackground#0c1212
settings.checkboxForeground#8bb8db
settings.dropdownBackground#0c1212
settings.dropdownForeground#4AA9C9
settings.headerForeground#50A7C7
settings.modifiedItemIndicator#a2d1f5
settings.numberInputBackground#0c1212
settings.numberInputForeground#4AA9C9
settings.textInputBackground#0c1212
settings.textInputForeground#4AA9C9
sideBar.background#001212dc
sideBar.border#001212
sideBar.foreground#64A4B2
sideBarSectionHeader.background#001212
sideBarSectionHeader.border#001212dc
sideBarSectionHeader.foreground#5ea1b0
sideBarTitle.foreground#5ea1b0
statusBar.background#001212dc
statusBar.border#001212
statusBar.debuggingBackground#0e3f3b
statusBar.debuggingForeground#bbd9f3
statusBar.foreground#78CDC7
statusBar.noFolderBackground#001212dc
statusBarItem.hoverBackground#37495220
tab.activeBackground#001212dc
tab.activeBorder#0BB9A7
tab.activeForeground#79a4ad
tab.activeModifiedBorder#9F9C72
tab.border#00121267
tab.hoverBackground#020806
tab.inactiveBackground#030B0B
tab.inactiveForeground#839EAC
tab.unfocusedActiveBorder#546E7A
tab.unfocusedActiveForeground#4AA9C9
terminal.ansiBlack#78a795
terminal.ansiBlue#5b8df8
terminal.ansiBrightBlack#637a7a
terminal.ansiBrightBlue#175df4
terminal.ansiBrightCyan#3ccfe9
terminal.ansiBrightGreen#4bdd1a
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#e92445
terminal.ansiBrightWhite#bcd2d2
terminal.ansiBrightYellow#e4d828
terminal.ansiCyan#89DDFF
terminal.ansiGreen#9fda47
terminal.ansiMagenta#C792EA
terminal.ansiRed#f23857
terminal.ansiWhite#d6d9d8
terminal.ansiYellow#f5e044
textLink.activeForeground#4AA9C9
textLink.foreground#70B492
titleBar.activeBackground#001212dc
titleBar.activeForeground#8ac8dd
titleBar.border#00121260
titleBar.inactiveBackground#001212dc
titleBar.inactiveForeground#7EA1B1
tree.indentGuidesStroke#19364790
widget.shadow#031010

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#676b6b	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#9ac8c2ec	bold
constant.other.php, variable.other.constant	#e9b06e
constant.language, support.constant, constant.other.color	#ecd268	bold
variable.language	#78d478	italic
constant.other.color	#a85c04	bold
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
keyword	#c97b56	—
storage.type	#63D4E7	—
storage.modifier	#439CD8	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#DC9DA8	—
punctuation.definition.variable.php	#3CB3A3	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#6CBD82	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#7FBCE7	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#48AFF3	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#F4A3B7	—
entity.name.function	#F39BEC
source.cpp meta.block variable.other	#91beb8d5	—
support.other.variable, string.other.link	#91beb8d5	—
constant.numeric, constant.escape, keyword.other.unit	#7AA77A	—
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	#87B274	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.other.namespace.php	#F584A2	—
entity.name	#FF6881	—
support.class	#FF6A7C	bold
support.type	#9790FF	—
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	#93AFD7	—
entity.other.attribute-name	#BF9099	italic
entity.other.attribute-name.class	#FA90B8	—
source.sass keyword.control, entity.other.attribute-name.id	#3ABEC6	—
markup.inserted	#7aca04	—
markup.deleted	#F47188	—
markup.changed	#8395F7	—
string.regexp	#F37E7E	—
constant.character.escape	#E073D2	—
url, link, uri	#FF9E9E	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	#FF7D93	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	#FF758C	—
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	#E39484	—
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	#55C3E8	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#A0B6C7	—
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	#F0878C	italic
markup.bold, markup.bold string	#F3868C	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	#F3868C	bold
markup.underline	#F78C6C	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#95AABA	—
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	#4FB4D6	—
variable.language.fenced.markdown	#95AABA	—
meta.separator	#95AABA	bold
markup.table	#62B8D5	—

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