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

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#1D1F25
activityBar.activeBorder#238d82
activityBar.background#17181f
activityBar.border#1D1F25
activityBar.foreground#238d82
activityBar.inactiveForeground#294444
activityBarBadge.background#393941
activityBarBadge.foreground#b9ccd4
badge.background#393941
badge.foreground#b9ccd4
breadcrumb.activeSelectionForeground#59b0f3
breadcrumb.background#1D1F25
breadcrumb.focusForeground#9eccf0
breadcrumb.foreground#89aeb6
breadcrumbPicker.background#1D1F25
button.background#393941
button.foreground#97c2d6
button.hoverBackground#393941ca
contrastActiveBorder#1D1F25
contrastBorder#1D1F25
debugConsole.errorForeground#ee3b3b
debugConsole.infoForeground#31c6fc
debugConsole.sourceForeground#3feb79
debugConsole.warningForeground#eeec44
debugConsoleInputIcon.foreground#f527a3
debugToolBar.background#17181f
descriptionForeground#6bf2f5
diffEditor.insertedTextBackground#C3E88D15
diffEditor.removedTextBackground#FF537020
dropdown.background#17181f
dropdown.border#FFFFFF10
dropdown.foreground#c2ecf5
editor.background#17181f
editor.findMatchBackground#3469652d
editor.findMatchBorder#5a5e79bd
editor.findMatchHighlightBackground#3f6e6723
editor.findMatchHighlightBorder#5a5e798a
editor.findRangeHighlightBackground#3ce7cb3f
editor.foldBackground#14141846
editor.foreground#e1e5e5d8
editor.hoverHighlightBackground#3d6f5e25
editor.lineHighlightBackground#15161b
editor.lineHighlightBorder#1a1f246c
editor.selectionBackground#242633d7
editor.selectionHighlightBackground#384e6069
editor.snippetFinalTabstopHighlightBackground#00324836
editor.snippetFinalTabstopHighlightBorder#1D1F25
editor.snippetTabstopHighlightBackground#00324836
editor.snippetTabstopHighlightBorder#1D1F25
editor.wordHighlightBackground#1c4d3d10
editor.wordHighlightBorder#5a5e79bb
editor.wordHighlightStrongBackground#26665125
editor.wordHighlightStrongBorder#656a88d5
editorBracketMatch.background#17181f
editorBracketMatch.border#67769660
editorCursor.foreground#0abb3f
editorError.foreground#FF537070
editorGroup.border#17181f
editorGroupHeader.tabsBackground#17181f
editorGutter.addedBackground#84b83b30
editorGutter.deletedBackground#FF537050
editorGutter.modifiedBackground#4e81ee50
editorHoverWidget.background#181a22
editorHoverWidget.border#FFFFFF10
editorIndentGuide.activeBackground1#363846
editorIndentGuide.background1#17181f
editorLineNumber.activeForeground#43738a
editorLineNumber.foreground#283b45
editorLink.activeForeground#33758b
editorMarkerNavigation.background#181a22
editorOverviewRuler.border#17181f
editorRuler.foreground#37474F
editorStickyScroll.background#1D1F25
editorStickyScrollHover.background#17181f
editorSuggestWidget.background#181a22
editorSuggestWidget.border#18181C
editorSuggestWidget.foreground#c5e2f8
editorSuggestWidget.highlightForeground#70baf3
editorSuggestWidget.selectedBackground#16171f
editorWarning.foreground#20462a70
editorWhitespace.foreground#67737a40
editorWidget.background#17181f
editorWidget.resizeBorder#a2d1f5
extensionBadge.remoteBackground#393941
extensionBadge.remoteForeground#97c2d6
extensionButton.background#393941
extensionButton.foreground#97c2d6
extensionButton.hoverBackground#393941ca
extensionButton.prominentBackground#393941
extensionButton.prominentForeground#97c2d6
extensionButton.prominentHoverBackground#393941ca
extensionButton.separator#95dcf3
extensionIcon.preReleaseForeground#95dcf3
extensionIcon.sponsorForeground#95dcf3
extensionIcon.starForeground#95dcf3
extensionIcon.verifiedForeground#95dcf3
focusBorder#2330427c
gitDecoration.conflictingResourceForeground#f7bc50a2
gitDecoration.deletedResourceForeground#FF537090
gitDecoration.ignoredResourceForeground#8756af90
gitDecoration.modifiedResourceForeground#0e6eadcb
gitDecoration.untrackedResourceForeground#91ee8190
icon.foreground#238d82
input.background#1a1b24
input.border#18191C
input.foreground#81b0d4
input.placeholderForeground#49789d98
inputOption.activeBorder#15161b
inputValidation.errorBorder#FF537050
inputValidation.infoBorder#82AAFF50
inputValidation.warningBackground#1D1F25
inputValidation.warningBorder#67769660
inputValidation.warningForeground#82abe9
list.activeSelectionBackground#17181f
list.activeSelectionForeground#89aeb6
list.dropBackground#1c1c20
list.focusBackground#33758b20
list.focusForeground#33758b
list.highlightForeground#85e5db
list.hoverBackground#191b22
list.hoverForeground#92bce0c0
list.inactiveSelectionBackground#17181f
list.inactiveSelectionForeground#5a7c79
listFilterWidget.background#17181f
listFilterWidget.noMatchesOutline#17181f
listFilterWidget.outline#17181f
menu.background#17181f
menu.foreground#89aeb6
menu.selectionBackground#18191C
menu.selectionBorder#1a1b22
menu.selectionForeground#a2d1f5
menu.separatorBackground#a8d5f7
menubar.selectionBackground#1b1d24
menubar.selectionBorder#1b1d24
menubar.selectionForeground#a2d1f5
minimap.background#1D1F25
notificationLink.foreground#a2d1f5
notifications.background#1D1F25
notifications.foreground#95dcf3
panel.background#17181f
panel.border#242d4760
panelTitle.activeBorder#1d283b
panelTitle.activeForeground#a2daf7
panelTitle.inactiveForeground#3f6a8b
peekView.border#1b1e27
peekViewEditor.background#181a22
peekViewEditor.matchHighlightBackground#a2d1f513
peekViewEditor.matchHighlightBorder#5a5e79d5
peekViewEditorGutter.background#181a22
peekViewResult.background#181a22
peekViewResult.matchHighlightBackground#a2d1f520
peekViewResult.selectionBackground#607a8670
peekViewTitle.background#181a22
peekViewTitleDescription.foreground#33758b60
pickerGroup.foreground#80cfdd
progressBar.background#1c1f2b
quickInput.background#1b1d24
quickInput.foreground#82abe9
sash.hoverBorder#393945
scrollbar.shadow#0c221936
scrollbarSlider.activeBackground#262733
scrollbarSlider.background#141418b9
scrollbarSlider.hoverBackground#83a8c410
selection.background#383b50e8
settings.checkboxBackground#141416
settings.checkboxForeground#8bb8db
settings.dropdownBackground#1b1d24
settings.dropdownForeground#6aaac0d3
settings.headerForeground#6aaac0d3
settings.modifiedItemIndicator#a2d1f54d
settings.numberInputBackground#1b1d24
settings.numberInputForeground#6aaac0d3
settings.textInputBackground#1b1d24
settings.textInputForeground#6aaac0d3
sideBar.background#1D1F25
sideBar.border#17181f
sideBar.foreground#4e7683
sideBarSectionHeader.background#17181f
sideBarSectionHeader.border#17181f
sideBarSectionHeader.foreground#568e9b
sideBarTitle.foreground#47717b
statusBar.background#12141d9c
statusBar.border#18181C
statusBar.debuggingBackground#293a39
statusBar.debuggingForeground#dbeaf7
statusBar.foreground#466470
statusBar.noFolderBackground#17181fdc
statusBarItem.hoverBackground#37495220
tab.activeBackground#1D1F25
tab.activeBorder#06bdaa
tab.activeForeground#79a4ad
tab.activeModifiedBorder#e6e60e
tab.border#1D1F25
tab.hoverBackground#18181C
tab.inactiveBackground#17181f
tab.inactiveForeground#4b565c
tab.unfocusedActiveBorder#18181C
tab.unfocusedActiveForeground#33758b93
terminal.ansiBlack#5a687a
terminal.ansiBlue#4377e8
terminal.ansiBrightBlack#435964
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#2a738b
textLink.foreground#48c7d8b9
titleBar.activeBackground#17181fdc
titleBar.activeForeground#608d9c
titleBar.border#17181f
titleBar.inactiveBackground#1f2029
titleBar.inactiveForeground#607a86
tree.indentGuidesStroke#19364790
widget.shadow#1a1b21

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#747479	—
punctuation.definition.comment, string.quoted.docstring	—	italic bold
variable, string constant.other.placeholder	#a3ccc7d5	bold
constant.other.php, variable.other.constant	#d3a066
constant.language, support.constant, constant.other.color	#dbc670	bold
variable.language	#8edf8e	italic
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
keyword	#dd8760	—
storage.type	#74d4e6	—
storage.modifier	#54a0d3	—
Keyword, Storage	—	italic
punctuation, punctuation.definition.tag, punctuation.section.embedded	#DC9DA8	—
punctuation.definition.variable.php	#1a8879	—
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution, punctuation.separator.inheritance.php	#5ca56f	—
keyword.control	—	italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, punctuation.definition.tag.html	#4889b8	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#6eb9eb	bold
meta.function-call, variable.function, support.function, keyword.other.special-method	#c77f91	—
entity.name.function	#ca76c3
source.cpp meta.block variable.other	#91beb8d5	—
support.other.variable, string.other.link	#91beb8d5	—
constant.numeric, constant.escape, keyword.other.unit	#b69a53	—
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	#688559	—
entity.name, support.type, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ddb469	—
support.other.namespace.php	#b15069	—
entity.name, support.class	#cc4656	bold
support.type	#7871da	—
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	#AE6572	italic
entity.other.attribute-name.class	#ce6d92	—
source.sass keyword.control, entity.other.attribute-name.id	#2c9096	—
markup.inserted	#7aca04	—
markup.deleted	#f4022b	—
markup.changed	#3b07f7	—
string.regexp	#e75252	—
constant.character.escape	#e258d0	—
url, link, uri	#fa5353	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	#f76c83	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	#f5ca7a	—
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	#ff6680	—
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	#C17E70	—
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	#4991a8	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
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	#f07178	italic
markup.bold, markup.bold string	#f07178	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	#f07178	bold
markup.underline	#F78C6C	underline
markup.strike	—	italic
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
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	#33758b90	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#33758b	—

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