Summer Time Theme

Name: Summer Time Theme
Author: Dennis Vash

Publisher: Dennis VashThemes in package: 1

🍧 A modern Dark Material theme for VS-Code IDE 🍦

GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Summer Time Theme — Summer Time

fetchUser.ts

index.ts

README.md

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#282c34
activityBar.border#282c3460
activityBar.foreground#a6accd
activityBarBadge.background#80cbc4
activityBarBadge.foreground#000000
breadcrumb.activeSelectionForeground#80cbc4
breadcrumb.background#282c34
breadcrumb.focusForeground#a6accd
breadcrumb.foreground#676e95
breadcrumbPicker.background#282c34
button.background#717cb450
debugToolBar.background#282c34
diffEditor.insertedTextBackground#c3e88d15
diffEditor.removedTextBackground#ff537020
dropdown.background#282c34
dropdown.border#ffffff10
editor.background#282c34
editor.foreground#a6accd
editor.lineHighlightBackground#ecf6ff1a
editor.selectionBackground#717cb450
editor.selectionHighlightBackground#ffcc0020
editorBracketMatch.background#282c34
editorBracketMatch.border#ffcc0050
editorCursor.foreground#ffcc00
editorError.foreground#ff537070
editorGroup.border#00000030
editorGroupHeader.tabsBackground#282c34
editorGutter.addedBackground#c3e88d60
editorGutter.deletedBackground#ff537060
editorGutter.modifiedBackground#82aaff60
editorHoverWidget.background#282c34
editorHoverWidget.border#ffffff10
editorIndentGuide.activeBackground#4e5579
editorIndentGuide.background#4e557970
editorInfo.foreground#F699D9
editorLineNumber.activeForeground#676e95
editorLineNumber.foreground#3a3f58
editorLink.activeForeground#a6accd
editorMarkerNavigation.background#a6accd05
editorMarkerNavigationInfo.background#F699D9
editorOverviewRuler.border#282c34
editorRuler.foreground#4e5579
editorSuggestWidget.background#282c34
editorSuggestWidget.border#ffffff10
editorSuggestWidget.foreground#a6accd
editorSuggestWidget.highlightForeground#80cbc4
editorSuggestWidget.selectedBackground#00000050
editorWhitespace.foreground#a6accd40
editorWidget.background#282c34
editorWidget.border#ff0000
editorWidget.resizeBorder#80cbc4
focusBorder#ffffff00
gitDecoration.conflictingResourceForeground#EBEA8B90
gitDecoration.deletedResourceForeground#ff537090
gitDecoration.ignoredResourceForeground#676e9590
gitDecoration.modifiedResourceForeground#82aaff90
gitDecoration.untrackedResourceForeground#c3e88d90
input.background#333747
input.border#ffffff10
input.foreground#eeffff
input.placeholderForeground#a6accd60
inputValidation.errorBorder#ff537050
inputValidation.infoBorder#82aaff50
inputValidation.warningBorder#EBEA8B50
list.activeSelectionBackground#282c34
list.activeSelectionForeground#80cbc4
list.focusBackground#a6accd20
list.focusForeground#a6accd
list.highlightForeground#80cbc4
list.hoverBackground#282c34
list.hoverForeground#ffffff
list.inactiveSelectionBackground#00000030
list.inactiveSelectionForeground#80cbc4
menu.background#282c34
menu.foreground#a6accd
menu.selectionBackground#00000050
menu.selectionBorder#00000030
menu.selectionForeground#80cbc4
menu.separatorBackground#a6accd
menubar.selectionBackground#00000030
menubar.selectionBorder#00000030
menubar.selectionForeground#80cbc4
notificationLink.foreground#80cbc4
notifications.background#282c34
notifications.foreground#a6accd
panel.background#282c34
panel.border#282c3460
panelTitle.activeBorder#80cbc4
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#a6accd
peekView.border#00000030
peekViewEditor.background#a6accd05
peekViewEditor.matchHighlightBackground#717cb450
peekViewEditorGutter.background#a6accd05
peekViewResult.background#a6accd05
peekViewResult.matchHighlightBackground#717cb450
peekViewResult.selectionBackground#676e9570
peekViewTitle.background#a6accd05
peekViewTitleDescription.foreground#a6accd60
pickerGroup.foreground#80cbc4
progressBar.background#80cbc4
scrollbar.shadow#282c3400
scrollbarSlider.activeBackground#80cbc4
scrollbarSlider.background#a6accd20
scrollbarSlider.hoverBackground#a6accd10
selection.background#a6accd
settings.checkboxBackground#282c34
settings.checkboxForeground#a6accd
settings.dropdownBackground#282c34
settings.dropdownForeground#a6accd
settings.headerForeground#80cbc4
settings.modifiedItemIndicator#80cbc4
settings.numberInputBackground#282c34
settings.numberInputForeground#a6accd
settings.textInputBackground#282c34
settings.textInputForeground#a6accd
sideBar.background#282c34
sideBar.border#282c3460
sideBar.foreground#676e95
sideBarSectionHeader.background#282c34
sideBarSectionHeader.border#282c3460
sideBarTitle.foreground#a6accd
statusBar.background#282c34
statusBar.border#282c3460
statusBar.debuggingBackground#c792ea
statusBar.debuggingForeground#ffffff
statusBar.foreground#676e95
statusBar.noFolderBackground#282c34
statusBarItem.hoverBackground#676e9520
statusBarItem.prominentBackground#F699D9
statusBarItem.prominentHoverBackground#F699D9
tab.activeBorder#e3c2eb
tab.activeForeground#ffffff
tab.activeModifiedBorder#676e95
tab.border#282c34
tab.inactiveBackground#282c34
tab.inactiveForeground#676e95
tab.unfocusedActiveBorder#676e95
tab.unfocusedActiveForeground#a6accd
terminal.ansiBlack#000000
terminal.ansiBlue#82aaff
terminal.ansiBrightBlack#676e95
terminal.ansiBrightBlue#82aaff
terminal.ansiBrightCyan#89ddff
terminal.ansiBrightGreen#c3e88d
terminal.ansiBrightMagenta#c792ea
terminal.ansiBrightRed#F699D9
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#EBEA8B
terminal.ansiCyan#89ddff
terminal.ansiGreen#c3e88d
terminal.ansiMagenta#c792ea
terminal.ansiRed#F699D9
terminal.ansiWhite#ffffff
terminal.ansiYellow#EBEA8B
textLink.activeForeground#a6accd
textLink.foreground#80cbc4
titleBar.activeBackground#282c34
titleBar.activeForeground#a6accd
titleBar.border#282c3460
titleBar.inactiveBackground#282c34
titleBar.inactiveForeground#676e95
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.other.color, keyword.other.substitution, keyword.other.template, punctuation.section.embedded, punctuation.separator.inheritance.php, punctuation, source	#ECF6FF	—
support.type.object, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, support.type.property-name, variable.graphql, variable.parameter, entity.name.type.class, entity.name.type.interface, entity.name.type.module, support.class.builtin, variable.object.property, meta.object-literal, support.class, entity.name.function.tagged-template	#ECF6FF	bold
markup.italic, meta.property-value, source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant, string, constant.numeric.css, string.quoted.single, string.template, support.function.console, meta.function-call.object	#ECF6FF	italic
entity.name.function	#ECF6FF	underline
support.variable.object, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, entity.name.type.class.php	#ECF6FF	italic bold
variable.function.constructor, meta.function-call.static	#ECF6FF	italic underline bold
variable.function, markup.underline.link, meta.function-call	#ECF6FF	italic underline
constant.numeric.decimal, constant.other.reference.link.markdown, entity.other.attribute-name.class, entity.other.inherited-class, punctuation.section.embedded, 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, source.stylus string, entity.name.type.instance, meta.type.object.graphql, punctuation.definition.tag, entity.name.fragment.graphql, meta.function.php, variable.other.php	#EBEA8B
variable.parameter.graphql, support.function.magic, storage.type.shape	#EBEA8B	italic
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	#EBEA8B	bold
meta.property.object, string.other.link.title.markdown, 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, 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, support.type, string.regexp, variable.other, variable.other.bracket.shell, variable.other.readwrite, variable.other.property	#AEE9F5
variable.other.object, variable.other.readwrite.alias, variable.fragment.graphql, entity.name.type.typedecl	#AEE9F5	italic
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, support.class.component, entity.name.tag	#AEE9F5	bold
entity.name.tag, markup.deleted.git_gutter, support.class.component	#AEE9F5	italic bold
	#AEE9F5	italic underline
support.type, variable.other.constant, support.variable.property, 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, string.other.link, meta.property-list.scss, markup.inserted, meta.type.object.graphql, support.type.primitive	#A8F79A
constant.character.escape, entity.name.type, entity.other.attribute-name, support.class.console, support.function, support.type.graphql, storage.type.php	#A8F79A	italic
	#A8F79A	italic underline
markup.underline	#A8F79A	underline
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, markup.underline, entity.name.tag.css	#A8F79A	bold
keyword, punctuation, punctuation.operation.graphql, storage.modifier.php, storage.type	#F699D9
constant.language, storage.modifier, entity.name.tag.grapahql.js, constant.other	#F699D9	bold
keyword.control, punctuation.definition, keyword.fragment.graphql	#F699D9	italic
keyword.generator.asterisk	#F699D9	italic bold
comment	#A3B5C3	—
punctuation.definition.comment	#A3B5C3	italic

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