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-one-love (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.activeBackground#191A20
activityBar.activeBorder#3e6583
activityBar.background#1C1D27
activityBar.border#1C1D27
activityBar.foreground#3e6583
activityBarBadge.background#393d52
activityBarBadge.foreground#c7ebf6
badge.background#393d52
badge.foreground#a7d9f0
breadcrumb.activeSelectionForeground#a2d1f5
breadcrumb.background#17181F
breadcrumb.focusForeground#9eccf0
breadcrumb.foreground#236a81
breadcrumbPicker.background#17181F
button.background#2a2d37
button.foreground#97c2d6
button.hoverBackground#23242f
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#1C1D27
descriptionForeground#21789a
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#1C1D27
dropdown.border#FFFFFF10
dropdown.foreground#c2ecf5
editor.background#1C1D27
editor.findMatchBackground#2f5d6b10
editor.findMatchBorder#404e5cd8
editor.findMatchHighlightBackground#404e5c1e
editor.findMatchHighlightBorder#404e5c42
editor.findRangeHighlightBackground#404e5c65
editor.foldBackground#252d382a
editor.foreground#cedbdbd8
editor.hoverHighlightBackground#4048679d
editor.lineHighlightBackground#17181f7e
editor.lineHighlightBorder#22272e4e
editor.selectionBackground#3f5877a2
editor.selectionHighlightBackground#3f58772d
editor.snippetFinalTabstopHighlightBackground#12141d36
editor.snippetFinalTabstopHighlightBorder#12141dec
editor.snippetTabstopHighlightBackground#12141d36
editor.snippetTabstopHighlightBorder#12141dec
editor.wordHighlightBackground#00000000
editor.wordHighlightBorder#414b5ca1
editor.wordHighlightStrongBackground#404e5c42
editor.wordHighlightStrongBorder#404e5c54
editorBracketMatch.background#3d3f4b
editorBracketMatch.border#67769660
editorCursor.foreground#FF78DB
editorError.foreground#FF537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#17181F
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537060
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#1f202c
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#404253
editorIndentGuide.background1#1C1D27
editorLineNumber.activeForeground#43738a
editorLineNumber.foreground#283b45
editorLink.activeForeground#51BADC
editorMarkerNavigation.background#1f202c
editorOverviewRuler.border#1C1D27
editorRuler.foreground#37474F
editorStickyScroll.background#17181F
editorStickyScrollHover.background#1C1D27
editorSuggestWidget.background#1f202c
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#a2d1f5
editorSuggestWidget.selectedBackground#1b1b25
editorWarning.foreground#20462a70
editorWhitespace.foreground#5d697040
editorWidget.background#1C1D27
editorWidget.resizeBorder#a2d1f5
extensionBadge.remoteBackground#2a2d37
extensionBadge.remoteForeground#97c2d6
extensionButton.background#2a2d37
extensionButton.foreground#97c2d6
extensionButton.hoverBackground#23242f
extensionButton.prominentBackground#3a3f50
extensionButton.prominentForeground#97c2d6
extensionButton.prominentHoverBackground#23242f
extensionButton.separator#a2d1f5
extensionIcon.preReleaseForeground#a2d1f5
extensionIcon.sponsorForeground#a2d1f5
extensionIcon.starForeground#a2d1f5
extensionIcon.verifiedForeground#a2d1f5
focusBorder#2330427c
gitDecoration.conflictingResourceForeground#FFDD9F
gitDecoration.deletedResourceForeground#FF96A8
gitDecoration.ignoredResourceForeground#D392FF
gitDecoration.modifiedResourceForeground#53B8FF
gitDecoration.untrackedResourceForeground#C0FFB5
icon.foreground#235881
input.background#191a22
input.border#1C1D27
input.foreground#81b0d4
input.placeholderForeground#283743
inputOption.activeBorder#15161b
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#12141d
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#1C1D27
list.activeSelectionForeground#c2ecf5
list.dropBackground#1c1c20
list.focusBackground#17181F
list.focusForeground#51BADC
list.highlightForeground#85e5db
list.hoverBackground#22242ed0
list.hoverForeground#92bce0
list.inactiveSelectionBackground#1C1D27
list.inactiveSelectionForeground#abece6
listFilterWidget.background#51BADC05
listFilterWidget.noMatchesOutline#00000030
listFilterWidget.outline#00000030
menu.background#1C1D27
menu.foreground#2a738b
menu.selectionBackground#51BADC05
menu.selectionBorder#51BADC05
menu.selectionForeground#a2d1f5
menu.separatorBackground#a8d5f7
menubar.selectionBackground#607a8670
menubar.selectionBorder#51BADC05
menubar.selectionForeground#a2d1f5
minimap.background#17181F
notificationLink.foreground#a2d1f5
notifications.background#1C1D27
notifications.foreground#95dcf3
panel.background#1C1D27
panel.border#242d4760
panelTitle.activeBorder#1d283b
panelTitle.activeForeground#a2daf7
panelTitle.inactiveForeground#3f6a8b
peekView.border#232431
peekViewEditor.background#1f202c
peekViewEditor.matchHighlightBackground#a2d1f518
peekViewEditor.matchHighlightBorder#404e5c80
peekViewEditorGutter.background#1f202c
peekViewResult.background#1f202c
peekViewResult.matchHighlightBackground#a2d1f520
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#1f202c
peekViewTitleDescription.foreground#51BADC60
pickerGroup.foreground#80cfdd
progressBar.background#272b3b
quickInput.background#191a22
quickInput.foreground#82abe9
sash.hoverBorder#252634
scrollbar.shadow#16293318
scrollbarSlider.activeBackground#262733
scrollbarSlider.background#2e394321
scrollbarSlider.hoverBackground#83a8c410
selection.background#17263Aa2
settings.checkboxBackground#191a22
settings.checkboxForeground#8bb8db
settings.dropdownBackground#191a22
settings.dropdownForeground#51BADC
settings.headerForeground#3d7f97
settings.modifiedItemIndicator#a2d1f5
settings.numberInputBackground#191a22
settings.numberInputForeground#51BADC
settings.textInputBackground#191a22
settings.textInputForeground#51BADC
sideBar.background#17181F
sideBar.border#1C1D27
sideBar.foreground#4e808b
sideBarSectionHeader.background#1C1D27
sideBarSectionHeader.border#1C1D27
sideBarSectionHeader.foreground#71afbd
sideBarTitle.foreground#71afbd
statusBar.background#191b22
statusBar.border#1C1D27
statusBar.debuggingBackground#3c4354
statusBar.debuggingForeground#cbe3f7
statusBar.foreground#658b9b
statusBar.noFolderBackground#1C1D27
statusBarItem.hoverBackground#546E7A20
tab.activeBackground#1C1D27
tab.activeBorder#3e6583
tab.activeForeground#abd1da
tab.activeModifiedBorder#607a86
tab.border#17181d00
tab.hoverBorder#17181d
tab.inactiveBackground#17181F
tab.inactiveForeground#4b6470ea
tab.unfocusedActiveBorder#546E7A
tab.unfocusedActiveForeground#51BADC
terminal.ansiBlack#59677a
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#4a6473
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#51BADC
textLink.foreground#a2d1f5
titleBar.activeBackground#1C1D27
titleBar.activeForeground#79a7b6
titleBar.border#17181D60
titleBar.inactiveBackground#181921
titleBar.inactiveForeground#607a86
tree.indentGuidesStroke#1C1D27
widget.shadow#191A20

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#77777d	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#ADB89A	bold
constant.other.php, variable.other.constant	#e39a46
constant.language, support.constant, constant.other.color	#E6A36B	bold
variable.language	#7DD97D	italic
invalid, invalid.illegal	#FF8498	—
invalid.deprecated	#D199F6	—
keyword	#FF8B77	—
storage.type	#dccc41	—
storage.modifier	#79dc44	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#E595F7	—
punctuation.definition.variable.php	#13BEA8	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#DF8FFF	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#FF8383	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#FF7CB5	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#4FDAFF	—
entity.name.function	#FF81B1
source.cpp meta.block variable.other	#B0BB9D	—
support.other.variable, string.other.link	#B0BB9D	—
constant.numeric, constant.escape, keyword.other.unit	#f4a556	—
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	#79E0B3	—
entity.name, support.type, markup.changed.git_gutter, support.type.sys-types	#f0c779	—
support.other.namespace.php	#4CCBD4	—
entity.name, support.other.namespace.use.php, meta.use.php	#FF8383	—
support.class	#2cc7ba	bold
support.type	#FF7EDF	—
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	#57DDA5	—
entity.other.attribute-name	#EDD478	italic
entity.other.attribute-name.class	#C4F466	—
source.sass keyword.control, entity.other.attribute-name.id	#6BBAFF	—
markup.inserted	#7aca04	—
markup.deleted	#FF879B	—
markup.changed	#B19BFF	—
string.regexp	#FF88AE	—
constant.character.escape	#FF72ED	—
url, link, uri	#85ACFF	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	#FF8498	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	#FF859A	—
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	#F39F8D	—
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	#FF8990	—
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	#D99FFF	—
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	#55C4E8	—
text.html.markdown markup.inline.raw.markdown	#D99FFF	—
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	#FF8990	italic
markup.bold, markup.bold string	#FF8990	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	#FF8990	bold
markup.underline	#F78C6C	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#A0B7C8	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#D99FFF	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#D99FFF	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#58C9EF	—
variable.language.fenced.markdown	#AAC1D4	—
meta.separator	#AAC1D4	bold
markup.table	#53BEE1	—

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