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 Dark

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#181825
activityBar.foreground#cdd6f4
activityBar.inactiveForeground#6c7086
activityBarBadge.background#89b4fa
activityBarBadge.foreground#1e1e2e
badge.background#89b4fa
badge.foreground#1e1e2e
breadcrumb.activeSelectionForeground#89b4fa
breadcrumb.background#1e1e2e
breadcrumb.focusForeground#cdd6f4
breadcrumb.foreground#9399b2
breadcrumbPicker.background#313244
button.background#89b4fa
button.foreground#1e1e2e
button.hoverBackground#74c7ec
checkbox.background#313244
checkbox.border#45475a
checkbox.foreground#cdd6f4
debugToolBar.background#313244
descriptionForeground#9399b2
diffEditor.insertedTextBackground#a6e3a140
diffEditor.removedTextBackground#f38ba840
dropdown.background#313244
dropdown.border#45475a
dropdown.foreground#cdd6f4
editor.background#1e1e2e
editor.findMatchBackground#f9e2af80
editor.findMatchHighlightBackground#f9e2af40
editor.findRangeHighlightBackground#45475a40
editor.foreground#cdd6f4
editor.hoverHighlightBackground#45475a40
editor.inactiveSelectionBackground#45475a40
editor.lineHighlightBackground#313244
editor.rangeHighlightBackground#45475a40
editor.selectionBackground#45475a80
editor.selectionHighlightBackground#45475a60
editor.wordHighlightBackground#45475a60
editor.wordHighlightStrongBackground#45475a80
editorBracketMatch.background#45475a80
editorBracketMatch.border#89b4fa
editorCodeLens.foreground#6c7086
editorCursor.foreground#f5e0dc
editorError.foreground#f38ba8
editorGroup.border#45475a
editorGroupHeader.noTabsBackground#1e1e2e
editorGroupHeader.tabsBackground#181825
editorGroupHeader.tabsBorder#45475a
editorGutter.addedBackground#a6e3a1
editorGutter.deletedBackground#f38ba8
editorGutter.modifiedBackground#f9e2af
editorHoverWidget.background#313244
editorHoverWidget.border#45475a
editorIndentGuide.activeBackground#6c7086
editorIndentGuide.background#45475a
editorInfo.foreground#89b4fa
editorLineNumber.activeForeground#cdd6f4
editorLineNumber.foreground#6c7086
editorLink.activeForeground#89b4fa
editorMarkerNavigation.background#313244
editorMarkerNavigationError.background#f38ba8
editorMarkerNavigationInfo.background#89b4fa
editorMarkerNavigationWarning.background#f9e2af
editorOverviewRuler.border#45475a
editorRuler.foreground#45475a
editorSuggestWidget.background#313244
editorSuggestWidget.border#45475a
editorSuggestWidget.foreground#cdd6f4
editorSuggestWidget.highlightForeground#89b4fa
editorSuggestWidget.selectedBackground#45475a
editorWarning.foreground#f9e2af
editorWhitespace.foreground#45475a
editorWidget.background#313244
editorWidget.border#45475a
extensionButton.prominentBackground#89b4fa
extensionButton.prominentForeground#1e1e2e
extensionButton.prominentHoverBackground#74c7ec
focusBorder#89b4fa
foreground#cdd6f4
gitDecoration.addedResourceForeground#a6e3a1
gitDecoration.conflictingResourceForeground#fab387
gitDecoration.deletedResourceForeground#f38ba8
gitDecoration.ignoredResourceForeground#6c7086
gitDecoration.modifiedResourceForeground#f9e2af
gitDecoration.submoduleResourceForeground#89b4fa
gitDecoration.untrackedResourceForeground#a6e3a1
input.background#313244
input.border#45475a
input.foreground#cdd6f4
input.placeholderForeground#6c7086
inputOption.activeBackground#89b4fa40
inputOption.activeBorder#89b4fa
inputValidation.errorBackground#f38ba8
inputValidation.errorForeground#1e1e2e
inputValidation.infoBackground#89b4fa
inputValidation.infoForeground#1e1e2e
inputValidation.warningBackground#f9e2af
inputValidation.warningForeground#1e1e2e
list.activeSelectionBackground#45475a
list.activeSelectionForeground#cdd6f4
list.dropBackground#45475a80
list.focusBackground#45475a80
list.focusForeground#cdd6f4
list.highlightForeground#89b4fa
list.hoverBackground#45475a60
list.hoverForeground#cdd6f4
list.inactiveSelectionBackground#45475a60
list.inactiveSelectionForeground#cdd6f4
list.invalidItemForeground#f38ba8
list.warningForeground#f9e2af
listFilterWidget.background#313244
listFilterWidget.noMatchesOutline#f38ba8
listFilterWidget.outline#89b4fa
menu.background#313244
menu.border#45475a
menu.foreground#cdd6f4
menu.selectionBackground#45475a
menu.selectionBorder#89b4fa
menu.selectionForeground#cdd6f4
menu.separatorBackground#45475a
menubar.selectionBackground#45475a
menubar.selectionForeground#cdd6f4
minimap.background#181825
minimapGutter.addedBackground#a6e3a1
minimapGutter.deletedBackground#f38ba8
minimapGutter.modifiedBackground#f9e2af
minimapSlider.activeBackground#45475a80
minimapSlider.background#45475a60
minimapSlider.hoverBackground#45475a70
notificationCenterHeader.background#313244
notificationCenterHeader.foreground#cdd6f4
notifications.background#313244
notifications.border#45475a
notifications.foreground#cdd6f4
notificationsErrorIcon.foreground#f38ba8
notificationsInfoIcon.foreground#89b4fa
notificationsWarningIcon.foreground#f9e2af
notificationToast.border#45475a
panel.background#1e1e2e
panel.border#45475a
panelInput.border#45475a
panelTitle.activeBorder#89b4fa
panelTitle.activeForeground#cdd6f4
panelTitle.inactiveForeground#9399b2
peekView.border#89b4fa
peekViewEditor.background#1e1e2e
peekViewEditor.matchHighlightBackground#f9e2af40
peekViewResult.background#313244
peekViewResult.fileForeground#cdd6f4
peekViewResult.lineForeground#9399b2
peekViewResult.matchHighlightBackground#f9e2af40
peekViewResult.selectionBackground#45475a
peekViewResult.selectionForeground#cdd6f4
peekViewTitle.background#313244
peekViewTitleDescription.foreground#9399b2
peekViewTitleLabel.foreground#cdd6f4
pickerGroup.border#45475a
pickerGroup.foreground#89b4fa
progressBar.background#89b4fa
quickInput.background#313244
quickInput.foreground#cdd6f4
scrollbar.shadow#00000040
scrollbarSlider.activeBackground#6c708680
scrollbarSlider.background#45475a60
scrollbarSlider.hoverBackground#45475a80
selection.background#45475a80
settings.checkboxBackground#313244
settings.checkboxBorder#45475a
settings.checkboxForeground#cdd6f4
settings.dropdownBackground#313244
settings.dropdownBorder#45475a
settings.dropdownForeground#cdd6f4
settings.dropdownListBorder#45475a
settings.headerForeground#cdd6f4
settings.modifiedItemIndicator#89b4fa
settings.numberInputBackground#313244
settings.numberInputBorder#45475a
settings.numberInputForeground#cdd6f4
settings.textInputBackground#313244
settings.textInputBorder#45475a
settings.textInputForeground#cdd6f4
sideBar.background#181825
sideBar.border#45475a
sideBar.foreground#cdd6f4
sideBarSectionHeader.background#313244
sideBarSectionHeader.border#45475a
sideBarSectionHeader.foreground#cdd6f4
sideBarTitle.foreground#cdd6f4
statusBar.background#181825
statusBar.border#45475a
statusBar.debuggingBackground#fab387
statusBar.debuggingForeground#1e1e2e
statusBar.foreground#cdd6f4
statusBar.noFolderBackground#181825
statusBar.noFolderForeground#cdd6f4
statusBarItem.activeBackground#45475a80
statusBarItem.hoverBackground#45475a60
statusBarItem.prominentBackground#89b4fa
statusBarItem.prominentForeground#1e1e2e
statusBarItem.prominentHoverBackground#74c7ec
statusBarItem.remoteBackground#a6e3a1
statusBarItem.remoteForeground#1e1e2e
tab.activeBackground#1e1e2e
tab.activeBorder#89b4fa
tab.activeForeground#cdd6f4
tab.activeModifiedBorder#f9e2af
tab.border#45475a
tab.hoverBackground#313244
tab.hoverBorder#89b4fa
tab.hoverForeground#cdd6f4
tab.inactiveBackground#181825
tab.inactiveForeground#9399b2
tab.inactiveModifiedBorder#6c7086
tab.unfocusedActiveBackground#313244
tab.unfocusedActiveBorder#6c7086
tab.unfocusedActiveForeground#9399b2
tab.unfocusedActiveModifiedBorder#6c7086
tab.unfocusedHoverBackground#45475a60
tab.unfocusedHoverBorder#6c7086
tab.unfocusedHoverForeground#9399b2
tab.unfocusedInactiveForeground#6c7086
tab.unfocusedInactiveModifiedBorder#45475a
terminal.ansiBlack#45475a
terminal.ansiBlue#89b4fa
terminal.ansiBrightBlack#585b70
terminal.ansiBrightBlue#89b4fa
terminal.ansiBrightCyan#94e2d5
terminal.ansiBrightGreen#a6e3a1
terminal.ansiBrightMagenta#f5c2e7
terminal.ansiBrightRed#f38ba8
terminal.ansiBrightWhite#a6adc8
terminal.ansiBrightYellow#f9e2af
terminal.ansiCyan#94e2d5
terminal.ansiGreen#a6e3a1
terminal.ansiMagenta#f5c2e7
terminal.ansiRed#f38ba8
terminal.ansiWhite#bac2de
terminal.ansiYellow#f9e2af
terminal.background#1e1e2e
terminal.foreground#cdd6f4
terminal.selectionBackground#45475a80
terminalCursor.background#1e1e2e
terminalCursor.foreground#f5e0dc
textBlockQuote.background#313244
textBlockQuote.border#45475a
textCodeBlock.background#313244
textLink.activeForeground#89b4fa
textLink.foreground#89b4fa
textPreformat.foreground#f5c2e7
textSeparator.foreground#45475a
titleBar.activeBackground#181825
titleBar.activeForeground#cdd6f4
titleBar.border#45475a
titleBar.inactiveBackground#181825
titleBar.inactiveForeground#6c7086
tree.indentGuidesStroke#45475a
walkThrough.embeddedEditorBackground#313244
welcomePage.background#1e1e2e
welcomePage.buttonBackground#313244
welcomePage.buttonHoverBackground#45475a
widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6c7086	italic
variable, string constant.other.placeholder	#cdd6f4	—
constant.other.color	#cdd6f4	—
invalid, invalid.illegal	#f38ba8	—
keyword, storage.type, storage.modifier	#cba6f7	—
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	#89dceb	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#f2cdcd	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#89b4fa	—
meta.block variable.other	#f38ba8	—
support.other.variable, string.other.link	#f38ba8	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#fab387	—
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	#a6e3a1	—
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	#f9e2af	—
support.type	#89dceb	—
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	#89dceb	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#f38ba8	—
variable.language	#f38ba8	italic
entity.name.method.js	#89b4fa	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#89b4fa	—
entity.other.attribute-name	#cba6f7	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#f9e2af	italic
entity.other.attribute-name.class	#f9e2af	—
source.sass keyword.control	#89b4fa	—
markup.inserted	#a6e3a1	—
markup.deleted	#f38ba8	—
markup.changed	#cba6f7	—
string.regexp	#f5c2e7	—
constant.character.escape	#f5c2e7	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#89b4fa	italic
source.js constant.other.object.key.js string.unquoted.label.js	#f38ba8	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#cba6f7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f9e2af	—
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	#fab387	—
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	#f38ba8	—
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	#a6e3a1	—
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	#89b4fa	—
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	#f5c2e7	—
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	#a6e3a1	—
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	#a6e3a1	—
text.html.markdown, punctuation.definition.list_item.markdown	#cdd6f4	—
text.html.markdown markup.inline.raw.markdown	#cba6f7	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#9399b2	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#a6e3a1	—
markup.italic	#f5c2e7	italic
markup.bold, markup.bold string	#f5c2e7	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	#f5c2e7	bold
markup.underline	#f5c2e7	underline
markup.raw.inline	#a6e3a1	—
markup.quote	#f9e2af	—
markup.raw.block	#cba6f7	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#cdd6f4	—
variable.language.fenced.markdown	#9399b2	—
meta.separator	#9399b2	bold
markup.table	#cdd6f4	—

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