Falcon Relaxing-Eyes Themes - 护眼主题

Name: Falcon Relaxing-Eyes Themes - 护眼主题
Author: Panxiaoan

Publisher: PanxiaoanThemes in package: 10

A gentle, eye-friendly theme to protect your eyesight for VS Code (温和、对眼睛友好、保护视力的护眼主题)

Open in VS Code GitHub

Color themes

VS Code preview

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

Falcon Relaxing-Eyes Themes - 护眼主题 — Falcon Light Bean Green

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#91CB9E
activityBar.activeBorder#067D17
activityBar.background#c7edcc
activityBar.border#bde3c2
activityBar.foreground#067D17
activityBar.inactiveForeground#9DA0A8
activityBarBadge.background#067D1780
activityBarBadge.foreground#FFFFFF
badge.background#067D1780
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#383A42
breadcrumb.background#c7edcc
breadcrumb.focusForeground#383A42
breadcrumb.foreground#9DA0A8
breadcrumbPicker.background#c7edcc
breadcrumbPicker.border#bde3c2
button.background#AFDBB8
button.border#bde3c2
button.foreground#383A42
button.secondaryBackground#c7edcc
button.secondaryForeground#383A42
button.secondaryHoverBackground#c7edcc
debugToolBar.background#c7edcc
diffEditor.changeBackground#174ad440
diffEditor.insertedTextBackground#067D1740
diffEditor.removedTextBackground#FF555540
dropdown.background#c7edcc
dropdown.border#bde3c2
dropdown.foreground#383A42
editor.background#c7edcc
editor.findMatchBackground#067D1730
editor.findMatchHighlightBackground#AFDBB8
editor.findRangeHighlightBackground#E2F9E1
editor.foldBackground#AFDBB8
editor.foreground#383A42
editor.hoverHighlightBackground#AFDBB8
editor.inactiveSelectionBackground#AFDBB8
editor.lineHighlightBackground#E2F9E1
editor.lineHighlightBorder#E2F9E1
editor.rangeHighlightBackground#174ad415
editor.selectionBackground#AFDBB8
editor.selectionHighlightBackground#AFDBB8
editor.snippetFinalTabstopHighlightBackground#c7edcc
editor.snippetFinalTabstopHighlightBorder#643CB8
editor.snippetTabstopHighlightBackground#c7edcc
editor.snippetTabstopHighlightBorder#9DA0A8
editor.wordHighlightBackground#067D1730
editor.wordHighlightStrongBackground#067D1730
editorBracketHighlight.foreground1#383A42
editorBracketHighlight.foreground2#067D17
editorBracketHighlight.foreground3#007297
editorBracketHighlight.foreground4#643CB8
editorBracketHighlight.foreground5#174ad4
editorBracketHighlight.foreground6#8D4532
editorBracketHighlight.unexpectedBracket.foreground#FF5555
editorBracketMatch.background#91CB9E
editorBracketMatch.border#91CB9E
editorCodeLens.foreground#9DA0A8
editorCursor.foreground#067D17
editorError.foreground#FF5555
editorGroup.border#bde3c2
editorGroup.dropBackground#cedee2
editorGroupHeader.tabsBackground#c7edcc
editorGutter.addedBackground#067D17
editorGutter.border#bde3c2
editorGutter.deletedBackground#FF5555
editorGutter.modifiedBackground#174ad4
editorHoverWidget.background#c7edcc
editorHoverWidget.border#9DA0A8
editorIndentGuide.activeBackground#91CB9E
editorIndentGuide.background#bde3c2
editorLineNumber.activeForeground#067D17
editorLineNumber.foreground#aeb3c2
editorLink.activeForeground#174ad4
editorMarkerNavigation.background#c7edcc
editorOverviewRuler.addedForeground#067D1780
editorOverviewRuler.border#bde3c2
editorOverviewRuler.currentContentForeground#643CB8
editorOverviewRuler.deletedForeground#FF555580
editorOverviewRuler.errorForeground#FF555580
editorOverviewRuler.incomingContentForeground#174ad4
editorOverviewRuler.infoForeground#00729780
editorOverviewRuler.modifiedForeground#174ad480
editorOverviewRuler.selectionHighlightForeground#8D4532
editorOverviewRuler.warningForeground#8D453280
editorOverviewRuler.wordHighlightForeground#007297
editorOverviewRuler.wordHighlightStrongForeground#643CB8
editorRuler.foreground#FFFFFF1A
editorSuggestWidget.background#c7edcc
editorSuggestWidget.foreground#383A42
editorSuggestWidget.selectedBackground#AFDBB8
editorWarning.foreground#8D4532
editorWhitespace.foreground#FFFFFF1A
editorWidget.background#c7edcc
errorForeground#FF5555
extensionButton.prominentBackground#643CB890
extensionButton.prominentForeground#383A42
extensionButton.prominentHoverBackground#643CB860
focusBorder#91CB9E
foreground#383A42
gitDecoration.conflictingResourceForeground#8D4532
gitDecoration.deletedResourceForeground#FF5555
gitDecoration.ignoredResourceForeground#9DA0A8
gitDecoration.modifiedResourceForeground#174ad4
gitDecoration.untrackedResourceForeground#643CB8
inlineChat.regionHighlight#c7edcc
input.background#c7edcc
input.border#bde3c2
input.foreground#383A42
input.placeholderForeground#9DA0A8
inputOption.activeBorder#174ad4
inputValidation.errorBorder#FF5555
inputValidation.infoBorder#067D17
inputValidation.warningBorder#8D4532
list.activeSelectionBackground#AFDBB8
list.activeSelectionForeground#383A42
list.dropBackground#AFDBB8
list.errorForeground#FF5555
list.focusBackground#E2F9E1
list.highlightForeground#007297
list.hoverBackground#E2F9E1
list.inactiveSelectionBackground#E2F9E1
list.warningForeground#8D4532
listFilterWidget.background#c7edcc
listFilterWidget.noMatchesOutline#FF5555
listFilterWidget.outline#c7edcc
merge.currentHeaderBackground#643CB890
merge.incomingHeaderBackground#174ad490
panel.background#c7edcc
panel.border#bde3c2
panelTitle.activeBorder#067D17
panelTitle.activeForeground#383A42
panelTitle.inactiveForeground#9DA0A8
peekView.border#AFDBB8
peekViewEditor.background#c7edcc
peekViewEditor.matchHighlightBackground#067D1780
peekViewResult.background#c7edcc
peekViewResult.fileForeground#383A42
peekViewResult.lineForeground#383A42
peekViewResult.matchHighlightBackground#067D1780
peekViewResult.selectionBackground#AFDBB8
peekViewResult.selectionForeground#383A42
peekViewTitle.background#91CB9E
peekViewTitleDescription.foreground#9DA0A8
peekViewTitleLabel.foreground#383A42
pickerGroup.border#bde3c2
pickerGroup.foreground#007297
progressBar.background#067D17
scrollbarSlider.activeBackground#AFDBB8
scrollbarSlider.background#bde3c2
scrollbarSlider.hoverBackground#AFDBB8
selection.background#AFDBB8
settings.checkboxBackground#c7edcc
settings.checkboxBorder#91CB9E
settings.checkboxForeground#383A42
settings.dropdownBackground#c7edcc
settings.dropdownBorder#91CB9E
settings.dropdownForeground#383A42
settings.headerForeground#383A42
settings.modifiedItemIndicator#8D4532
settings.numberInputBackground#c7edcc
settings.numberInputBorder#91CB9E
settings.numberInputForeground#383A42
settings.textInputBackground#c7edcc
settings.textInputBorder#91CB9E
settings.textInputForeground#383A42
sideBar.background#c7edcc
sideBar.border#bde3c2
sideBarSectionHeader.background#c7edcc
sideBarSectionHeader.border#bde3c2
sideBarTitle.foreground#383A42
statusBar.background#c7edcc
statusBar.border#bde3c2
statusBar.debuggingBackground#FF5555
statusBar.debuggingForeground#91CB9E
statusBar.foreground#383A42
statusBar.noFolderBackground#91CB9E
statusBar.noFolderForeground#383A42
statusBarItem.prominentBackground#FF5555
statusBarItem.prominentHoverBackground#8D4532
statusBarItem.remoteBackground#c7edcc
statusBarItem.remoteForeground#383A42
tab.activeBackground#c7edcc
tab.activeBorderTop#067D17
tab.activeForeground#383A42
tab.border#bde3c2
tab.inactiveBackground#c7edcc
tab.inactiveForeground#9DA0A8
terminal.ansiBlack#383A42
terminal.ansiBlue#871790
terminal.ansiBrightBlack#6272A4
terminal.ansiBrightBlue#643CB8
terminal.ansiBrightCyan#007297
terminal.ansiBrightMagenta#FF79C6
terminal.ansiBrightPURPLE#2fc864
terminal.ansiBrightRed#FF5555
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#ecc27d
terminal.ansiCyan#007297
terminal.ansiMagenta#FF79C6
terminal.ansiPURPLE#383A42
terminal.ansiRed#FF5555
terminal.ansiWhite#F8F8F2
terminal.ansiYellow#dfae64
terminal.background#c7edcc
terminal.foreground#383A42
titleBar.activeBackground#c7edcc
titleBar.activeForeground#383A42
titleBar.inactiveBackground#c7edcc
titleBar.inactiveForeground#9DA0A8
walkThrough.embeddedEditorBackground#c7edcc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#174ad4	—
meta.diff, meta.diff.header	#9DA0A8	—
markup.inserted	#067D17	—
markup.deleted	#FF5555	—
markup.changed	#174ad4	—
invalid	#FF5555	underline italic
invalid.deprecated	#383A42	underline italic
entity.name.filename	#067D17	—
markup.error	#FF5555	—
markup.underline	—	underline
markup.bold	#8D4532	bold
markup.heading	#174ad4	bold
markup.italic	#067D17	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#007297	—
markup.inline.raw, markup.raw.restructuredtext	#643CB8	—
markup.underline.link, markup.underline.link.image	#007297	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#067D17	—
entity.name.directive.restructuredtext, markup.quote	#067D17	italic
meta.separator.markdown	#9DA0A8	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#643CB8	—
punctuation.definition.constant.restructuredtext	#174ad4	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#174ad4	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#383A42	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#067D17	—
entity.name.type.class, entity.name.class, variable.other, keyword.other.definition.ini	#007297	normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special	#067D17	normal
entity.other.inherited-class	#007297	normal
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#9DA0A8	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#067D17	—
comment.block.documentation entity.name.type	#007297	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#007297	—
comment.block.documentation variable	#8D4532	italic
constant, variable.other.constant, variable.other.definition.java, variable.other.object.property.java, storage.type.function.arrow.java	#871790	italic
constant.character.escape, constant.character.string.escape, constant.regexp	#871790	italic
entity.name.tag, punctuation.definition.string.begin.xml	#007297	—
entity.other.attribute-name.parent-selector	#174ad4	—
entity.other.attribute-name	#643CB8	—
string.unquoted.cdata.xml	#174ad4	—
meta.function-call.static	#871790	italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix	#643CB8	—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter	#174ad4	normal
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#643CB8	normal
meta.decorator variable.other.object	#643CB8	—
keyword, punctuation.definition.keyword	#067D17	—
keyword.control.new, keyword.operator.new	—	normal
meta.selector	#067D17	—
support	#007297	normal
support.function.magic, support.variable, variable.other.predefined	#067D17	normal
support.function, support.type.property-name	#007297	normal
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation	#067D17	—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor	#067D17	—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile	#174ad4	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#007297	—
constant.other.date, constant.other.timestamp	#8D4532	—
variable.other.alias.yaml	#174ad4	italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy, source.groovy storage.type.def	#007297	regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml	#007297	normal
storage.type.annotation.java, meta.declaration.annotation.java	#9e880d	italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#8D4532	—
storage.modifier	#067D17	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#067D17	—
punctuation.definition.group.capture.regexp	#067D17	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#FF5555	—
punctuation.definition.character-class.regexp	#007297	—
punctuation.definition.group.regexp	#8D4532	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#FF5555	—
meta.assertion.look-ahead.regexp	#643CB8	—
string	#067D17	—
punctuation.definition.string.begin, punctuation.definition.string.end	#067D17	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#067D17	—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	#9DA0A8	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#383A42	—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable	#8D4532	normal
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#383A42	normal
meta.selectionset.graphql variable	#067D17	—
meta.selectionset.graphql meta.arguments variable	#383A42	—
entity.name.fragment.graphql, variable.fragment.graphql	#007297	—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell	#383A42	—
source.shell variable.other	#8D4532	—
support.constant	#174ad4	normal
meta.scope.prerequisites.makefile	#067D17	—
meta.attribute-selector.scss	#067D17	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#383A42	—
meta.preprocessor.haskell	#9DA0A8	—
log.error	#FF5555	normal
log.warning	#8D4532	normal

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