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

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#003247
activityBar.activeBorder#1c7ebb
activityBar.background#00344A
activityBar.border#00344A
activityBar.foreground#1c7ebb
activityBar.inactiveForeground#265470
activityBarBadge.background#1B526A
activityBarBadge.foreground#c7ebf6
badge.background#1B526A
badge.foreground#98c6db
breadcrumb.activeSelectionForeground#1B526A
breadcrumb.background#00354f
breadcrumb.focusForeground#8bc3ee
breadcrumb.foreground#489dba
breadcrumbPicker.background#00354f
button.background#075779
button.hoverBackground#1B526A70
debugConsole.errorForeground#eb4040
debugConsole.infoForeground#15ace3
debugConsole.sourceForeground#29d763
debugConsole.warningForeground#dedb2e
debugConsoleInputIcon.foreground#df2394
debugToolBar.background#00344A
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#00344A
dropdown.border#FFFFFF10
editor.background#00344A
editor.findMatchBackground#1a24276e
editor.findMatchBorder#3c86a37a
editor.findMatchHighlightBackground#466a8d42
editor.findMatchHighlightBorder#28bcf73b
editor.foreground#dcf2f7
editor.hoverHighlightBackground#3c97e72c
editor.lineHighlightBackground#061d1f50
editor.selectionBackground#02496dce
editor.selectionHighlightBackground#5d709760
editor.snippetFinalTabstopHighlightBackground#016e9c
editor.snippetFinalTabstopHighlightBorder#014b6b
editor.snippetTabstopHighlightBackground#00344A36
editor.snippetTabstopHighlightBorder#015477b9
editor.wordHighlightBackground#0ab2f517
editor.wordHighlightBorder#0ab2f55e
editor.wordHighlightStrongBackground#3c87f02d
editor.wordHighlightStrongBorder#1089b977
editorBracketMatch.background#00344A
editorBracketMatch.border#67769660
editorCursor.foreground#f1e506
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#00344A
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee60
editorHoverWidget.background#023650
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#06638b
editorIndentGuide.background1#0c385336
editorLineNumber.activeForeground#229cd4
editorLineNumber.foreground#0b577e
editorLink.activeForeground#a6d4f7
editorMarkerNavigation.background#023650de
editorOverviewRuler.border#00344A
editorRuler.foreground#37474F
editorStickyScroll.background#00344A
editorStickyScrollHover.background#023c53
editorSuggestWidget.background#023650
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#1B526A
editorSuggestWidget.selectedBackground#023047
editorWarning.foreground#C3E88D70
editorWhitespace.foreground#03121b88
editorWidget.background#00344A
editorWidget.resizeBorder#1B526A
extensionBadge.remoteBackground#075779
extensionBadge.remoteForeground#98c6db
extensionButton.background#1B526A
extensionButton.foreground#98c6db
extensionButton.hoverBackground#1B526Aaf
extensionButton.prominentBackground#096992
extensionButton.prominentForeground#98c6db
extensionButton.prominentHoverBackground#1B526A70
extensionButton.separator#95dcf3
extensionIcon.preReleaseForeground#95dcf3
extensionIcon.sponsorForeground#95dcf3
extensionIcon.starForeground#95dcf3
extensionIcon.verifiedForeground#95dcf3
focusBorder#3778aa65
gitDecoration.conflictingResourceForeground#FFE5B4
gitDecoration.deletedResourceForeground#FFA9B8
gitDecoration.ignoredResourceForeground#D2B0FF
gitDecoration.modifiedResourceForeground#5D97FF
gitDecoration.untrackedResourceForeground#88FFBD
icon.foreground#4EBBFF
input.background#033953
input.border#ffffff00
input.foreground#81b0d4
input.placeholderForeground#a6d4f760
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#00344A
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#01374e
list.activeSelectionForeground#1B526A
list.focusBackground#a6d4f720
list.focusForeground#a6d4f7
list.highlightForeground#1B526A
list.hoverBackground#023c53
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#01131a30
list.inactiveSelectionForeground#1B526A
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#00344A
menu.foreground#a6d4f7
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#1B526A
menu.separatorBackground#a8d5f7
menubar.selectionBackground#0778a880
menubar.selectionBorder#00000030
menubar.selectionForeground#a8d5f7
minimap.background#00344A
notificationLink.foreground#1B526A
notifications.background#00344A
notifications.foreground#95dcf3
panel.background#00344A
panel.border#01466460
panelTitle.activeBorder#36bad4
panelTitle.activeForeground#a2daf7
panelTitle.inactiveForeground#4782af
peekView.border#023c58de
peekViewEditor.background#023650de
peekViewEditor.matchHighlightBackground#076da836
peekViewEditor.matchHighlightBorder#0778a8a4
peekViewEditorGutter.background#023650de
peekViewResult.background#023650de
peekViewResult.matchHighlightBackground#0778a880
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#00344A71
peekViewTitleDescription.foreground#a6d4f7cb
pickerGroup.foreground#1B526A
progressBar.background#1B526A
sash.hoverBorder#0a4970
scrollbar.shadow#032431
scrollbarSlider.activeBackground#24426e79
scrollbarSlider.background#1014203a
scrollbarSlider.hoverBackground#7b8acc2c
selection.background#3e8cc79f
settings.checkboxBackground#033953
settings.checkboxForeground#a6d4f7
settings.dropdownBackground#033953
settings.dropdownForeground#a6d4f7
settings.headerForeground#1B526A
settings.modifiedItemIndicator#1B526A
settings.numberInputBackground#033953
settings.numberInputForeground#a6d4f7
settings.textInputBackground#033953
settings.textInputForeground#a6d4f7
sideBar.background#00344A
sideBar.border#022f4260
sideBar.foreground#96BDD3
sideBarSectionHeader.background#00344A
sideBarSectionHeader.border#0a4f7b
sideBarSectionHeader.foreground#afd6f3
sideBarTitle.foreground#afd6f3
statusBar.background#00344A
statusBar.border#00344A
statusBar.debuggingBackground#076891
statusBar.debuggingForeground#d9e8f5
statusBar.foreground#51BDF0
statusBar.noFolderBackground#00344A
statusBarItem.hoverBackground#546E7A20
tab.activeBorder#25bedd
tab.activeBorderTop#00344A
tab.activeForeground#8acfcf
tab.activeModifiedBorder#4c93b4
tab.border#00344A
tab.hoverBorder#51BDF0
tab.inactiveBackground#00344A
tab.inactiveForeground#47A4CE
tab.unfocusedActiveBorder#4c93b4
tab.unfocusedActiveForeground#a6d4f7
terminal.ansiBlack#5d6b7d
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#5c717c
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
terminal.background#00344A
terminal.foreground#dcf2f7
textLink.activeForeground#a6d4f7
textLink.foreground#1B526A
titleBar.activeBackground#00344A
titleBar.activeForeground#9cc2df
titleBar.border#00344A60
titleBar.inactiveBackground#024764
titleBar.inactiveForeground#7fa2b3
tree.indentGuidesStroke#1f4e6b90
widget.shadow#00000030
window.activeBorder#01485c
window.inactiveBorder#4EBBFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#668694	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#98c5d3	bold
constant.other.php, variable.other.constant	#a7d251
constant.language, support.constant, constant.other.color	#e4c58b	bold
invalid, invalid.illegal	#FFA6B5	—
invalid.deprecated	#DEACFF	—
keyword	#FFA4CA	—
storage.type	#FFA6B2	—
storage.modifier	#DDAAFF	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#96ceb4	—
punctuation.definition.variable.php, punctuation.definition.variable.less	#FFA0AF	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#FFA7A4	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#FFA7B3	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#FFA2D1	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#9FC0FF	—
entity.name.function	#51CEFF	bold
source.cpp meta.block variable.other	#9FC7D3	—
support.other.variable, string.other.link	#9FC7D3	—
constant.numeric, constant.escape, keyword.other.unit	#EDB970	—
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	#ABEACA	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffd689	—
support.class	#ffc966	bold
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	#96ceb4	—
entity.other.attribute-name	#f3c46d	italic
entity.other.attribute-name.class	#b3e661	—
source.sass keyword.control, entity.other.attribute-name.id	#6BCBFB	—
markup.inserted	#C3E88D	—
markup.deleted	#FFA6B5	—
markup.changed	#DDA9FF	—
string.regexp	#FFAA75	—
constant.character.escape	#20d5e2	—
url, link, uri	—	italic underline
variable.language	#FFA5C8	italic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#A0BEFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FFA7B6	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#DEADFF	—
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	#FFA88E	—
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	#FFA3B3	—
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	#FFA694	—
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	#A1BFFF	—
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	#FFAAAF	—
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	#DFAEFF	—
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	#a6d4f7	—
text.html.markdown markup.inline.raw.markdown	#DFADFF	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#AFC7DA	—
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	#FFAAAF	italic
markup.bold, markup.bold string	#FFAAAF	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	#FFAAAF	bold
markup.underline	#FFA88E	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#ADC4D7	—
markup.quote	—	italic
string.other.link.title.markdown	#A1BFFF	—
string.other.link.description.title.markdown	#DDA9FF	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#DEABFF	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#A6D4F7	—
variable.language.fenced.markdown	#ADC5D8	—
meta.separator	#ADC5D8	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}!`;
}