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 - H@ck3r (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#030C0Cdc
activityBar.border#6DE07Cc4
activityBar.foreground#6DE07C
activityBar.inactiveForeground#007536
activityBarBadge.background#224440
activityBarBadge.foreground#e3f3e4
badge.background#224440
badge.foreground#e3f3e4
breadcrumb.activeSelectionForeground#25af8d
breadcrumb.background#020b0b
breadcrumb.focusForeground#9ef0db
breadcrumb.foreground#2d8079
breadcrumbPicker.background#020b0b
button.background#224440
button.foreground#ecfdf3
button.hoverBackground#0a3f13
contrastActiveBorder#011f0513
contrastBorder#011f0513
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#030C0C
descriptionForeground#21d489
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#030C0C
dropdown.border#6DE07C
dropdown.foreground#dcece5
editor.background#030C0C
editor.findMatchBackground#17583a8e
editor.findMatchBorder#6DE07Ca1
editor.findMatchHighlightBackground#1758581e
editor.findMatchHighlightBorder#355e4d75
editor.findRangeHighlightBackground#3ce7922a
editor.foldBackground#041b0e50
editor.foreground#b5dfcad8
editor.hoverHighlightBackground#3d6f5225
editor.lineHighlightBackground#01030250
editor.lineHighlightBorder#12791f69
editor.selectionBackground#081f11e1
editor.selectionForeground#67c29c
editor.selectionHighlightBackground#38604269
editor.snippetFinalTabstopHighlightBackground#187e7e36
editor.snippetFinalTabstopHighlightBorder#6DE07C
editor.snippetTabstopHighlightBackground#2786865b
editor.snippetTabstopHighlightBorder#6DE07Cc4
editor.wordHighlightBackground#17583f57
editor.wordHighlightBorder#6DE07Cb0
editor.wordHighlightStrongBackground#17583f5b
editor.wordHighlightStrongBorder#6DE07Caf
editorBracketMatch.background#030C0C
editorBracketMatch.border#6DE07C60
editorCursor.foreground#0abb3f
editorError.foreground#FF537070
editorGroupHeader.border#030C0C
editorGroupHeader.tabsBackground#030C0C
editorGroupHeader.tabsBorder#6DE07C
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#030c0c
editorHoverWidget.border#6DE07Cb4
editorIndentGuide.activeBackground1#075f13a1
editorIndentGuide.background1#030C0C
editorLineNumber.activeForeground#09e72e
editorLineNumber.foreground#2b6b33
editorLink.activeForeground#47C28F
editorMarkerNavigation.background#030c0c
editorOverviewRuler.border#6DE07C96
editorRuler.foreground#33613f
editorStickyScroll.background#030C0C
editorStickyScrollHover.background#020b0b
editorSuggestWidget.background#030c0c
editorSuggestWidget.border#6DE07C
editorSuggestWidget.foreground#c5f8e3
editorSuggestWidget.highlightForeground#0ff576
editorSuggestWidget.selectedBackground#081f0e
editorWarning.foreground#20462a70
editorWhitespace.foreground#54665d40
editorWidget.background#030C0C
editorWidget.resizeBorder#6DE07C
extensionBadge.remoteBackground#224440
extensionBadge.remoteForeground#ecfdf3
extensionButton.background#224440
extensionButton.foreground#ecfdf3
extensionButton.hoverBackground#224440a0
extensionButton.prominentBackground#196b2b
extensionButton.prominentForeground#ecfdf3
extensionButton.prominentHoverBackground#0a3f13
extensionButton.separator#0a3f13
extensionIcon.preReleaseForeground#a2f5b0
extensionIcon.sponsorForeground#a2f5b0
extensionIcon.starForeground#a2f5b0
extensionIcon.verifiedForeground#a2f5b0
focusBorder#0785189a
gitDecoration.conflictingResourceForeground#f7bc50a2
gitDecoration.deletedResourceForeground#FF537090
gitDecoration.ignoredResourceForeground#8756af90
gitDecoration.modifiedResourceForeground#0e6eadcb
gitDecoration.untrackedResourceForeground#91ee81a0
icon.foreground#44973d
input.background#070e0c
input.border#6DE07C
input.foreground#81d49a
input.placeholderForeground#2c5248
inputOption.activeBorder#6DE07C
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#070e0c
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#044d28b9
list.activeSelectionForeground#c2f5e6
list.dropBackground#6DE07C
list.focusBackground#47C28F20
list.focusForeground#53df76
list.highlightForeground#85e5b0
list.hoverBackground#041a07c5
list.hoverForeground#92e0ccc0
list.inactiveSelectionBackground#1b462d30
list.inactiveSelectionForeground#abecd8
listFilterWidget.background#00000030
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#030C0C
menu.foreground#2a8b5a
menu.selectionBackground#00000050
menu.selectionBorder#6DE07C30
menu.selectionForeground#a2f5d9
menu.separatorBackground#67b99a
menubar.selectionBackground#070e0c
menubar.selectionBorder#6DE07C30
menubar.selectionForeground#a2f5d2
minimap.background#010805
notificationLink.foreground#a2f5b0
notifications.background#030C0C
notifications.foreground#95f39a
panel.background#030C0C
panel.border#6DE07C60
panelTitle.activeBorder#6DE07C
panelTitle.activeForeground#a2f7d7
panelTitle.inactiveForeground#3f8b74
peekView.border#6DE07C
peekViewEditor.background#030c0c
peekViewEditor.matchHighlightBackground#3d746f28
peekViewEditor.matchHighlightBorder#6DE07Caf
peekViewEditorGutter.background#030c0c
peekViewResult.background#030c0c
peekViewResult.matchHighlightBackground#3d746f8a
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#030c0c
peekViewTitleDescription.foreground#3faa7e
pickerGroup.foreground#80ddc9
progressBar.background#1c1f2b
quickInput.background#070e0c
quickInput.foreground#315f3d
sash.hoverBorder#0aae20
scrollbar.shadow#153b1e36
scrollbarSlider.activeBackground#263329
scrollbarSlider.background#112c13bb
scrollbarSlider.hoverBackground#83a8c410
selection.background#1c914350
settings.checkboxBackground#070e0c
settings.checkboxForeground#47C28F
settings.dropdownBackground#070e0c
settings.dropdownForeground#47C28F
settings.headerForeground#44973d
settings.modifiedItemIndicator#a2d1f5
settings.numberInputBackground#070e0c
settings.numberInputForeground#47C28F
settings.textInputBackground#070e0c
settings.textInputForeground#47C28F
sideBar.background#030C0Cdc
sideBar.border#6DE07C
sideBar.foreground#7cb88b
sideBarSectionHeader.background#030C0C
sideBarSectionHeader.border#6DE07C5b
sideBarSectionHeader.foreground#43f584
sideBarTitle.foreground#43f584
statusBar.background#030C0Cdc
statusBar.border#6DE07C
statusBar.debuggingBackground#08491c
statusBar.debuggingForeground#c7f0df
statusBar.foreground#6caf77
statusBar.noFolderBackground#030C0Cdc
statusBarItem.hoverBackground#37495220
tab.activeBackground#030C0C
tab.activeBorder#030C0C
tab.activeForeground#6bd17c
tab.activeModifiedBorder#33f103
tab.border#6DE07C
tab.hoverBackground#020806
tab.inactiveBackground#030C0Cdc
tab.inactiveForeground#4b6455
tab.unfocusedActiveBorder#6DE07Caf
tab.unfocusedActiveForeground#47C28F
terminal.ansiBlack#648464
terminal.ansiBlue#5b8df8
terminal.ansiBrightBlack#576e6e
terminal.ansiBrightBlue#175df4
terminal.ansiBrightCyan#3ccfe9
terminal.ansiBrightGreen#4bdd1a
terminal.ansiBrightMagenta#C792EA
terminal.ansiBrightRed#e92445
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e4d828
terminal.ansiCyan#89DDFF
terminal.ansiGreen#9fda47
terminal.ansiMagenta#C792EA
terminal.ansiRed#f23857
terminal.ansiWhite#edecec
terminal.ansiYellow#f5e044
textLink.activeForeground#47C28F
textLink.foreground#416e50
titleBar.activeBackground#030C0Cdc
titleBar.activeForeground#7ac2a4
titleBar.border#6DE07C
titleBar.inactiveBackground#051515
titleBar.inactiveForeground#5e9e92
tree.indentGuidesStroke#19472890
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	#78B2A1	bold
constant.other.php, variable.other.constant	#0dc383	—
constant.language, support.constant, constant.other.color	#128f2d	bold
invalid, invalid.illegal	#dd4962d8	—
invalid.deprecated	#ea92d8da	—
keyword	#0d9968	—
storage.type	#3efc74ee	—
storage.modifier	#13df2bef	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#35bf8fd5	—
punctuation.definition.variable.php	#04ad53	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#298f45	—
keyword.control	—	italic bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#1bc93de7	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#6ebbb1d5	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#8bff56ee	—
entity.name.function	#2de9a1
source.cpp meta.block variable.other	#7DDDC3	—
support.other.variable, string.other.link	#7DDDC3	—
constant.numeric, constant.escape, keyword.other.unit	#69BA69	—
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	#51B77C	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#14e768	—
support.other.namespace.php	#58C78A	—
entity.name	#05ff4c	—
support.class	#27c66ee5	bold
support.type	#5DD5AA	—
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	#66cea9d5	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#14e773d5	—
variable.language	#14e78c	italic
entity.name.method.js	#14e7b6d5	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#51fa9d	—
entity.other.attribute-name	#4af1acee	italic
entity.other.attribute-name.class	#3cd488ee	—
source.sass keyword.control, entity.other.attribute-name.id	#3ac4b1	—
markup.inserted	#7aca04	—
markup.deleted	#f4022b	—
markup.changed	#4c1df5	—
string.regexp	#56c29cd5	—
constant.character.escape	#09dd93d5	—
url, link, uri	#37e7e4d5	italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82fff7	italic
source.js constant.other.object.key.js string.unquoted.label.js	#14e7b6d5	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#09f725	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#45fc60	—
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	#78fa92	—
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	#21f889	—
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	#56fca6	—
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	#82ffb6	—
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	#68e0c0d5	—
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	#3ddf93d5	—
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	#17dd3f	—
text.html.markdown, punctuation.definition.list_item.markdown	#49cc88	—
text.html.markdown markup.inline.raw.markdown	#92eaa8	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#7eb6a3	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#8ae96d	—
markup.italic	#68e0c0d5	italic
markup.bold, markup.bold string	#4ada78d5	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	#27e256d5	bold
markup.underline	#6cf788	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#5eaf57	—
markup.quote	—	italic
string.other.link.title.markdown	#2ef82e	—
string.other.link.description.title.markdown	#82e969	—
constant.other.reference.link.markdown	#6bff8b	—
markup.raw.block	#92ea92	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#338b5890	—
variable.language.fenced.markdown	#2fb167	—
meta.separator	#50927d	bold
markup.table	#338b50	—

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