Eye Comfort Themes

Name: Eye Comfort Themes
Author: Saikat Das

Publisher: Saikat DasThemes in package: 2

Beautiful dark and light themes designed to reduce eye strain during long coding sessions

Open in VS Code

Color themes

VS Code preview

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

Eye Comfort Themes — Eye Comfort Light

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f2f0ed
activityBar.foreground#4c4f69
activityBar.inactiveForeground#9ca0b0
activityBarBadge.background#1e66f5
activityBarBadge.foreground#faf8f5
badge.background#1e66f5
badge.foreground#faf8f5
breadcrumb.activeSelectionForeground#1e66f5
breadcrumb.background#faf8f5
breadcrumb.focusForeground#4c4f69
breadcrumb.foreground#6c6f85
breadcrumbPicker.background#e6e9ef
button.background#1e66f5
button.foreground#faf8f5
button.hoverBackground#04a5e5
checkbox.background#e6e9ef
checkbox.border#bcc0cc
checkbox.foreground#4c4f69
debugToolBar.background#e6e9ef
descriptionForeground#6c6f85
diffEditor.insertedTextBackground#40a02b40
diffEditor.removedTextBackground#d2051540
dropdown.background#e6e9ef
dropdown.border#bcc0cc
dropdown.foreground#4c4f69
editor.background#faf8f5
editor.findMatchBackground#df8e1d80
editor.findMatchHighlightBackground#df8e1d40
editor.findRangeHighlightBackground#bcc0cc40
editor.foreground#4c4f69
editor.hoverHighlightBackground#bcc0cc40
editor.inactiveSelectionBackground#bcc0cc40
editor.lineHighlightBackground#f2f0ed
editor.rangeHighlightBackground#bcc0cc40
editor.selectionBackground#bcc0cc80
editor.selectionHighlightBackground#bcc0cc60
editor.wordHighlightBackground#bcc0cc60
editor.wordHighlightStrongBackground#bcc0cc80
editorBracketMatch.background#bcc0cc80
editorBracketMatch.border#1e66f5
editorCodeLens.foreground#9ca0b0
editorCursor.foreground#dc8a78
editorError.foreground#d20515
editorGroup.border#bcc0cc
editorGroupHeader.noTabsBackground#faf8f5
editorGroupHeader.tabsBackground#f2f0ed
editorGroupHeader.tabsBorder#bcc0cc
editorGutter.addedBackground#40a02b
editorGutter.deletedBackground#d20515
editorGutter.modifiedBackground#df8e1d
editorHoverWidget.background#e6e9ef
editorHoverWidget.border#bcc0cc
editorIndentGuide.activeBackground#9ca0b0
editorIndentGuide.background#bcc0cc
editorInfo.foreground#1e66f5
editorLineNumber.activeForeground#4c4f69
editorLineNumber.foreground#9ca0b0
editorLink.activeForeground#1e66f5
editorMarkerNavigation.background#e6e9ef
editorMarkerNavigationError.background#d20515
editorMarkerNavigationInfo.background#1e66f5
editorMarkerNavigationWarning.background#df8e1d
editorOverviewRuler.border#bcc0cc
editorRuler.foreground#bcc0cc
editorSuggestWidget.background#e6e9ef
editorSuggestWidget.border#bcc0cc
editorSuggestWidget.foreground#4c4f69
editorSuggestWidget.highlightForeground#1e66f5
editorSuggestWidget.selectedBackground#bcc0cc
editorWarning.foreground#df8e1d
editorWhitespace.foreground#bcc0cc
editorWidget.background#e6e9ef
editorWidget.border#bcc0cc
extensionButton.prominentBackground#1e66f5
extensionButton.prominentForeground#faf8f5
extensionButton.prominentHoverBackground#04a5e5
focusBorder#1e66f5
foreground#4c4f69
gitDecoration.addedResourceForeground#40a02b
gitDecoration.conflictingResourceForeground#fe640b
gitDecoration.deletedResourceForeground#d20515
gitDecoration.ignoredResourceForeground#9ca0b0
gitDecoration.modifiedResourceForeground#df8e1d
gitDecoration.submoduleResourceForeground#1e66f5
gitDecoration.untrackedResourceForeground#40a02b
input.background#e6e9ef
input.border#bcc0cc
input.foreground#4c4f69
input.placeholderForeground#9ca0b0
inputOption.activeBackground#1e66f540
inputOption.activeBorder#1e66f5
inputValidation.errorBackground#d20515
inputValidation.errorForeground#faf8f5
inputValidation.infoBackground#1e66f5
inputValidation.infoForeground#faf8f5
inputValidation.warningBackground#df8e1d
inputValidation.warningForeground#faf8f5
list.activeSelectionBackground#bcc0cc
list.activeSelectionForeground#4c4f69
list.dropBackground#bcc0cc80
list.focusBackground#bcc0cc80
list.focusForeground#4c4f69
list.highlightForeground#1e66f5
list.hoverBackground#bcc0cc60
list.hoverForeground#4c4f69
list.inactiveSelectionBackground#bcc0cc60
list.inactiveSelectionForeground#4c4f69
list.invalidItemForeground#d20515
list.warningForeground#df8e1d
listFilterWidget.background#e6e9ef
listFilterWidget.noMatchesOutline#d20515
listFilterWidget.outline#1e66f5
menu.background#e6e9ef
menu.border#bcc0cc
menu.foreground#4c4f69
menu.selectionBackground#bcc0cc
menu.selectionBorder#1e66f5
menu.selectionForeground#4c4f69
menu.separatorBackground#bcc0cc
menubar.selectionBackground#bcc0cc
menubar.selectionForeground#4c4f69
minimap.background#f2f0ed
minimapGutter.addedBackground#40a02b
minimapGutter.deletedBackground#d20515
minimapGutter.modifiedBackground#df8e1d
minimapSlider.activeBackground#bcc0cc80
minimapSlider.background#bcc0cc60
minimapSlider.hoverBackground#bcc0cc70
notificationCenterHeader.background#e6e9ef
notificationCenterHeader.foreground#4c4f69
notifications.background#e6e9ef
notifications.border#bcc0cc
notifications.foreground#4c4f69
notificationsErrorIcon.foreground#d20515
notificationsInfoIcon.foreground#1e66f5
notificationsWarningIcon.foreground#df8e1d
notificationToast.border#bcc0cc
panel.background#faf8f5
panel.border#bcc0cc
panelInput.border#bcc0cc
panelTitle.activeBorder#1e66f5
panelTitle.activeForeground#4c4f69
panelTitle.inactiveForeground#6c6f85
peekView.border#1e66f5
peekViewEditor.background#faf8f5
peekViewEditor.matchHighlightBackground#df8e1d40
peekViewResult.background#e6e9ef
peekViewResult.fileForeground#4c4f69
peekViewResult.lineForeground#6c6f85
peekViewResult.matchHighlightBackground#df8e1d40
peekViewResult.selectionBackground#bcc0cc
peekViewResult.selectionForeground#4c4f69
peekViewTitle.background#e6e9ef
peekViewTitleDescription.foreground#6c6f85
peekViewTitleLabel.foreground#4c4f69
pickerGroup.border#bcc0cc
pickerGroup.foreground#1e66f5
progressBar.background#1e66f5
quickInput.background#e6e9ef
quickInput.foreground#4c4f69
scrollbar.shadow#00000020
scrollbarSlider.activeBackground#9ca0b080
scrollbarSlider.background#bcc0cc60
scrollbarSlider.hoverBackground#bcc0cc80
selection.background#bcc0cc80
settings.checkboxBackground#e6e9ef
settings.checkboxBorder#bcc0cc
settings.checkboxForeground#4c4f69
settings.dropdownBackground#e6e9ef
settings.dropdownBorder#bcc0cc
settings.dropdownForeground#4c4f69
settings.dropdownListBorder#bcc0cc
settings.headerForeground#4c4f69
settings.modifiedItemIndicator#1e66f5
settings.numberInputBackground#e6e9ef
settings.numberInputBorder#bcc0cc
settings.numberInputForeground#4c4f69
settings.textInputBackground#e6e9ef
settings.textInputBorder#bcc0cc
settings.textInputForeground#4c4f69
sideBar.background#f2f0ed
sideBar.border#bcc0cc
sideBar.foreground#4c4f69
sideBarSectionHeader.background#e6e9ef
sideBarSectionHeader.border#bcc0cc
sideBarSectionHeader.foreground#4c4f69
sideBarTitle.foreground#4c4f69
statusBar.background#f2f0ed
statusBar.border#bcc0cc
statusBar.debuggingBackground#fe640b
statusBar.debuggingForeground#faf8f5
statusBar.foreground#4c4f69
statusBar.noFolderBackground#f2f0ed
statusBar.noFolderForeground#4c4f69
statusBarItem.activeBackground#bcc0cc80
statusBarItem.hoverBackground#bcc0cc60
statusBarItem.prominentBackground#1e66f5
statusBarItem.prominentForeground#faf8f5
statusBarItem.prominentHoverBackground#04a5e5
statusBarItem.remoteBackground#40a02b
statusBarItem.remoteForeground#faf8f5
tab.activeBackground#faf8f5
tab.activeBorder#1e66f5
tab.activeForeground#4c4f69
tab.activeModifiedBorder#df8e1d
tab.border#bcc0cc
tab.hoverBackground#e6e9ef
tab.hoverBorder#1e66f5
tab.hoverForeground#4c4f69
tab.inactiveBackground#f2f0ed
tab.inactiveForeground#6c6f85
tab.inactiveModifiedBorder#9ca0b0
tab.unfocusedActiveBackground#e6e9ef
tab.unfocusedActiveBorder#9ca0b0
tab.unfocusedActiveForeground#6c6f85
tab.unfocusedActiveModifiedBorder#9ca0b0
tab.unfocusedHoverBackground#bcc0cc60
tab.unfocusedHoverBorder#9ca0b0
tab.unfocusedHoverForeground#6c6f85
tab.unfocusedInactiveForeground#9ca0b0
tab.unfocusedInactiveModifiedBorder#bcc0cc
terminal.ansiBlack#5c5f77
terminal.ansiBlue#1e66f5
terminal.ansiBrightBlack#6c6f85
terminal.ansiBrightBlue#1e66f5
terminal.ansiBrightCyan#04a5e5
terminal.ansiBrightGreen#40a02b
terminal.ansiBrightMagenta#ea76cb
terminal.ansiBrightRed#d20515
terminal.ansiBrightWhite#acb0be
terminal.ansiBrightYellow#df8e1d
terminal.ansiCyan#04a5e5
terminal.ansiGreen#40a02b
terminal.ansiMagenta#ea76cb
terminal.ansiRed#d20515
terminal.ansiWhite#bcc0cc
terminal.ansiYellow#df8e1d
terminal.background#faf8f5
terminal.foreground#4c4f69
terminal.selectionBackground#bcc0cc80
terminalCursor.background#faf8f5
terminalCursor.foreground#dc8a78
textBlockQuote.background#e6e9ef
textBlockQuote.border#bcc0cc
textCodeBlock.background#e6e9ef
textLink.activeForeground#1e66f5
textLink.foreground#1e66f5
textPreformat.foreground#ea76cb
textSeparator.foreground#bcc0cc
titleBar.activeBackground#f2f0ed
titleBar.activeForeground#4c4f69
titleBar.border#bcc0cc
titleBar.inactiveBackground#f2f0ed
titleBar.inactiveForeground#9ca0b0
tree.indentGuidesStroke#bcc0cc
walkThrough.embeddedEditorBackground#e6e9ef
welcomePage.background#faf8f5
welcomePage.buttonBackground#e6e9ef
welcomePage.buttonHoverBackground#bcc0cc
widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9ca0b0	italic
variable, string constant.other.placeholder	#4c4f69	—
constant.other.color	#4c4f69	—
invalid, invalid.illegal	#d20515	—
keyword, storage.type, storage.modifier	#8839ef	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#179299	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#d20515	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#1e66f5	—
meta.block variable.other	#d20515	—
support.other.variable, string.other.link	#d20515	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#fe640b	—
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	#40a02b	—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#df8e1d	—
support.type	#179299	—
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	#179299	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#d20515	—
variable.language	#d20515	italic
entity.name.method.js	#1e66f5	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#1e66f5	—
entity.other.attribute-name	#8839ef	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#df8e1d	italic
entity.other.attribute-name.class	#df8e1d	—
source.sass keyword.control	#1e66f5	—
markup.inserted	#40a02b	—
markup.deleted	#d20515	—
markup.changed	#8839ef	—
string.regexp	#ea76cb	—
constant.character.escape	#ea76cb	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#1e66f5	italic
source.js constant.other.object.key.js string.unquoted.label.js	#d20515	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#8839ef	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#df8e1d	—
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	#fe640b	—
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	#d20515	—
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	#40a02b	—
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	#1e66f5	—
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	#ea76cb	—
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	#40a02b	—
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	#40a02b	—
text.html.markdown, punctuation.definition.list_item.markdown	#4c4f69	—
text.html.markdown markup.inline.raw.markdown	#8839ef	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#6c6f85	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#40a02b	—
markup.italic	#ea76cb	italic
markup.bold, markup.bold string	#ea76cb	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	#ea76cb	bold
markup.underline	#ea76cb	underline
markup.raw.inline	#40a02b	—
markup.quote	#df8e1d	—
markup.raw.block	#8839ef	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#4c4f69	—
variable.language.fenced.markdown	#6c6f85	—
meta.separator	#6c6f85	bold
markup.table	#4c4f69	—

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