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 Dark Green

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...
~/my-project

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#153f48
activityBar.activeBorder#1D9A62
activityBar.background#002F38
activityBar.border#153648
activityBar.foreground#1D9A62
activityBar.inactiveForeground#8092AB
activityBarBadge.background#1D9A62
activityBarBadge.foreground#BBBBBB
badge.background#1D9A6280
badge.foreground#BBBBBB
breadcrumb.activeSelectionForeground#BBBBBB
breadcrumb.background#002F38
breadcrumb.focusForeground#BBBBBB
breadcrumb.foreground#8092AB
breadcrumbPicker.background#002F38
breadcrumbPicker.border#153648
button.background#305862
button.border#153648
button.foreground#BBBBBB
button.secondaryBackground#002F38
button.secondaryForeground#BBBBBB
button.secondaryHoverBackground#002F38
debugToolBar.background#002F38
diffEditor.changeBackground#00b9af40
diffEditor.insertedTextBackground#1D9A6240
diffEditor.removedTextBackground#ff555540
dropdown.background#002F38
dropdown.border#153648
dropdown.foreground#BBBBBB
editor.background#002F38
editor.findMatchBackground#c5856480
editor.findMatchHighlightBackground#30586280
editor.findRangeHighlightBackground#305862
editor.foldBackground#305862
editor.foreground#BBBBBB
editor.hoverHighlightBackground#30586280
editor.lineHighlightBackground#153F48
editor.lineHighlightBorder#153F48
editor.rangeHighlightBackground#00b9af15
editor.selectionBackground#305862
editor.selectionHighlightBackground#153F48
editor.snippetFinalTabstopHighlightBackground#002F38
editor.snippetFinalTabstopHighlightBorder#9876AA
editor.snippetTabstopHighlightBackground#002F38
editor.snippetTabstopHighlightBorder#8092AB
editor.wordHighlightBackground#30586280
editor.wordHighlightStrongBackground#153F4880
editorBracketHighlight.foreground1#BBBBBB
editorBracketHighlight.foreground2#1D9A62
editorBracketHighlight.foreground3#65BCD9
editorBracketHighlight.foreground4#9876AA
editorBracketHighlight.foreground5#00b9af
editorBracketHighlight.foreground6#c58564
editorBracketHighlight.unexpectedBracket.foreground#ff5555
editorBracketMatch.background#305862
editorBracketMatch.border#305862
editorCodeLens.foreground#8092AB
editorCursor.foreground#1D9A62
editorError.foreground#ff5555
editorGroup.border#153648
editorGroup.dropBackground#153F48
editorGroupHeader.tabsBackground#002F38
editorGutter.addedBackground#1D9A62
editorGutter.border#153648
editorGutter.deletedBackground#ff5555
editorGutter.modifiedBackground#00b9af
editorHoverWidget.background#002F38
editorHoverWidget.border#8092AB
editorIndentGuide.activeBackground#305862
editorIndentGuide.background#153648
editorLineNumber.activeForeground#1D9A62
editorLineNumber.foreground#a3a5ba
editorLink.activeForeground#00b9af
editorMarkerNavigation.background#002F38
editorOverviewRuler.addedForeground#1D9A6280
editorOverviewRuler.border#153648
editorOverviewRuler.currentContentForeground#9876AA
editorOverviewRuler.deletedForeground#ff555580
editorOverviewRuler.errorForeground#ff555580
editorOverviewRuler.incomingContentForeground#00b9af
editorOverviewRuler.infoForeground#65BCD980
editorOverviewRuler.modifiedForeground#00b9af80
editorOverviewRuler.selectionHighlightForeground#c58564
editorOverviewRuler.warningForeground#c5856480
editorOverviewRuler.wordHighlightForeground#65BCD9
editorOverviewRuler.wordHighlightStrongForeground#9876AA
editorRuler.foreground#002F381A
editorStickyScroll.shadow#19273D
editorStickyScrollHover.background#305862
editorSuggestWidget.background#002F38
editorSuggestWidget.foreground#BBBBBB
editorSuggestWidget.selectedBackground#305862
editorWarning.foreground#c58564
editorWhitespace.foreground#002F381A
editorWidget.background#002F38
errorForeground#ff5555
extensionButton.prominentBackground#9876AA90
extensionButton.prominentForeground#BBBBBB
extensionButton.prominentHoverBackground#9876AA60
focusBorder#305862
foreground#BBBBBB
gitDecoration.conflictingResourceForeground#c58564
gitDecoration.deletedResourceForeground#ff5555
gitDecoration.ignoredResourceForeground#8092AB
gitDecoration.modifiedResourceForeground#00b9af
gitDecoration.untrackedResourceForeground#9876AA
inlineChat.regionHighlight#002F38
input.background#002F38
input.border#153648
input.foreground#BBBBBB
input.placeholderForeground#8092AB
inputOption.activeBorder#00b9af
inputValidation.errorBorder#ff5555
inputValidation.infoBorder#1D9A62
inputValidation.warningBorder#c58564
list.activeSelectionBackground#305862
list.activeSelectionForeground#BBBBBB
list.dropBackground#305862
list.errorForeground#ff5555
list.focusBackground#153F48
list.highlightForeground#65BCD9
list.hoverBackground#153F48
list.inactiveSelectionBackground#153F48
list.warningForeground#c58564
listFilterWidget.background#002F38
listFilterWidget.noMatchesOutline#ff5555
listFilterWidget.outline#002F38
merge.currentHeaderBackground#9876AA90
merge.incomingHeaderBackground#00b9af90
panel.background#002F38
panel.border#153648
panelTitle.activeBorder#1D9A62
panelTitle.activeForeground#BBBBBB
panelTitle.inactiveForeground#8092AB
peekView.border#305862
peekViewEditor.background#002F38
peekViewEditor.matchHighlightBackground#1D9A6280
peekViewResult.background#002F38
peekViewResult.fileForeground#BBBBBB
peekViewResult.lineForeground#BBBBBB
peekViewResult.matchHighlightBackground#1D9A6280
peekViewResult.selectionBackground#305862
peekViewResult.selectionForeground#BBBBBB
peekViewTitle.background#153f48
peekViewTitleDescription.foreground#8092AB
peekViewTitleLabel.foreground#BBBBBB
pickerGroup.border#153648
pickerGroup.foreground#65BCD9
progressBar.background#1D9A62
scrollbarSlider.activeBackground#305862
scrollbarSlider.background#153648
scrollbarSlider.hoverBackground#305862
selection.background#305862
settings.checkboxBackground#002F38
settings.checkboxBorder#153f48
settings.checkboxForeground#BBBBBB
settings.dropdownBackground#002F38
settings.dropdownBorder#153f48
settings.dropdownForeground#BBBBBB
settings.headerForeground#BBBBBB
settings.modifiedItemIndicator#c58564
settings.numberInputBackground#002F38
settings.numberInputBorder#153f48
settings.numberInputForeground#BBBBBB
settings.textInputBackground#002F38
settings.textInputBorder#153f48
settings.textInputForeground#BBBBBB
sideBar.background#002F38
sideBar.border#153648
sideBarSectionHeader.background#002F38
sideBarSectionHeader.border#153648
sideBarTitle.foreground#BBBBBB
statusBar.background#002F38
statusBar.border#153648
statusBar.debuggingBackground#ff5555
statusBar.debuggingForeground#153f48
statusBar.foreground#BBBBBB
statusBar.noFolderBackground#153f48
statusBar.noFolderForeground#BBBBBB
statusBarItem.prominentBackground#ff5555
statusBarItem.prominentHoverBackground#c58564
statusBarItem.remoteBackground#002F38
statusBarItem.remoteForeground#BBBBBB
tab.activeBackground#002F38
tab.activeBorderTop#1D9A62
tab.activeForeground#BBBBBB
tab.border#153648
tab.inactiveBackground#002F38
tab.inactiveForeground#8092AB
terminal.ansiBlack#19273D
terminal.ansiBlue#9876AA
terminal.ansiBrightBlack#6272A4
terminal.ansiBrightBlue#8F69D4
terminal.ansiBrightCyan#007297
terminal.ansiBrightMagenta#FF79C6
terminal.ansiBrightPURPLE#1D9A62
terminal.ansiBrightRed#FF5555
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#c89f73
terminal.ansiCyan#007297
terminal.ansiMagenta#FF79C6
terminal.ansiPURPLE#19273D
terminal.ansiRed#FF5555
terminal.ansiWhite#F8F8F2
terminal.ansiYellow#dfae64
terminal.background#002F38
terminal.foreground#BBBBBB
titleBar.activeBackground#002F38
titleBar.activeForeground#BBBBBB
titleBar.inactiveBackground#002F38
titleBar.inactiveForeground#8092AB
walkThrough.embeddedEditorBackground#002F38

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#00b9af	—
meta.diff, meta.diff.header	#8092AB	—
markup.inserted	#1D9A62	—
markup.deleted	#ff5555	—
markup.changed	#00b9af	—
invalid	#ff5555	underline italic
invalid.deprecated	#BBBBBB	underline italic
entity.name.filename	#1D9A62	—
markup.error	#ff5555	—
markup.underline	—	underline
markup.bold	#c58564	bold
markup.heading	#00b9af	bold
markup.italic	#1D9A62	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#65BCD9	—
markup.inline.raw, markup.raw.restructuredtext	#9876AA	—
markup.underline.link, markup.underline.link.image	#65BCD9	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#1D9A62	—
entity.name.directive.restructuredtext, markup.quote	#1D9A62	italic
meta.separator.markdown	#8092AB	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#9876AA	—
punctuation.definition.constant.restructuredtext	#00b9af	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#00b9af	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#BBBBBB	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#1D9A62	—
entity.name.type.class, entity.name.class, variable.other, keyword.other.definition.ini	#65BCD9	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	#1D9A62	normal
entity.other.inherited-class	#65BCD9	normal
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#8092AB	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#1D9A62	—
comment.block.documentation entity.name.type	#65BCD9	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#65BCD9	—
comment.block.documentation variable	#c58564	italic
constant, variable.other.constant, variable.other.definition.java, variable.other.object.property.java, storage.type.function.arrow.java	#85A658	italic
constant.character.escape, constant.character.string.escape, constant.regexp	#85A658	italic
entity.name.tag	#65BCD9	—
entity.other.attribute-name.parent-selector	#00b9af	—
entity.other.attribute-name	#9876AA	—
string.unquoted.cdata.xml	#00b9af	—
meta.function-call.static	#85A658	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	#9876AA	—
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	#00b9af	normal
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#9876AA	normal
meta.decorator variable.other.object	#9876AA	—
keyword, punctuation.definition.keyword	#1D9A62	—
keyword.control.new, keyword.operator.new	—	normal
meta.selector	#1D9A62	—
support	#65BCD9	normal
support.function.magic, support.variable, variable.other.predefined	#1D9A62	normal
support.function, support.type.property-name	#65BCD9	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	#1D9A62	—
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	#1D9A62	—
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	#00b9af	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#65BCD9	—
constant.other.date, constant.other.timestamp	#c58564	—
variable.other.alias.yaml	#00b9af	italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy, source.groovy storage.type.def	#65BCD9	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	#65BCD9	normal
storage.type.annotation.java, meta.declaration.annotation.java	#A09A1D	italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#c58564	—
storage.modifier	#1D9A62	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#1D9A62	—
punctuation.definition.group.capture.regexp	#1D9A62	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#ff5555	—
punctuation.definition.character-class.regexp	#65BCD9	—
punctuation.definition.group.regexp	#c58564	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#ff5555	—
meta.assertion.look-ahead.regexp	#9876AA	—
string	#1D9A62	—
punctuation.definition.string.begin, punctuation.definition.string.end	#1D9A62	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#1D9A62	—
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	#8092AB	—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#BBBBBB	—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable	#c58564	normal
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#BBBBBB	normal
meta.selectionset.graphql variable	#1D9A62	—
meta.selectionset.graphql meta.arguments variable	#BBBBBB	—
entity.name.fragment.graphql, variable.fragment.graphql	#65BCD9	—
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	#BBBBBB	—
source.shell variable.other	#c58564	—
support.constant	#00b9af	normal
meta.scope.prerequisites.makefile	#1D9A62	—
meta.attribute-selector.scss	#1D9A62	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#BBBBBB	—
meta.preprocessor.haskell	#8092AB	—
log.error	#ff5555	normal
log.warning	#c58564	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}!`;
}