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-shader (Mirage)

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#171022
activityBar.border#f914d6
activityBar.foreground#f51ad4
activityBar.inactiveForeground#631e58
activityBarBadge.background#8a0f63
activityBarBadge.foreground#eccef5
badge.background#8a0f63
badge.foreground#eccef5
breadcrumb.activeSelectionForeground#ab53bd
breadcrumb.background#171022
breadcrumb.focusForeground#FF5EFF
breadcrumb.foreground#a188a7
breadcrumbPicker.background#171022
button.background#8a0f63
button.foreground#f2e6f3
button.hoverBackground#bd15a48f
contrastActiveBorder#181124
contrastBorder#181124
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#171022
descriptionForeground#f3aadc
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#171022
dropdown.border#bd15a4
dropdown.foreground#f7cef5
editor.background#190b29
editor.findMatchBackground#F87AD023
editor.findMatchBorder#F87AD0
editor.findMatchHighlightBackground#F87AD023
editor.findMatchHighlightBorder#F87AD0
editor.foreground#dfb2dd
editor.hoverHighlightBackground#F87AD03b
editor.lineHighlightBackground#0f0f0f07
editor.lineHighlightBorder#bd15a40c
editor.rangeHighlightBackground#F87AD059
editor.selectionBackground#f59dd917
editor.selectionForeground#f37fce
editor.selectionHighlightBackground#2f2f3096
editor.selectionHighlightBorder#8193a196
editor.snippetFinalTabstopHighlightBackground#17102236
editor.snippetFinalTabstopHighlightBorder#172024
editor.snippetTabstopHighlightBackground#1710225b
editor.snippetTabstopHighlightBorder#23313dc4
editor.wordHighlightBackground#7a1f5d3d
editor.wordHighlightBorder#F87AD0
editor.wordHighlightStrongBackground#3a112d41
editor.wordHighlightStrongBorder#F87AD0
editorBracketMatch.background#F87AD042
editorBracketMatch.border#F87AD0cc
editorCursor.foreground#f70fb9
editorError.foreground#FF537070
editorGroup.border#ac428c9f
editorGroupHeader.tabsBackground#171022
editorGroupHeader.tabsBorder#bd15a4
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537050
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#171022
editorHoverWidget.border#bd15a4
editorIndentGuide.activeBackground1#bd188970
editorIndentGuide.background1#1c0c2e
editorLineNumber.activeForeground#BE68D0
editorLineNumber.foreground#6d4b74
editorLink.activeForeground#fd3bc0
editorMarkerNavigation.background#171022
editorOverviewRuler.border#bd15a4
editorRuler.foreground#b67bbe82
editorStickyScroll.background#171022
editorStickyScrollHover.background#1c0c2e
editorSuggestWidget.background#171022
editorSuggestWidget.border#bd15a410
editorSuggestWidget.foreground#8971a0
editorSuggestWidget.highlightForeground#d139f0
editorSuggestWidget.selectedBackground#623375
editorWarning.foreground#bd15a470
editorWhitespace.foreground#ae6fb640
editorWidget.background#171022
editorWidget.border#853d67
editorWidget.resizeBorder#956ca8c2
extensionBadge.remoteBackground#8a0f63
extensionBadge.remoteForeground#eccef5
extensionButton.background#8a0f63
extensionButton.foreground#eccef5
extensionButton.hoverBackground#8a0f63a0
extensionButton.prominentBackground#ad2983
extensionButton.prominentForeground#eccef5
extensionButton.prominentHoverBackground#bd15a48f
extensionButton.separator#715579
extensionIcon.preReleaseForeground#f82fb9
extensionIcon.sponsorForeground#f82fb9
extensionIcon.starForeground#f82fb9
extensionIcon.verifiedForeground#f82fb9
focusBorder#8a438646
gitDecoration.conflictingResourceForeground#AF9D7C
gitDecoration.deletedResourceForeground#DF8594
gitDecoration.ignoredResourceForeground#C986DE
gitDecoration.modifiedResourceForeground#71A5C6
gitDecoration.untrackedResourceForeground#79AB70
icon.foreground#ec1ee2
input.background#171022
input.border#bd15a4
input.foreground#c2a4c9
input.placeholderForeground#6d3e67
inputOption.activeBorder#bd15a4
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#172024
inputValidation.warningBorder#67769660
inputValidation.warningForeground#d882e9
list.activeSelectionBackground#382241e3
list.activeSelectionForeground#c696e2
list.dropBackground#e612db
list.focusBackground#492857b6
list.focusForeground#d5aadb
list.highlightForeground#bf85e5
list.hoverBackground#3d1646c0
list.hoverForeground#b3c6da
list.inactiveSelectionBackground#38223fd2
list.inactiveSelectionForeground#cbb1da
listFilterWidget.background#572e6ea9
listFilterWidget.noMatchesOutline#572e6ea9
listFilterWidget.outline#572e6ea9
menu.background#171022
menu.foreground#af9eb6
menu.selectionBackground#55306d83
menu.selectionBorder#bd15a4
menu.selectionForeground#eaa8f7
menu.separatorBackground#eaa8f7
menubar.selectionBackground#68387a3b
menubar.selectionBorder#bd15a4
menubar.selectionForeground#eaa8f7
minimap.background#171022c5
notificationLink.foreground#f82fb9
notifications.background#171022
notifications.foreground#715579
panel.background#171022
panel.border#59074D
panelTitle.activeBorder#49053E
panelTitle.activeForeground#d186d1d8
panelTitle.inactiveForeground#8b4e8de0
peekView.border#bd15a46e
peekViewEditor.background#171022
peekViewEditor.matchHighlightBackground#1c273185
peekViewEditor.matchHighlightBorder#bd15a48f
peekViewEditorGutter.background#171022
peekViewResult.background#171022
peekViewResult.matchHighlightBackground#37495c8e
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#171022
peekViewTitleDescription.foreground#F87AD0
pickerGroup.foreground#F87AD0e5
progressBar.background#F87AD0a4
sash.hoverBorder#a33d9b
scrollbar.shadow#180a20
scrollbarSlider.activeBackground#d139f03a
scrollbarSlider.background#d139f033
scrollbarSlider.hoverBackground#581a6441
selection.background#eb58bc56
settings.checkboxBackground#171022
settings.checkboxForeground#F87AD0
settings.dropdownBackground#171022
settings.dropdownForeground#F87AD0
settings.headerForeground#b21ecf
settings.modifiedItemIndicator#fa8086
settings.numberInputBackground#171022
settings.numberInputForeground#F87AD0
settings.textInputBackground#171022
settings.textInputForeground#F87AD0
sideBar.background#171022
sideBar.border#bd15a4
sideBar.foreground#a79ba6
sideBarSectionHeader.background#181124
sideBarSectionHeader.border#bd15a4
sideBarSectionHeader.foreground#f576eb
sideBarTitle.foreground#f576eb
statusBar.background#171022
statusBar.border#bd15a4
statusBar.debuggingBackground#702291
statusBar.debuggingForeground#f7d0f7
statusBar.foreground#f79fdb
statusBar.noFolderBackground#171022
statusBarItem.hoverBackground#546E7A20
tab.activeBackground#181124
tab.activeBorder#231124
tab.activeBorderTop#201124
tab.activeForeground#F87AD0
tab.activeModifiedBorder#bd15a4
tab.border#bd15a4
tab.inactiveBackground#171022
tab.inactiveForeground#7e5572
tab.unfocusedActiveBorder#72547a
tab.unfocusedActiveForeground#F87AD0
terminal.ansiBlack#b165a0
terminal.ansiBlue#2459ce
terminal.ansiBrightBlack#845c83
terminal.ansiBrightBlue#2366f5
terminal.ansiBrightCyan#02acf0
terminal.ansiBrightGreen#12f744
terminal.ansiBrightMagenta#a32ef1
terminal.ansiBrightRed#f73051
terminal.ansiBrightWhite#d1cece
terminal.ansiBrightYellow#f5e729
terminal.ansiCyan#1482ad
terminal.ansiGreen#36ce28
terminal.ansiMagenta#8628c5
terminal.ansiRed#c92541
terminal.ansiWhite#e9e5e5
terminal.ansiYellow#ddc125
textLink.activeForeground#fa39bd
textLink.foreground#fa24c8
titleBar.activeBackground#171022
titleBar.activeForeground#f8bce5
titleBar.border#bd15a4
titleBar.inactiveBackground#2b1c3b
titleBar.inactiveForeground#b78ec4
tree.indentGuidesStroke#ec1ee254
widget.shadow#130813

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#776d82	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#d8a8ebd8	bold
constant.other.php, variable.other.constant	#e788f3
constant.language, support.constant, constant.other.color	#F27DD1	bold
invalid, invalid.illegal	#FF738B	—
invalid.deprecated	#eb7ae1	—
keyword	#FF62CA	—
storage.type	#FF57EE	—
storage.modifier	#FD68BA	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#E572FF	—
punctuation.definition.variable.php	#FF60DF	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#FF51EB	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#FF62CD	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#FF2BDF	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#C386FF	—
entity.name.function	#FF6BC1	—
source.cpp meta.block variable.other	#c498d6d8	—
support.other.variable, string.other.link	#c498d6d8	—
constant.numeric, constant.escape, keyword.other.unit	#ea8dfd	—
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	#E195DE	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FF60D7	—
support.other.namespace.php	#DE73FC	—
entity.name	#FF63DB	—
support.class	#ff86ff	bold
support.type	#FF60D7	—
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	#C783FF	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#ff748b	—
variable.language	#f860df	italic
entity.name.method.js	#fa6bba	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#F16BFD	—
entity.other.attribute-name	#CF81F6	italic
entity.other.attribute-name.class	#D278FF	—
source.sass keyword.control, entity.other.attribute-name.id	#FF6CA4	—
markup.inserted	#04ca9c	—
markup.deleted	#FF768F	—
markup.changed	#C988F7	—
string.regexp	#F1809E	—
constant.character.escape	#F46DE2	—
url, link, uri	#FF60DF	italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FF66D4	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF758C	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#FF5DE7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF6BD0	—
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	#FF66BA	—
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	#FF70A6	—
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	#FF66D2	—
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	#FF66C7	—
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	#FF58F1	—
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	#F36BFF	—
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	#DC74FF	—
text.html.markdown, punctuation.definition.list_item.markdown	#FF66CE	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#77657e	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#FF717F	—
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	#f76ca8	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#6f657e	—
markup.quote	—	italic
string.other.link.title.markdown	#e482ff	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#ff6b93	—
markup.raw.block	#C792EA	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#F87AD090	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#F87AD0	—

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